08. web design

Введение в Пользовательский Опыт

Лекция 8, Прототипирование, цвет

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Ноябрь 2014

Pic

ture

sou

rce:

htt

p://

user

cent

ered

cont

ent.

com

Тестирование на прототипах

Бумажные прототипы;Программные прототипы

2

Бумажные прототипы

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

• Модели позволяют выявить и устранить некоторые недостатки в самом начале, не внося их в практические разработки. Изменения в бумажных прототипах можно сделать быстро - даже во время испытания, - и разработчики смогут сразу отреагировать на выявленные недостатки

3

Пример: работа с прототипом

4

Библиотеки элементов для бумажных прототипов

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

http://www.infodesign.com.au/usabilityresources/design/paperprototypinggraphics.asp

5

Программные прототипы

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

• Одним из популярных инструментов является Denim, разработанный в Калифорнийском университете

6

Denim

7

Создание цветовых палитр;Цветовые схемы;

Инструментарий для создания цветовых палитр

8

Создание цветовых палитр

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

• Сделать это можно разными способами, одним из них является использование специального инструментария.

• Существует множество инструментов для подбора палитры, как платных, так и бесплатных. Основные приемы построения гармоничных цветовых схем для сайтов иллюстрируются с помощью программы Color Scheme Generator 2.

9

Color Scheme Generator http://paletton.com/

10

Цветовые схемы:Монохроматические,

Аналоговые и Комплиментарные гармонии

11

Монохроматические гармонии

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

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

• При правильном использовании, эта схема может придать Web-сайту аккуратный, чистый вид. Однако, как правило, такой вариант выглядит довольно скучно и его разбавляют дополнительным цветом (цветами).

12

Пример

Сайт "Корпорация НЕДВИЖИМОСТЬ" использует монохроматическую гармонию из оттенков синего цвета разной насыщенности.Дополненный слабый оливковый цвет только подчеркивает выбранную тональность.

13

Пример

Rational Software использует гармонию, близкую к монохроматической, из оттенков синего цвета разной насыщенности, слегка примешивая сине-зеленые элементы.

14

Аналоговые гармонии• Аналоговые гармонии

базируются на цветах, расположенных поблизости друг от друга на цветовом круге.

15

ПримерСайт www.voiceyourself.com использует аналоговую гармонию из желтого, оранжевого и зеленого цветов.

16

Пример

Сайт officialblue.com использует аналоговую гармонию из синего, бирюзового и фиолетового цветов.

17

Комплиментарные гармонии

• Комплиментарные цветовые схемы построены на цветах, располагающихся друг напротив друга на цветовом колесе. Эти цвета являются негативами друг для друга или полными противоположностями. Они называются комплиментарными/дополняющими потому, что будучи помещенными рядом, они делают друг друга ярче и живее.

• По этой причине сочетания этих цветов всегда выглядят гораздо ярче и интенсивнее, чем цвета, расположенные ближе друг к другу.

• В связи с этим пользоваться такими схемами надо чрезвычайно осторожно.

18

Пример неудачного сочетания

комплиментарных цветов.

19

Другой пример неудачного сочетания

комплиментарных цветов.

20

Пример

На данном сайте противоположные красный и зеленый имеют очень низкую яркость и пониженную насыщенность. Благодаря этому сочетание цветов становится гармоничным и перестает быть опасным.

21

Триадная схема

• Самый простой способ подбора цветов в цветовом круге - представить себе над кругом равнобедренный треугольник. Цвета, которые окажутся под вершинами - потенциальные кандидаты на использование.

• Этот тип подбора цветов называется триадной схемой, эти цвета, работая вместе образуют гармоничную комбинацию цветов.

22

Пример

На сайте Puzzle Pirates используется триадная схема, состоящая из красного, синего и желтого цветов.

23

ПримерОкна Роста

В одном из дизайнов сайта “Окна Роста” использовалась триадная схема из красного, голубого и желтого цветов.

24

Пример

