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

Реклама. Продолжение ниже
Ц вет и его применение в дизайне интерфейсов
Двенадцатичастный круг И. Иттена
Гармоничные сочетания
Светлота и насыщенность
Количественные отношения цветов
Цветовое воздействие
Цветовой шар
А как же 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

Изображение слайда
Изображение для работы со слайдом
1/2
2

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
3

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
4

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
5

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

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

Изображение слайда
Изображение для работы со слайдом
1/2
6

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

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

Изображение слайда
Изображение для работы со слайдом
1/2
7

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/4
Реклама. Продолжение ниже
8

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

Think Results. А как же RGB?

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
9

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
10

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
11

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
12

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
13

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

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

Изображение слайда
Изображение для работы со слайдом
1/2
14

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
Реклама. Продолжение ниже
15

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
16

Слайд 16

Think Results.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
17

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
18

Слайд 18

Think Results.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/4
19

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
20

Слайд 20

Think Results.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
21

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
22

Слайд 22

Think Results. https://coolors.co

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
23

Слайд 23

Think Results.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
24

Слайд 24

Think Results.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/6
25

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/4
26

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/5
27

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/5
28

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/5
29

Слайд 29

Think Results.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/5
30

Слайд 30

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

Изображение слайда
Изображение для работы со слайдом
1/2
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/ Полезные ссылки и материалы

Изображение слайда
Изображение для работы со слайдом
1/2
32

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

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

Изображение слайда
Изображение для работы со слайдом
1/2
Реклама. Продолжение ниже