Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

04. web design

524 visualizaciones

Publicado el

Web design course November 2015

Publicado en: Diseño
  • Sé el primero en comentar

04. web design

  1. 1. Веб Дизайн Лекция 4, Сценарии и раскадровки Vladimir Tomberg, PhD Estonian Entrepreneurship University Mainor Октябрь 2015 Picturesource:http://usercenteredcontent.com
  2. 2. Презентация домашних работ 1. Краткое описание проекта 2. Три сайта с похожей идеей 3. Слоган 4. Цели бизнеса 5. Прототип посадочной страницы 6. Анализ аудитории 7. Персонажи 2
  3. 3. СЦЕНАРИИ • Помещение персонажа в реальную ситуацию позволяет проверить, как система подходит для реальной жизни
  4. 4. Сценарии • Сценарии — это короткие истории, описывающие, как люди в идеале могут использовать Веб-сайт. Они соотносят функции сайта с целями пользователя, помогая при обсуждениях и при принятии верных решений. Особенно полезным является использование в сценариях персонажей; • Создание сценария не является сложной задачей. Необходимо написать короткую историю, описывающую то, как некоторые пользователи могли бы идеально использовать сайт. “Идеально” — означает, что надо описать сессию, наилучшим образом выполняющую как цели пользователя, так и цели бизнеса. 4
  5. 5. Пример: Сценарий 1 • Персонаж: Герда • Возраст: 23 • Профессия: Юридический клерк • Сценарий: Герда занимается просмотром Веб-сайтов на работе, во время обеденного перерыва. Она попадает на наш Веб-сайт через рекламную ссылку с текстом “Придайте значение своим деньгам” с другого сайта. • На первой странице ее встречает ссылка «Персональный мастер финансов" — калькулятор, который позволяет ей вводить свою зарплату и ежемесячные расходы. Ей предлагается зарегистрироваться, чтобы не вводить эти же детали в следующий раз. В этот момент ее прерывает телефонный звонок подруги и она решает зарегистрироваться в другой раз. 5
  6. 6. Пример: Сценарий 2 • Персонаж: Марк • Возраст: 32 • Профессия: водитель Грузовика • Утро. На его первом посещении Марк хочет узнать, может ли этот сайт выручить его. Когда он добирается до нашей начальной страницы, он уже посетил три других сайта, которые были ему рекомендованы. Они ему не понравились. Его терпение на исходе. • Начальная страница представляет краткое заверение о беспристрастности сайта, Марк мельком замечает это. Есть секция со статьями на тему, как управлять финансами— их названия кажутся Марку подходящими. Его внимание привлекает одно название“Как Вы управляете своими финансами — сделайте тест”. Он быстро просматривает статью. Там говорится о нескольких вещах, о которых он не знал. Это ему нравится, он ищет другие интересные статьи. • Находятся ссылки на другие разносторонние статьи и дискуссии. Марк выбирает статью: “Обсуждая финансы с вашими друзьями: кого Вы должны слушать?” Он снова просматривает короткую статью с некоторыми хорошими советами и ссылками на более глубокие материалы. Марк начинает чувствовать, что этот сайт мог бы быть полезен и понятен для него. • Марк распечатывает статьи — его Dial-Up дорог, а у него будет время чтобы прочитать их в автобусе и в течение обеденного перерыва. Он распечатывает пять страниц, заканчиваетонлайн сессию и берет статьи с собой на работу. 6
  7. 7. Пример: Сценарий 2 • Персонаж: Антон • Возраст: 49 • Профессия: директор компании • Сценарий: Антон уже контролирует свои финансы, но посещает сайт, заметив в прессе рекламу о новом финансовом сайте. Он уже пользуется онлайн банком и, таким же образом, обслуживает свои акции. Но он также интересуется новыми продуктами, которые могли бы ему помочь. Антон рассматривает возможности замены своего пенсионного фонда, и хотел бы получить другую информацию для сравнения. • Антон читает две новостных статьи насчет пенсий, проверяет сравнительные нормы и выгоды на калькуляторе пенсии и делает закладку для будущего посещения. 7
  8. 8. Чего нельзя допускать • Разработка сайта на основе изучения аудитории не означает того, что можно дать самой аудитории решать, как будет выглядеть сайт и как он должен работать 8
  9. 9. Задание 8: Создание сценариев • Пользуясь созданными персонажами создайте три сценария использования сайта; • Первый сценарий должен быть для использования на мобильном телефоне, второй – на планшете, третий – на настольном компьютере или ноутбуке; • Результат выгрузить в Google Drive 9
  10. 10. ИНФОГРАФИКА: ВИЗУАЛЬНЫЕ ИСТОРИИ Source: http://visual.ly
  11. 11. Инфографика • Инфографика — это графический способ подачи информации, данных и знаний, целью которого является быстро и чётко преподносить сложную информацию. Одна из форм информационного дизайна 11
  12. 12. 12 Изображение http://www.mnogomart.ru
  13. 13. 13 Изображение http://5coins.ru/
  14. 14. Инфографика • Инфографика способна не только организовать большие объёмы информации, но и более наглядно показать соотношение предметов и фактов во времени и пространстве, а также продемонстрировать тенденции 14
  15. 15. 15 Изображение: http://infographicsmag.ru/
  16. 16. От данных к результату 16Источник: http://infographicsmag.ru
  17. 17. STORYBOARD – РАСКАДРОВКА Изображение http://www.coollinesartwork.com
  18. 18. STORYBOARD – РАСКАДРОВКА • "Раскадровка" (storyboard) - это грубый прототип, состоящий из серии набросков экранов/страниц; • Используются дизайнерами для того, чтобы проиллюстрировать или свести воедино свои идеи и получить отзывы по ним 18
  19. 19. STORYBOARD – РАСКАДРОВКА Изображение http://www.ac4d.com
  20. 20. STORYBOARD – РАСКАДРОВКА Изображение: http://www.soohpark.com
  21. 21. STORYBOARD – РАСКАДРОВКА
  22. 22. STORYBOARD – РАСКАДРОВКА
  23. 23. STORYBOARD – РАСКАДРОВКА Изображение http://kathybateman.com
  24. 24. STORYBOARD – РАСКАДРОВКА Изображение http://kathybateman.com
  25. 25. Достоинства раскадровок • Видна вся система в целом; • Видно функциональное назначение каждого элемента раскадровки; • Видна схема навигации; • Позволяет проверить точность и полноту схемы; • Может быть представлена пользователям для оценки 25
  26. 26. Задание 10: Создание Раскадровки • Пользуясь созданными персонажами и сценариями создайте сценарии использования сайта; • Раскадровка строится на основе контекста использования и сценариев; • Подвергните идеи мозговому штурму; • Выберите лучшие идеи: обсудите требования, объем времени и ресурсов, целевую аудиторию проекта и конечных пользователей системы. Выделите главные идеи; • Набросайте, как будет выглядеть каждый экран, опишите по каждому экрану картинку, рисунок, анимацию, звук, музыку или текст 26

×