Цвет и его применение в дизайне интерфейсов Презентация

Цвет и его применение в дизайне интерфейсов Презентация компании www. firstlinesoftware. ru 2017

Двенадцатичастный круг И. Иттена Пары комплементарных (“дополнительных”) цветов Красный и зеленый Желтый и фиолетовый Оранжевый и синий Think Results.

Гармоничные сочетания *Вращать фигуры можно в любом направлении и получать гармоничные сочетания Think Results.

Светлота и насыщенность Степень светлоты: Желтый - 9 Оранжевый - 8 Красный - 6 Зеленый - 6 Синий - 4 Фиолетовый - 3 Think Results.

Количественные отношения цветов Гармоничные размеры плоскостей : Желтый - 3 Оранжевый - 4 Красный - 6 Зеленый - 6 Синий - 8 Фиолетовый - 9 Think Results.

Цветовое воздействие Think Results.

Цветовой шар Think Results.

А как же RGB? Think Results.

RGB модель Пара дополнительных цветов дает нейтрально-серый цвет. Пары комплементарных (контрастных) цветов модели RYB не совпадают с дополнительными цветами RGB. Think Results.

И что теперь с этим делать? Think Results.

HSB(V) модель Н - hue - тон S - saturation - насыщенность B - brightness - яркость Think Results.

Графическое представление в редакторах Более тёмные вариации цвета получаются путем уменьшения яркости и увеличения насыщенности. Более светлые вариации — путем увеличения яркости и уменьшения насыщенности. Think Results.

Создание гармоничного интерфейса Think Results.

1. Следовать визуальной иерархии Think Results.

2. Соблюдать контрастность Think Results.

Think Results.

■ Коэффициент контрастности не менее 4. 5: 1 ■ Для текста больше 18 pt и второстепенного не менее 3: 1 Для серого текста на белом фоне ■ Яркость серого цвета не более 46% ■ Для текста больше 18 pt не более 58% Не использовать цветной текст на цветном фоне Think Results.

Think Results.

3. Правило 60 -30 -10 при составлении простых цветовых схем (основной, дополнительный и акцентный цвета) Think Results.

Think Results.

4. Использовать ограниченный набор “естественных” цветов (3 -5) Не использовать: - чисто черный цвет - хроматические цвета в максимальной степени насыщенности и яркости Think Results.

https: //coolors. co Think Results.

Think Results.

Think Results.

Монохромная схема Think Results.

Аналоговая схема Think Results.

Комплементарная схема Think Results.

Триадная схема Think Results.

Think Results.

“Если ты в своем творчестве хочешь руководствоваться только правилами, то никогда ничего не достигнешь и в твоих произведениях будет царить путаница” Леонардо да Винчи Think Results.

Полезные ссылки и материалы Искусство цвета” Иоханнес Иттен “Об интерфейсе” Алан Купер Генераторы цветовых схем https: //coolors. co/ https: //color. adobe. com https: //www. sessions. edu/color-calculator Руководство по доступности контента на русском языке https: //www. w 3. org/Translations/WCAG 20 -ru/ https: //www. w 3. org/TR/WCAG 20 -TECHS/G 18. html Ресурсы проверки контрастности http: //contrast-finder. tanaguru. com https: //snook. ca/technical/colour_contrast/colour. html Для вдохновения https: //www. designspiration. net/ https: //dribbble. com/ Think Results.

Спасибо! www. firstlinesoftware. ru Think Results.