04. web design
TRANSCRIPT
![Page 1: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/1.jpg)
Веб Дизайн
Лекция 4, Раскадровка и Карты Сайта
Vladimir Tomberg, PhD
Эстонский Университет Прикладных Наук
по Предпринимательству Майнор
Январь 2015
Pic
ture
sourc
e:
htt
p:/
/userc
ente
redconte
nt.
com
![Page 2: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/2.jpg)
ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТ
2
![Page 3: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/3.jpg)
ВИЗУАЛЬНОЕ ПРЕДСТАВЛЕНИЕ ИСТОРИЙ
3
![Page 5: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/5.jpg)
Инфографика
• Инфографика — это графический способ подачи информации, данных и знаний, целью которого является быстро и чётко преподносить сложную информацию. Одна из форм информационного дизайна
5
![Page 8: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/8.jpg)
Инфографика
• Инфографика способна не только организовать большие объёмы информации, но и более наглядно показать соотношение предметов и фактов во времени и пространстве, а также продемонстрировать тенденции
8
![Page 10: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/10.jpg)
От данных к результату
10Источник: http://infographicsmag.ru
![Page 11: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/11.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение http://www.coollinesartwork.com
![Page 12: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/12.jpg)
STORYBOARD – РАСКАДРОВКА
• "Раскадровка" (storyboard) - это грубый прототип, состоящий из серии набросков экранов/страниц;
• Используются дизайнерами для того, чтобы проиллюстрировать или свести воедино свои идеи и получить отзывы по ним
12
![Page 13: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/13.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение http://www.ac4d.com
![Page 14: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/14.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение: http://www.soohpark.com
![Page 15: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/15.jpg)
STORYBOARD – РАСКАДРОВКА
![Page 16: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/16.jpg)
STORYBOARD – РАСКАДРОВКА
![Page 17: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/17.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение http://kathybateman.com
![Page 18: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/18.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение http://kathybateman.com
![Page 19: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/19.jpg)
Достоинства раскадровок
• Видна вся система в целом;
• Видно функциональное назначение каждого элемента раскадровки;
• Видна схема навигации;
• Позволяет проверить точность и полноту схемы;
• Может быть представлена пользователям для оценки
19
![Page 20: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/20.jpg)
Задание 10:Создание Раскадровки
• Пользуясь созданными персонажами и сценариями создайте сценарии использования сайта;
• Раскадровка строится на основе контекста использования и сценариев;
• Подвергните идеи мозговому штурму;• Выберите лучшие идеи: обсудите требования,
объем времени и ресурсов, целевую аудиторию проекта и конечных пользователей системы. Выделите главные идеи;
• Набросайте, как будет выглядеть каждый экран, опишите по каждому экрану картинку, рисунок, анимацию, звук, музыку или текст
20
![Page 21: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/21.jpg)
ИНФОРМАЦИОННАЯ АРХИТЕКТУРА
21
![Page 22: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/22.jpg)
Информационная архитектура
• Информационная архитектура означает организацию веб сайта таким образом, чтобы его было легко использовать и на нем было легко производить поиск;
• Критичными концептами для организации веб сайтов являются:1. Схемы организации;
2. Категории;
3. Заголовки
22
![Page 23: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/23.jpg)
Введение в информационную архитектуру
• Информационная архитектура (IA) отличается от визуального дизайна или программирования тем, что фокусируется на структуре веб сайта, а не на его внешнем виде или функциональности;
• Целью IA является построение веб сайта, простого в использовании, отвечающего целям как клиента (заказчика), так и пользователя.
23
![Page 24: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/24.jpg)
Пример: сайт заказа завтракаYourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр 24
![Page 25: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/25.jpg)
Пример 1: сайт заказа завтракаYourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр 25
Не сфокусирован на пользовательских нуждах
Извилистая функциональность
Противоречивая организация
![Page 26: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/26.jpg)
26
• Плохая Информационная Архитектура извилиста, противоречива и сложна, без всякой на то необходимости. Она затрудняет использование веб сайтов
Плохая Информационная Архитектура
Изображение http://tema.livejournal.com
![Page 27: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/27.jpg)
27
Пример 2: другой сайт заказа завтрака
• Хорошая Информационная Архитектура проста, ясна и элегантна. Делает использование веб сайта максимально простым
![Page 28: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/28.jpg)
Пример 2: другой сайт заказа завтрака
Breakfasttable.comСсылка: Такой же
завтрак, как вчера
Соки Арахисовое масло
Чай Сыр
ДжемКофе
БутербродыНапитки Каша
28
• Хорошая Информационная Архитектура проста, ясна и
элегантна. Делает использование веб сайта максимально
простым.
![Page 29: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/29.jpg)
Что делает информационная архитектура?
• Корневая задача IA — организацияинформации на веб сайте таким образом, чтобы пользователи могли находить то, что им нужно и достигать своих целей (пример – покупка продуктов в большом магазине);
• Чем счастливее будет пользователь, тем больше он купит продуктов или услуг, проведет на сайте больше времени, что сделает бизнес более прибыльным;
29
![Page 31: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/31.jpg)
Задачи Информационной Архитектуры
1. Изучение пользователя: что делают люди, чтобы достичь своих целей, посещая веб сайт?
2. Определение содержания и функциональности: как это должно помочь пользователю достичь своих бизнес целей?
3. Разработка организационных схем: как веб сайт должен быть организован?
4. Разработка интерфейса совместно с графическим дизайнером.
5. Отслеживание этих задач в процессе построения сайта.
31
![Page 32: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/32.jpg)
IA в реальной жизни и в Веб
32
![Page 33: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/33.jpg)
Цели и способы организации содержания
• Имеется бесконечное количество путей для того, чтобы организовать одну и ту же информацию;
• Бизнес цели и цели пользователей управляют тем, какая организационная схема используется
33
![Page 34: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/34.jpg)
Разные возможности организации:Вариант 1.
Добро пожаловать
к столу для
завтрака
БутербродыНапитки Каша
34
![Page 35: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/35.jpg)
Разные возможности организации:Вариант 2.
Добро пожаловать
к столу для
завтрака
Завтраки для занятых
женщин
Завтраки для школьников Завтраки для всех
35
![Page 36: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/36.jpg)
Разные возможности организации:Вариант 3.
Добро пожаловать
к столу для
завтрака
Поделитесь своей
историей о завтраке
Посмотрите, что едят
знаменитые люди
Зарегистрируйтесь для
международного
виртуального стола для
завтрака
36
![Page 37: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/37.jpg)
Разные возможности организации:Вариант 4.
Добро пожаловать
к столу для
завтрака
ХлебВыберите продукт Каша
37
![Page 38: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/38.jpg)
Что является результатом IA?(Чему мы научимся?)
• В Информационной архитектуре используется множество методологий, среди которых самыми популярными являются две:
1. Описание сайта с точки зрения содержания и организации — чаще всего в виде карты сайта;
2. Функциональное описание, объясняющее как, предположительно, будет работать Веб сайт.
• Уровень детализации в этих описаниях может широко варьироваться
38
![Page 39: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/39.jpg)
Список содержания и организация
Yourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр
• IA отвечает за список всего содержания и структуры веб сайта. Чаще всего они представлены в виде карты сайта, таблицы содержания, функциональных диаграмм.
39
![Page 40: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/40.jpg)
Список содержания
40
![Page 41: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/41.jpg)
Карты сайта
41
![Page 42: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/42.jpg)
Несколько мыслей о картах сайта
• Карты сайта для IA — это не карты сайта для пользователей, которые он может найти на веб сайте (визуальные или XML);
• Карты сайта должны исходить из идей, тогда их можно будет легко изменять;
• Работа IA заключается не столько в рисовании карт для иллюстрации структуры (это простое дело), сколько в поиске правильной структуры.
42
![Page 43: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/43.jpg)
Пример: карта сайта для пользователей
43
![Page 44: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/44.jpg)
Карты сайта и взаимодействие
• Карты сайта предназначены для коммуникации;
• Нет стандартных карт сайтов, они зависят от типа проекта и структуры команды;
• Карты сайтов предназначены для того, чтобы команда могла дискутировать о сайте, иллюстрируя на ней свои мысли и идеи;
• Карта полезна клиентам, для того, чтобы было проще обсуждать с ними сайт, для визуальных дизайнеров, чтобы создавать разные типы оформления и для программистов, чтобы руководствоваться ими при программировании сайта
44
![Page 45: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/45.jpg)
Концептуальная карта сайта (высокоуровневая)
• Концептуальные карты сайта не отображают все страницы сайта, а показывают общую структуру. Они полезны на первоначальнойстадии проекта.
• Чаще всего они включают в себя: Разные секции веб сайта;
Разные уровни доступа;
Разные типы функциональности;
Пользователей сайта и то, каким образом они взаимодействуют с сайтом
45
![Page 46: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/46.jpg)
Пример концептуальной карты сайта
Домашняястраница
Зашел в систему?
Только подписчики
Регистрация / вход
Последние статьи
Новости
Архив статей
Документация
46
![Page 47: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/47.jpg)
Классическая карта сайта
• Классическая карта сайта показывает все страницы сайта;
• Если имеется множество страниц одного типа (новости, статьи), то показывают только одну;
• Страницы на карте визуально группируются и связываются стрелками, однако нет смысла показывать на карте все реальные гиперссылки — надо просто соединять страницы таким образом, как они организованы в иерархии
47
![Page 48: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/48.jpg)
Пример:Карта сайта со всеми гиперссылками
48
![Page 49: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/49.jpg)
Пример: Карта сайта только с иерархическими связями
49
![Page 50: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/50.jpg)
Глубина сайта
• Карта сайта обычно показывает глубину сайта —сколько щелчков мышью необходимо сделать, чтобы добраться до последней страницы;
• Преимущество большой глубины заключается в том, что первая страница не очень перегружается;
• Малая глубина дает возможность найти необходимую информацию при минимальной возможности дезориентироваться;
• Не существует правил, какая глубина лучше, в каждом конкретном случае необходимо искать индивидуальный подход, связанный с задачами бизнеса и пользователей
50
![Page 51: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/51.jpg)
Пр
им
ер
сай
та с
пл
оск
ой
нав
ига
ци
ей
51
![Page 52: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/52.jpg)
Пример карты сайта с плоской навигацией (малой глубиной)
52
![Page 53: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/53.jpg)
Пример карты сайта с большой глубиной
Home
All articles All pictures
Articles at price First picture Second pictureFree articles
First eight Second eight
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
53
![Page 54: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/54.jpg)
Правило двух щелчков
• Часто встречается мнение, что должна иметься возможность добраться до любой страницы на сайте за два щелчка мышью. И хотя это не всегда возможно, правильная организация меню позволяет быстро получать доступ к довольно большому количеству страниц
Общее количество страниц для меню разного размера и уровней вложения.
Количество пунктов в меню
Количество уровней вложения
5 7 8 10
1 5 7 8 10
2 25 49 64 100
3 125 343 512 1000
54
![Page 55: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/55.jpg)
Требования к картам сайта
• Каждая страница сайта должна иметь собственный идентификатор — номер или название страницы;
• В зависимости от использования сайта можно добавлять разную информацию, в частности: Страницы, имеющие особое значение для
программиста;
Уровень доступа — какие страницы доступны только подписчикам;
Не HTML страницы, например, Flash, PDF;
Тип содержания страницы — статья, обзор, форма;
Какой тип навигации используется на странице.
55
![Page 56: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/56.jpg)
Инструментарий
• Для построения карт сайтов можно использовать разные инструменты. Подойдут векторные редакторы: Corel Draw, Illustrator, Freehand. Также можно воспользоваться встроенными средствами MS Office;
• Существуют и специальные инструменты —ConceptDraw, Inspiration, но самым популярным у информационных архитекторов стал MS Visio;
• Visio имеет встроенные наборы символов для рисования карт сайтов, также имеется множество наборов от третьих разработчиков
56
![Page 57: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/57.jpg)
Встроенные в Visio наборы символов (stencils) для проектирования сайта
• Концептуальные символы • Символы для карты сайта57
![Page 58: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/58.jpg)
Наборы символов от третьих разработчиков
58
Загрузить: https://www.dropbox.com/
![Page 59: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/59.jpg)
Изометрические карты
• Изометрические карты используют в решении дизайна цвет, глубину и ярлыки;
• Этот дает отличное представление о сайте и его использовании
59
![Page 60: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/60.jpg)
Пример набора изометрических символов
60
Загрузить: https://www.dropbox.com/
![Page 61: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/61.jpg)
Изометрическая концептуальная карта сайта
61
![Page 62: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/62.jpg)
Таблицы со списками содержания• Таблицы со списками содержания являются
альтернативным путем представления страниц сайта. Они бывают полезны, когда необходимо делать частые изменения в содержании, без необходимости показывать иерархию;
• Таблицы со списками содержания обычно используют совместно с картами сайтов
62
![Page 63: 04. web design](https://reader030.vdocuments.site/reader030/viewer/2022032419/55a2d5b61a28abea278b4880/html5/thumbnails/63.jpg)
Задание 11
• Создайте концептуальную карту сайта отталкиваясь от ваших сценариев и раскадровки;
• Старайтесь использовать только страницы, которые описаны в сценарии — сайт не должен быть неоправданно большим
• Опишите краткое назначение каждой страницы
63