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

Ц вет и его применение в дизайне интерфейсов Двенадцатичастный круг И. Иттена Гармоничные сочетания Светлота и насыщенность Количественные отношения цветов Цветовое воздействие Цветовой шар А как же RGB? RGB модель И что теперь с этим делать? HSB(V ) модель Графическое представление в редакторах Создание гармоничного интерфейса 1. Следовать визуальной иерархии 2. Соблюдать контрастность Ц вет и его применение в дизайне интерфейсов Для серого текста на белом фоне Ц вет и его применение в дизайне интерфейсов 3. Правило 60-30-10 Ц вет и его применение в дизайне интерфейсов 4. Использовать ограниченный набор “естественных” цветов (3-5) Ц вет и его применение в дизайне интерфейсов Ц вет и его применение в дизайне интерфейсов Ц вет и его применение в дизайне интерфейсов Монохромная схема Аналоговая схема Комплементарная схема Триадная схема Ц вет и его применение в дизайне интерфейсов Ц вет и его применение в дизайне интерфейсов Полезные ссылки и материалы Спасибо! www.firstlinesoftware. ru
1/32
Средняя оценка: 4.9/5 (всего оценок: 55)
Скачать (12410 Кб)
Код скопирован в буфер обмена
1

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

Презентация компании www.firstlinesoftware. ru 20 17

2

Слайд 2: Двенадцатичастный круг И. Иттена

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

3

Слайд 3: Гармоничные сочетания

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

4

Слайд 4: Светлота и насыщенность

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

5

Слайд 5: Количественные отношения цветов

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

6

Слайд 6: Цветовое воздействие

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

7

Слайд 7: Цветовой шар

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

8

Слайд 8: А как же RGB?

Think Results. А как же RGB?

9

Слайд 9: RGB модель

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

10

Слайд 10: И что теперь с этим делать?

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

11

Слайд 11: HSB(V ) модель

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

12

Слайд 12: Графическое представление в редакторах

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

13

Слайд 13: Создание гармоничного интерфейса

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

14

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

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

15

Слайд 15: 2. Соблюдать контрастность

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

16

Слайд 16

Think Results.

17

Слайд 17: Для серого текста на белом фоне

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

18

Слайд 18

Think Results.

19

Слайд 19: 3. Правило 60-30-10

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

20

Слайд 20

Think Results.

21

Слайд 21: 4. Использовать ограниченный набор “естественных” цветов (3-5)

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

22

Слайд 22

Think Results. https://coolors.co

23

Слайд 23

Think Results.

24

Слайд 24

Think Results.

25

Слайд 25: Монохромная схема

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

26

Слайд 26: Аналоговая схема

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

27

Слайд 27: Комплементарная схема

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

28

Слайд 28: Триадная схема

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

29

Слайд 29

Think Results.

30

Слайд 30

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

31

Слайд 31: Полезные ссылки и материалы

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

32

Последний слайд презентации: Ц вет и его применение в дизайне интерфейсов: Спасибо! www.firstlinesoftware. ru

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

Похожие презентации

Ничего не найдено