Цветовые решения в дизайне сайта
Цветовые решения для сайта - мощный инструмент, который нужно уметь грамотно использовать. Что входит в это понятие? Цветовая гамма, комбинации цветов, подбор цветовой схемы: все что способно активно влиять на пользователя и вызывать неосознанную или осознанную эмоциональную реакцию.
Немного цифр для важности:
- люди - “визуалы” и способны воспринимать около 1,5 млн оттенков;
- только 20 % цвета мы воспринимаем глазами, 80 % - нервной системой;
- для 85 % пользователей цвет является решающим фактором покупки;
- 80 % потребителей способны идентифицировать бренд компании по цвету.
Первое впечатление о сайте формируется у пользователя в первые 90 секунд, и оно во многом основано на цвете. Для наглядности рассмотрим особенности цветовых палитр, их влияние и использование цветов на примере реального дизайна сайтов.
Значение цветов
Каждый цвет равен определенной эмоции. Он по-разному воздействует на пользователя, вызывает определенные ассоциации и реакцию. Причем степень восприятия будет зависеть и от таких показателей, как насыщенность, тон и светосила.
Рассмотрим значения основных цветов.
Красный
Один из самых сильных цветов, означает означает власть, страсть, опасность, привлекает внимание, заряжает энергией.
Синий
Визуализирует спокойствие, открытость и безопасность. Создает ощущение комфорта, доверия и ассоциируется с профессионализмом.
Желтый
Энергичный цвет, но не такой агрессивный, как красный. Ассоциируется с оптимизмом, энергией, счастьем.
Оранжевый
Используется, чтобы подчеркнуть дружелюбность, творчество, молодость, ощущение движения. Наравне с красным и желтым вызывает прилив энергии.
Зеленый
Подчеркивает атмосферу стабильности, спокойствия, уюта и роста, натуральность продукта.
Черный
Символ роскоши, силы, опытности, элегантности, используется для товаров класса люкс.
Фиолетовый
Роскошь, мистика, тайна и романтика.
Серый
Дает нейтральность, спокойствие, подчеркивает аккуратность и сдержанность.
Белый
Выражает чистоту, легкость, невинность и простоту. Позволяет создавать минималистичные сайты и подчеркивает другие цвета.
Грамотный подбор цветов - один из эффективных способов взаимодействия с ЦА. Он должен учитывать специфику продукта и помогать при формировании правильного впечатления о компании с первых секунд.
Использование цветового круга
Превратить случайный выбор цветов в продуманное решение помогает использование теории цвета. Это практическое руководство, которое позволяет логично выбирать цветовые сочетания. Частью этой научной теории является использование цветового круга Итена. Он включает в себя три первичных цвета – синий, желтый и красный.
При их смешивании получаются вторичные оттенки, которые в свою очередь дают новые комбинации цветов при сочетании с основными. Общее количество цветов в круге достигает двенадцати. В жизни и в дизайне мы используем не только их, но и множество других оттенков, которые получаются при добавлении белого или черного.
Цвета, расположенные на разных сторонах круга, называются противоположными, а рядом друг с другом – дополнительными. Именно сочетания дополнительных и противоположных цветов чаще всего используются при разработке дизайна.
Круг спроектирован таким образом, что позволяет правильно согласовывать цвета между собой, используя различные способы. Они называются цветовыми схемами.
Существуют различные виды схем:
- Аналоговая схема. В ней сочетается от двух до пяти цветов, в идеале это три цвета, расположенных рядом друг с другом на цветовом круге. Это классическая схема, которая придает любой странице сдержанность и спокойствие.
- Монохромное сочетание. Схема предполагает использование одного тона разной насыщенности.
- Треугольная схема или триада. Использование цветов, равноудаленных друг от друга в цветовом кругу, позволяет создать яркую и красочную картинку.
- Комплементарная схема. Она основана на использовании противоположных тонов цветового круга, один из которых должен доминировать. С помощью нее можно добиться высокого контраста и сочного изображения.
- Тетрада или прямоугольная схема. Здесь совмещается четыре цвета или две пары противоположных цветов. Она отлично подходит для создания ярких и красочных веб-страниц.
Подборка цветовой палитры вручную занятие неблагодарное и ненужное. Сегодня существуют десятки и сотни современных инструментов для создания стиля любого проекта. Среди самых популярных - coolors.co с простым и понятным интерфейсом, ресурсы-каталоги идей - color.romanuke.com и dribbble.com .
Наш выбор - color.adobe.com. Он позволяет работать со всеми цветовыми схемами и кругом, подбирая гармоничные комбинации для любых сайтов.
Во второй части статьи мы рассмотрим особенности подачи цвета в веб-дизайне, покажем примеры использования цветовых схем на примере реальных сайтов.