Date : 04 Nov 2015 Web Design Fundamentals Planning and Documentation.
04. web design
-
Upload
vladimir-tomberg -
Category
Design
-
view
432 -
download
0
Transcript of 04. web design
![Page 1: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/1.jpg)
Веб Дизайн
Лекция 4, Сценарии и раскадровкиVladimir Tomberg, PhD
Estonian Entrepreneurship University Mainor
Октябрь 2015
Pic
ture
sou
rce:
http
://us
erce
nter
edco
nten
t.com
![Page 2: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/2.jpg)
Презентация домашних работ
1. Краткое описание проекта2. Три сайта с похожей идеей3. Слоган4. Цели бизнеса5. Прототип посадочной страницы6. Анализ аудитории7. Персонажи
2
![Page 3: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/3.jpg)
СЦЕНАРИИ
• Помещение персонажа в реальную ситуацию позволяет проверить, как система подходит для реальной жизни
![Page 4: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/4.jpg)
Сценарии• Сценарии — это короткие истории, описывающие, как
люди в идеале могут использовать Веб-сайт. Они соотносят функции сайта с целями пользователя, помогая при обсуждениях и при принятии верных решений. Особенно полезным является использование в сценариях персонажей;
• Создание сценария не является сложной задачей. Необходимо написать короткую историю, описывающую то, как некоторые пользователи могли бы идеально использовать сайт. “Идеально” — означает, что надо описать сессию, наилучшим образом выполняющую как цели пользователя, так и цели бизнеса.
4
![Page 5: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/5.jpg)
Пример: Сценарий 1•Персонаж: Герда•Возраст: 23•Профессия: Юридический клерк•Сценарий: Герда занимается просмотром Веб-сайтов на работе,
во время обеденного перерыва. Она попадает на наш Веб-сайт через рекламную ссылку с текстом “Придайте значение своим деньгам” с другого сайта.
•На первой странице ее встречает ссылка «Персональный мастер финансов" — калькулятор, который позволяет ей вводить свою зарплату и ежемесячные расходы. Ей предлагается зарегистрироваться, чтобы не вводить эти же детали в следующий раз. В этот момент ее прерывает телефонный звонок подруги и она решает зарегистрироваться в другой раз.
5
![Page 6: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/6.jpg)
Пример: Сценарий 2•Персонаж: Марк•Возраст: 32•Профессия: водитель Грузовика•Утро. На его первом посещении Марк хочет узнать, может ли этот сайт выручить его. Когда он
добирается до нашей начальной страницы, он уже посетил три других сайта, которые были ему рекомендованы. Они ему не понравились. Его терпение на исходе.
•Начальная страница представляет краткое заверение о беспристрастности сайта, Марк мельком замечает это. Есть секция со статьями на тему, как управлять финансами — их названия кажутся Марку подходящими. Его внимание привлекает одно название “Как Вы управляете своими финансами — сделайте тест”. Он быстро просматривает статью. Там говорится о нескольких вещах, о которых он не знал. Это ему нравится, он ищет другие интересные статьи.
•Находятся ссылки на другие разносторонние статьи и дискуссии. Марк выбирает статью: “Обсуждая финансы с вашими друзьями: кого Вы должны слушать?” Он снова просматривает короткую статью с некоторыми хорошими советами и ссылками на более глубокие материалы. Марк начинает чувствовать, что этот сайт мог бы быть полезен и понятен для него.
•Марк распечатывает статьи — его Dial-Up дорог, а у него будет время чтобы прочитать их в автобусе и в течение обеденного перерыва. Он распечатывает пять страниц, заканчивает онлайн сессию и берет статьи с собой на работу.
6
![Page 7: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/7.jpg)
Пример: Сценарий 2•Персонаж: Антон•Возраст: 49•Профессия: директор компании•Сценарий: Антон уже контролирует свои финансы, но посещает
сайт, заметив в прессе рекламу о новом финансовом сайте. Он уже пользуется онлайн банком и, таким же образом, обслуживает свои акции. Но он также интересуется новыми продуктами, которые могли бы ему помочь. Антон рассматривает возможности замены своего пенсионного фонда, и хотел бы получить другую информацию для сравнения.
•Антон читает две новостных статьи насчет пенсий, проверяет сравнительные нормы и выгоды на калькуляторе пенсии и делает закладку для будущего посещения.
7
![Page 8: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/8.jpg)
Чего нельзя допускать
• Разработка сайта на основе изучения аудитории не означает того, что можно дать самой аудитории решать, как будет выглядеть сайт и как он должен работать
8
![Page 9: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/9.jpg)
Задание 8:Создание сценариев
• Пользуясь созданными персонажами создайте три сценария использования сайта;
• Первый сценарий должен быть для использования на мобильном телефоне, второй – на планшете, третий – на настольном компьютере или ноутбуке;
• Результат выгрузить в Google Drive
9
![Page 11: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/11.jpg)
11
Инфографика
• Инфографика — это графический способ подачи информации, данных и знаний, целью которого является быстро и чётко преподносить сложную информацию. Одна из форм информационного дизайна
![Page 12: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/12.jpg)
12Изображение http://www.mnogomart.ru
![Page 13: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/13.jpg)
13Изображение http://5coins.ru/
![Page 14: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/14.jpg)
Инфографика
• Инфографика способна не только организовать большие объёмы информации, но и более наглядно показать соотношение предметов и фактов во времени и пространстве, а также продемонстрировать тенденции
14
![Page 16: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/16.jpg)
От данных к результату
16Источник: http://infographicsmag.ru
![Page 17: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/17.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение http://www.coollinesartwork.com
![Page 18: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/18.jpg)
STORYBOARD – РАСКАДРОВКА
• "Раскадровка" (storyboard) - это грубый прототип, состоящий из серии набросков экранов/страниц;
• Используются дизайнерами для того, чтобы проиллюстрировать или свести воедино свои идеи и получить отзывы по ним
18
![Page 19: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/19.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение http://www.ac4d.com
![Page 20: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/20.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение: http://www.soohpark.com
![Page 21: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/21.jpg)
STORYBOARD – РАСКАДРОВКА
![Page 22: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/22.jpg)
STORYBOARD – РАСКАДРОВКА
![Page 23: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/23.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение http://kathybateman.com
![Page 24: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/24.jpg)
STORYBOARD – РАСКАДРОВКА
Изображение http://kathybateman.com
![Page 25: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/25.jpg)
Достоинства раскадровок
• Видна вся система в целом;• Видно функциональное назначение
каждого элемента раскадровки;• Видна схема навигации;• Позволяет проверить точность и полноту
схемы;• Может быть представлена пользователям
для оценки
25
![Page 26: 04. web design](https://reader035.fdocuments.net/reader035/viewer/2022070513/58856a2d1a28ab491b8b6269/html5/thumbnails/26.jpg)
Задание 10:Создание Раскадровки
• Пользуясь созданными персонажами и сценариями создайте сценарии использования сайта;
• Раскадровка строится на основе контекста использования и сценариев;
• Подвергните идеи мозговому штурму;• Выберите лучшие идеи: обсудите требования, объем
времени и ресурсов, целевую аудиторию проекта и конечных пользователей системы. Выделите главные идеи;
• Набросайте, как будет выглядеть каждый экран, опишите по каждому экрану картинку, рисунок, анимацию, звук, музыку или текст
26