08. web design
TRANSCRIPT
![Page 1: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/1.jpg)
Введение в Пользовательский Опыт
Лекция 8, Прототипирование, цвет
Vladimir Tomberg, PhD
Эстонский Университет Прикладных Наук
по Предпринимательству Майнор
Ноябрь 2014
Pic
ture
sou
rce:
htt
p://
user
cent
ered
cont
ent.
com
![Page 2: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/2.jpg)
Тестирование на прототипах
Бумажные прототипы;Программные прототипы
2
![Page 3: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/3.jpg)
Бумажные прототипы
• Одним из самых простых и наименее формальных методов быстрого выяснения достоверного мнения пользователей является проверка на бумажных прототипах. Это могут быть схемы сайта, начерченные на бумаге вручную, или макеты страниц, собранные из распечатанных элементов;
• Модели позволяют выявить и устранить некоторые недостатки в самом начале, не внося их в практические разработки. Изменения в бумажных прототипах можно сделать быстро - даже во время испытания, - и разработчики смогут сразу отреагировать на выявленные недостатки
3
![Page 4: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/4.jpg)
Пример: работа с прототипом
4
![Page 5: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/5.jpg)
Библиотеки элементов для бумажных прототипов
• Инструментальные средства для моделирования на бумаге можно бесплатно загрузить на
http://www.infodesign.com.au/usabilityresources/design/paperprototypinggraphics.asp
5
![Page 6: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/6.jpg)
Программные прототипы
• В некоторых случаях возможна замена бумажных прототипов программными. Они также позволяют проводить проверку юзабилити до начала работ, связанных с программированием и оформлением;
• Одним из популярных инструментов является Denim, разработанный в Калифорнийском университете
6
![Page 7: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/7.jpg)
Denim
7
![Page 8: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/8.jpg)
Создание цветовых палитр;Цветовые схемы;
Инструментарий для создания цветовых палитр
8
![Page 9: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/9.jpg)
Создание цветовых палитр
• После того, как выбран главный цвет для сайта, необходимо найти палитру остальных цветов.
• Сделать это можно разными способами, одним из них является использование специального инструментария.
• Существует множество инструментов для подбора палитры, как платных, так и бесплатных. Основные приемы построения гармоничных цветовых схем для сайтов иллюстрируются с помощью программы Color Scheme Generator 2.
9
![Page 10: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/10.jpg)
Color Scheme Generator http://paletton.com/
10
![Page 11: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/11.jpg)
Цветовые схемы:Монохроматические,
Аналоговые и Комплиментарные гармонии
11
![Page 12: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/12.jpg)
Монохроматические гармонии
• Монохроматичный набор цветов использует один цвет и все его оттенки и вариации.
• Такие схемы, использующиеся в тонированных фотографиях, иногда применяются для оформления сайтов.
• При правильном использовании, эта схема может придать Web-сайту аккуратный, чистый вид. Однако, как правило, такой вариант выглядит довольно скучно и его разбавляют дополнительным цветом (цветами).
12
![Page 13: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/13.jpg)
Пример
Сайт "Корпорация НЕДВИЖИМОСТЬ" использует монохроматическую гармонию из оттенков синего цвета разной насыщенности.Дополненный слабый оливковый цвет только подчеркивает выбранную тональность.
13
![Page 14: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/14.jpg)
Пример
Rational Software использует гармонию, близкую к монохроматической, из оттенков синего цвета разной насыщенности, слегка примешивая сине-зеленые элементы.
14
![Page 15: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/15.jpg)
Аналоговые гармонии• Аналоговые гармонии
базируются на цветах, расположенных поблизости друг от друга на цветовом круге.
15
![Page 16: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/16.jpg)
ПримерСайт www.voiceyourself.com использует аналоговую гармонию из желтого, оранжевого и зеленого цветов.
16
![Page 17: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/17.jpg)
Пример
Сайт officialblue.com использует аналоговую гармонию из синего, бирюзового и фиолетового цветов.
17
![Page 18: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/18.jpg)
Комплиментарные гармонии
• Комплиментарные цветовые схемы построены на цветах, располагающихся друг напротив друга на цветовом колесе. Эти цвета являются негативами друг для друга или полными противоположностями. Они называются комплиментарными/дополняющими потому, что будучи помещенными рядом, они делают друг друга ярче и живее.
• По этой причине сочетания этих цветов всегда выглядят гораздо ярче и интенсивнее, чем цвета, расположенные ближе друг к другу.
• В связи с этим пользоваться такими схемами надо чрезвычайно осторожно.
18
![Page 19: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/19.jpg)
Пример неудачного сочетания
комплиментарных цветов.
19
![Page 20: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/20.jpg)
Другой пример неудачного сочетания
комплиментарных цветов.
20
![Page 21: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/21.jpg)
Пример
На данном сайте противоположные красный и зеленый имеют очень низкую яркость и пониженную насыщенность. Благодаря этому сочетание цветов становится гармоничным и перестает быть опасным.
21
![Page 22: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/22.jpg)
Триадная схема
• Самый простой способ подбора цветов в цветовом круге - представить себе над кругом равнобедренный треугольник. Цвета, которые окажутся под вершинами - потенциальные кандидаты на использование.
• Этот тип подбора цветов называется триадной схемой, эти цвета, работая вместе образуют гармоничную комбинацию цветов.
22
![Page 23: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/23.jpg)
Пример
На сайте Puzzle Pirates используется триадная схема, состоящая из красного, синего и желтого цветов.
23
![Page 24: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/24.jpg)
ПримерОкна Роста
В одном из дизайнов сайта “Окна Роста” использовалась триадная схема из красного, голубого и желтого цветов.
24
![Page 25: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/25.jpg)
Пример
Сайт idanalytics.com использует триадную схему, состоящую из красно-оранжевого, желто-зеленого и сине-фиолетовых цветов темных оттенков и слабой насыщенности.
25
![Page 26: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/26.jpg)
Схема тетрада• Схема тетрада, это схема, когда берутся
четыре цвета, которые расположены прямо напротив друг друга. Таким образом выбираются 1 первичный, 1 вторичный и два третичных цвета.
• Подобная гамма дает очень насыщенные цветовые композиции.
26
![Page 27: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/27.jpg)
Примерwww.ecolution.com
• На сайте www.ecolution.com можно обнаружить тетраду из четырех базовых цветов, с разной яркостью и насыщенностью.
27
![Page 28: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/28.jpg)
Примерwww.pbs.org/wnet/nature/goodall
• На странице “Jane Goodall” можно обнаружить цвета тетрады.
28
![Page 29: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/29.jpg)
Расщепленный комплемент
• Расщепленный комплемент (split complement), это когда берется цвет, его комплиментарный цвет и два прилегающих к нему цвета.
• В данном случае цвет хорошо выделяется на фоне гармонирующих с комплементарным цветов.
29
![Page 30: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/30.jpg)
Примерwww.avt-service.ru
Синий и зеленый, гармонируя друг с другом, хорошо оттеняют на своем фоне красно-коричневый.
30
![Page 31: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/31.jpg)
Пример
Синий и зеленый, так же выделяют на своем фоне красно-коричневый, при этом у фоновых цветов слабая насыщенность, а у красного низкая яркость.
31
![Page 32: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/32.jpg)
Разделенная тетрада (Split Tetrad)
• Две пары комплементарных цветов называют разделенной тетрадой или двойным комплементом.
• Сайтов, использующих такие схемы цветов не очень много, поскольку остается опасность плохого сочетания этих цветов.
32
![Page 33: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/33.jpg)
Пример
На сайте hotfootmail.com используются цвета разделенной тетрады. Синий подчеркивает красный, а зеленый — оранжевый. Однако, данная схема не способствует простому восприятию содержания.
33
![Page 34: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/34.jpg)
Инструментарий для создания цветовых палитр
34
![Page 35: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/35.jpg)
Adobe Kulerhttps://color.adobe.com/create/color-wheel/
35
![Page 36: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/36.jpg)
Color Blenderhttp://www.meyerweb.com/eric/tools/color-blend• Строит палитру от двух
до десяти цветов, располагающихся между двумя основными цветами.
• Особенно удачными получаются палитры из аналоговых и монохроматичных цветов.
• Может быть полезна для выбора цветов для вспомогательных элементов, например, таблиц и форм.
36
![Page 37: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/37.jpg)
Пример:Таблицы, оформленные монохроматическими
цветами
37
![Page 38: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/38.jpg)
Color Schemer Studiohttp://www.colorschemer.com
Инструмент с большим количеством возможностей.38
![Page 39: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/39.jpg)
Color Schemer Studiohttp://www.colorschemer.com
Позволяет выбирать разные цветовые схемы.39
![Page 40: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/40.jpg)
Color Schemer Studiohttp://www.colorschemer.com
Имеет некоторые возможности предварительного просмотра.
40
![Page 47: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/47.jpg)
Получение палитры из изображения
• В некоторых случаях цветовую палитру можно получить из изображения, путем обобщения используемых цветов. Особенно хорошо этот способ работает, когда цвета получают из фотографий, поскольку на них предметы имеют цвета, привычные для нашего повседневного восприятия.
• Этот способ будет отлично работать, если известна иллюстрация, которая будет использоваться на странице.
47
![Page 48: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/48.jpg)
Получение палитры из изображения с помощью Adobe
Photoshop• Для начала необходимо
найти изображение, гамма которого подходит к будущему сайту.
• Применить к нему FILTER—> CRYSTALLIZE, количество цветов уменьшится.
48
![Page 49: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/49.jpg)
Получение палитры из изображения с помощью Adobe
Photoshop (2)Щелкая инструментом пипетка в понравившиеся цвета, каждый цвет добавляется в палитру Swatches.
49
![Page 50: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/50.jpg)
Color Schemer Studio сам умеет извлекать палитры из
изображения
50
![Page 51: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/51.jpg)
Color Schemer Studio сам умеет извлекать палитры из изображения (2)
51
![Page 52: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/52.jpg)
Задание на дом
• На основании выбранных основных цветов разработать одну или несколько палитр для сайта;
• Использовать методы и инструментарий, рассмотренные на лекции;
• Процесс задокументировать:1. Если выбрана цветовая схема — объяснить,
почему;
2. Если схема строится на основе изображения, обосновать выбор и показать исходник;
• Результат опубликовать.52
![Page 53: 08. web design](https://reader036.vdocuments.site/reader036/viewer/2022062708/558a4788d8b42a9a368b462e/html5/thumbnails/53.jpg)
Задание на дом
• На основе каркасных сеток, схем организации, карт сайта и рекомендаций сегодняшнего занятия разработать простейший визуальный дизайн сайта.
• Не использовать HTML (это должно быть изображение).• Написать важные тексты (навигация, ссылки), неважные и/или
большие тексты заменить Loren ipsum или подходящим по смыслу текстом.
• Использовать Photoshop, Fireworks или любой другой графический редактор.
• Использовать цвета для интерфейса, навигации и текстов, использовать подходящие изображения.
• Результаты в формате JPEG выложить в блоге.
53