17
Стажировка-2015. Дизайнеры. Занятие 4.5 цвет в web-дизайне

Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

  • Upload
    7bits

  • View
    91

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015. Дизайнеры. Занятие 4.5

цвет в web-дизайне

Page 2: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цветовая гамма

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

Page 3: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

триада (тройная гармония, треугольник)

Триада — основная и самая сбалансированная система из трёх цветов. В ней используется резонанс и дополнение цветов, но нет сложного контраста, из-за чего триада является самой надёжной гаммой.

Page 4: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

двойная комплиментарная система

Эту гамму труднее воплотить, но она может оказаться выгодным решением. Используется четыре цвета: два контрастных и два дополнительных.

Page 5: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

аналоги (последовательная система)

Гамма аналогичных цветов использует в основном дополняющие друг друга оттенки. Это позволяет особенно ярко подчеркнуть какие-то качества и вызвать определённые эмоции.

Page 6: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

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

Красный: власть, важность, молодость

Page 7: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

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

Оранжевый: дружелюбие, энергия, уникальность.

Page 8: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

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

Желтый: счастье, энтузиазм, архаичность (более тёмные тона).

Page 9: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

Создаёт очень сбалансированную и стабильную атмосферу. Более тёмные оттенки зелёного создают впечатление богатства и изобилия

Зеленый: рост, стабильность, темы финансов, темы окружающей среды.

Page 10: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

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

Синий: покойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).

Page 11: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

Фиолетовый цвет исторически ассоциируется с королевским величием, намекает на роскошь. Пурпурные оттенки отражают щедрость и богатство в целом. Более светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными.

Фиолетовый: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).

Page 12: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля

Черный: власть, изысканность, нервозность.

Page 13: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

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

Белый: чистота, простота, добродетель.

Page 14: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

Часто используется профессиональными дизайнерами. Всё дело в оттенках: чередуя их, можно получить все эмоции, вызываемые как чёрным цветом, так и белым. Серый — это мощный инструмент в умелых руках.Отличный нейтральный фон для фото.

Серый: нейтральность, формальность, меланхолия.

Page 15: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

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

Бежевый: передаёт характер остальных цветов.

Page 16: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

Цвет и эмоЦии

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

Цвет слоновой кости: комфорт, элегантность, простота.

Page 17: Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

Стажировка-2015

инструменты-помощники

Adobe Color CC (Kuler) color.adobe.com/ru/create/color-wheel/

0 to 255 - www.0to255.com

Flat UI Color Picker - www.flatuicolorpicker.com

Цветовые палитры для Matherial Design www.google.com/design/spec/style/color.html