Сайт idanalytics.com использует триадную схему, состоящую из красно-оранжевого, желто-зеленого и сине-фиолетовых цветов темных оттенков и слабой насыщенности.

25

Схема тетрада• Схема тетрада, это схема, когда берутся

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

• Подобная гамма дает очень насыщенные цветовые композиции.

26

Примерwww.ecolution.com

• На сайте www.ecolution.com можно обнаружить тетраду из четырех базовых цветов, с разной яркостью и насыщенностью.

27

Примерwww.pbs.org/wnet/nature/goodall

• На странице “Jane Goodall” можно обнаружить цвета тетрады.

28

Расщепленный комплемент

• Расщепленный комплемент (split complement), это когда берется цвет, его комплиментарный цвет и два прилегающих к нему цвета.

• В данном случае цвет хорошо выделяется на фоне гармонирующих с комплементарным цветов.

29

Примерwww.avt-service.ru

Синий и зеленый, гармонируя друг с другом, хорошо оттеняют на своем фоне красно-коричневый.

30

Пример

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

31

Разделенная тетрада (Split Tetrad)

• Две пары комплементарных цветов называют разделенной тетрадой или двойным комплементом.

• Сайтов, использующих такие схемы цветов не очень много, поскольку остается опасность плохого сочетания этих цветов.

32

Пример

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

33

Инструментарий для создания цветовых палитр

34

Adobe Kulerhttps://color.adobe.com/create/color-wheel/

35

Color Blenderhttp://www.meyerweb.com/eric/tools/color-blend• Строит палитру от двух

до десяти цветов, располагающихся между двумя основными цветами.

• Особенно удачными получаются палитры из аналоговых и монохроматичных цветов.

• Может быть полезна для выбора цветов для вспомогательных элементов, например, таблиц и форм.

36

Пример:Таблицы, оформленные монохроматическими

цветами

37

Color Schemer Studiohttp://www.colorschemer.com

Инструмент с большим количеством возможностей.38

Color Schemer Studiohttp://www.colorschemer.com

Позволяет выбирать разные цветовые схемы.39

Color Schemer Studiohttp://www.colorschemer.com

Имеет некоторые возможности предварительного просмотра.

40

ColorImpacthttp://www.tigercolor.com

41

ColorImpacthttp://www.tigercolor.com

42

ColorImpacthttp://www.tigercolor.com

43

Color Wheel Prohttp://www.color-wheel-pro.com

44

Color Wheel Prohttp://www.color-wheel-pro.com

45

Color Wheel Experthttp://www.abitom.com

46

Получение палитры из изображения

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

• Этот способ будет отлично работать, если известна иллюстрация, которая будет использоваться на странице.

47

Получение палитры из изображения с помощью Adobe

Photoshop• Для начала необходимо

найти изображение, гамма которого подходит к будущему сайту.

• Применить к нему FILTER—> CRYSTALLIZE, количество цветов уменьшится.

48

Получение палитры из изображения с помощью Adobe

Photoshop (2)Щелкая инструментом пипетка в понравившиеся цвета, каждый цвет добавляется в палитру Swatches.

49

Color Schemer Studio сам умеет извлекать палитры из

изображения

50

Color Schemer Studio сам умеет извлекать палитры из изображения (2)

51

Задание на дом

• На основании выбранных основных цветов разработать одну или несколько палитр для сайта;

• Использовать методы и инструментарий, рассмотренные на лекции;

• Процесс задокументировать:1. Если выбрана цветовая схема — объяснить,

почему;

2. Если схема строится на основе изображения, обосновать выбор и показать исходник;

• Результат опубликовать.52

Задание на дом

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

• Не использовать HTML (это должно быть изображение).• Написать важные тексты (навигация, ссылки), неважные и/или

большие тексты заменить Loren ipsum или подходящим по смыслу текстом.

• Использовать Photoshop, Fireworks или любой другой графический редактор.

• Использовать цвета для интерфейса, навигации и текстов, использовать подходящие изображения.

• Результаты в формате JPEG выложить в блоге.

53