Цветовые решения в дизайне сайта: Часть 1

Цветовые решения в дизайне сайта 

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

Немного цифр для важности:

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

Значение цветов

Каждый цвет равен определенной эмоции. Он по-разному воздействует на пользователя, вызывает определенные ассоциации и реакцию. Причем степень восприятия будет зависеть и от таких показателей, как насыщенность, тон и светосила. 
Рассмотрим значения основных цветов.

Красный

Один из самых сильных цветов, означает означает власть, страсть, опасность, привлекает внимание, заряжает энергией.


Синий

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

Желтый

Энергичный цвет, но не такой агрессивный, как красный. Ассоциируется с оптимизмом, энергией, счастьем.


Оранжевый

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

Зеленый

Подчеркивает атмосферу стабильности, спокойствия, уюта и роста, натуральность продукта.

Черный

Символ роскоши, силы, опытности, элегантности, используется для товаров класса люкс.


Фиолетовый

Роскошь, мистика, тайна и романтика.

Серый

Дает нейтральность, спокойствие, подчеркивает аккуратность и сдержанность.

Белый

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


Грамотный подбор цветов - один из эффективных способов взаимодействия с ЦА. Он должен учитывать специфику продукта и помогать при формировании правильного впечатления о компании с первых секунд. 

Использование цветового круга

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


Цвета, расположенные на разных сторонах круга, называются противоположными, а рядом друг с другом – дополнительными. Именно сочетания дополнительных и противоположных цветов чаще всего используются при разработке дизайна. 
Круг спроектирован таким образом, что позволяет правильно согласовывать цвета между собой, используя различные способы. Они называются цветовыми схемами. 
Существуют различные виды схем:

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


  • Монохромное сочетание. Схема предполагает использование одного тона разной насыщенности. 


  • Треугольная схема или триада. Использование цветов, равноудаленных друг от друга в цветовом кругу, позволяет создать яркую и красочную картинку.


  • Комплементарная схема. Она основана на использовании противоположных тонов цветового круга, один из которых должен доминировать. С помощью нее можно добиться высокого контраста и сочного изображения. 


  • Тетрада или прямоугольная схема. Здесь совмещается четыре цвета или две пары противоположных цветов. Она отлично подходит для создания ярких и красочных веб-страниц.

Подборка цветовой палитры вручную занятие неблагодарное и ненужное. Сегодня существуют десятки и сотни современных инструментов для создания стиля любого проекта. Среди самых популярных - coolors.co с простым и понятным интерфейсом, ресурсы-каталоги идей - color.romanuke.com и dribbble.com

Наш выбор - color.adobe.com. Он позволяет работать со всеми цветовыми схемами и кругом, подбирая гармоничные комбинации для любых сайтов. 

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

Цветовые решения в дизайне сайта: Часть 2

Читать далее