04. web design

Веб Дизайн

Лекция 4, Сценарии и раскадровкиVladimir Tomberg, PhD

Estonian Entrepreneurship University Mainor

Октябрь 2015

Pic

ture

sou

rce:

http

://us

erce

nter

edco

nten

t.com

Презентация домашних работ

1. Краткое описание проекта2. Три сайта с похожей идеей3. Слоган4. Цели бизнеса5. Прототип посадочной страницы6. Анализ аудитории7. Персонажи

2

СЦЕНАРИИ

• Помещение персонажа в реальную ситуацию позволяет проверить, как система подходит для реальной жизни

Сценарии• Сценарии — это короткие истории, описывающие, как

люди в идеале могут использовать Веб-сайт. Они соотносят функции сайта с целями пользователя, помогая при обсуждениях и при принятии верных решений. Особенно полезным является использование в сценариях персонажей;

• Создание сценария не является сложной задачей. Необходимо написать короткую историю, описывающую то, как некоторые пользователи могли бы идеально использовать сайт. “Идеально” — означает, что надо описать сессию, наилучшим образом выполняющую как цели пользователя, так и цели бизнеса.

4

Пример: Сценарий 1•Персонаж: Герда•Возраст: 23•Профессия: Юридический клерк•Сценарий: Герда занимается просмотром Веб-сайтов на работе,

во время обеденного перерыва. Она попадает на наш Веб-сайт через рекламную ссылку с текстом “Придайте значение своим деньгам” с другого сайта.

•На первой странице ее встречает ссылка «Персональный мастер финансов" — калькулятор, который позволяет ей вводить свою зарплату и ежемесячные расходы. Ей предлагается зарегистрироваться, чтобы не вводить эти же детали в следующий раз. В этот момент ее прерывает телефонный звонок подруги и она решает зарегистрироваться в другой раз.

5

Пример: Сценарий 2•Персонаж: Марк•Возраст: 32•Профессия: водитель Грузовика•Утро. На его первом посещении Марк хочет узнать, может ли этот сайт выручить его. Когда он

добирается до нашей начальной страницы, он уже посетил три других сайта, которые были ему рекомендованы. Они ему не понравились. Его терпение на исходе.

•Начальная страница представляет краткое заверение о беспристрастности сайта, Марк мельком замечает это. Есть секция со статьями на тему, как управлять финансами — их названия кажутся Марку подходящими. Его внимание привлекает одно название “Как Вы управляете своими финансами — сделайте тест”. Он быстро просматривает статью. Там говорится о нескольких вещах, о которых он не знал. Это ему нравится, он ищет другие интересные статьи.

•Находятся ссылки на другие разносторонние статьи и дискуссии. Марк выбирает статью: “Обсуждая финансы с вашими друзьями: кого Вы должны слушать?” Он снова просматривает короткую статью с некоторыми хорошими советами и ссылками на более глубокие материалы. Марк начинает чувствовать, что этот сайт мог бы быть полезен и понятен для него.

•Марк распечатывает статьи — его Dial-Up дорог, а у него будет время чтобы прочитать их в автобусе и в течение обеденного перерыва. Он распечатывает пять страниц, заканчивает онлайн сессию и берет статьи с собой на работу.

6

Пример: Сценарий 2•Персонаж: Антон•Возраст: 49•Профессия: директор компании•Сценарий: Антон уже контролирует свои финансы, но посещает

сайт, заметив в прессе рекламу о новом финансовом сайте. Он уже пользуется онлайн банком и, таким же образом, обслуживает свои акции. Но он также интересуется новыми продуктами, которые могли бы ему помочь. Антон рассматривает возможности замены своего пенсионного фонда, и хотел бы получить другую информацию для сравнения.

•Антон читает две новостных статьи насчет пенсий, проверяет сравнительные нормы и выгоды на калькуляторе пенсии и делает закладку для будущего посещения.

7

Чего нельзя допускать

• Разработка сайта на основе изучения аудитории не означает того, что можно дать самой аудитории решать, как будет выглядеть сайт и как он должен работать

8

Задание 8:Создание сценариев

• Пользуясь созданными персонажами создайте три сценария использования сайта;

• Первый сценарий должен быть для использования на мобильном телефоне, второй – на планшете, третий – на настольном компьютере или ноутбуке;

• Результат выгрузить в Google Drive

9

ИНФОГРАФИКА: ВИЗУАЛЬНЫЕ ИСТОРИИ

Source: http://visual.ly

11

Инфографика

• Инфографика — это графический способ подачи информации, данных и знаний, целью которого является быстро и чётко преподносить сложную информацию. Одна из форм информационного дизайна

12Изображение http://www.mnogomart.ru

13Изображение http://5coins.ru/

Инфографика

• Инфографика способна не только организовать большие объёмы информации, но и более наглядно показать соотношение предметов и фактов во времени и пространстве, а также продемонстрировать тенденции

14

15Изображение: http://infographicsmag.ru/

От данных к результату

16Источник: http://infographicsmag.ru

STORYBOARD – РАСКАДРОВКА

Изображение http://www.coollinesartwork.com

STORYBOARD – РАСКАДРОВКА

• "Раскадровка" (storyboard) - это грубый прототип, состоящий из серии набросков экранов/страниц;

• Используются дизайнерами для того, чтобы проиллюстрировать или свести воедино свои идеи и получить отзывы по ним

18

STORYBOARD – РАСКАДРОВКА

Изображение http://www.ac4d.com

STORYBOARD – РАСКАДРОВКА

Изображение: http://www.soohpark.com

STORYBOARD – РАСКАДРОВКА

STORYBOARD – РАСКАДРОВКА

STORYBOARD – РАСКАДРОВКА

Изображение http://kathybateman.com

STORYBOARD – РАСКАДРОВКА

Изображение http://kathybateman.com

Достоинства раскадровок

• Видна вся система в целом;• Видно функциональное назначение

каждого элемента раскадровки;• Видна схема навигации;• Позволяет проверить точность и полноту

схемы;• Может быть представлена пользователям

для оценки

25

Задание 10:Создание Раскадровки

• Пользуясь созданными персонажами и сценариями создайте сценарии использования сайта;

• Раскадровка строится на основе контекста использования и сценариев;

• Подвергните идеи мозговому штурму;• Выберите лучшие идеи: обсудите требования, объем

времени и ресурсов, целевую аудиторию проекта и конечных пользователей системы. Выделите главные идеи;

• Набросайте, как будет выглядеть каждый экран, опишите по каждому экрану картинку, рисунок, анимацию, звук, музыку или текст

26