Как выбрать цвет для своего сайта?

Выбор цветовой гаммы для сайта

Как выбрать цвет для своего сайта?                                    

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

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

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

Для того, чтобы выбрать цвет для своего сайта требуется знать, что:

Теорию цвета можно разделить на три части:

  1. Комплиментарные цвета

Контрастные оттенки, расположенные по разные стороны цветового круга.

Комплиментарные цвета

Рисунок 1 Цветовой круг. Комплиментарные цвета

  1. Аналоговые цвета

В отличие от комплиментарных, аналоговые (сходственные) цвета расположены рядом друг с другом на цветовом круге и напоминают монохроматическую схему.

Аналоговые цвета

Рисунок 2 Цветовой круг. Аналоговые цвета

  1. Теплые/холодные цвета

Оттенки цветов также делятся на теплые и холодные.

Теплые/холодные цвета

Рисунок 3 Цветовой круг. Теплые и холодные оттенки

Цвет и эмоции

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

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

Всем известно тесное взаимодействие цвета и эмоций. Каждый цвет вызывает резонанс — определённое настроение и эмоции.  Веб-дизайнеры стремятся использовать это влияние, чтобы создать нужную атмосферу для своего сайта. Важно помнить, что разные культуры по всему миру по-разному воспринимают цвета. В основном, теплые яркие оттенки (красный, оранжевый, желтый) наполняют человека энергией, возбуждают. Холодные темные оттенки (синий, зеленый, фиолетовый), наоборот, успокаивают и расслабляют.

 

Примеры эмоционального восприятия цвета:

  • Красный цвет для сайта

Ассоциации: власть, любовь, сила, страсть, предупреждение, тревога, ярость, агрессия, мощь, актуальность

Красный цвет для сайта

Рисунок 4 Сайт No Way NSA

  • Оранжевый цвет для сайта

Ассоциации: дружелюбие, энергия, уникальность, интерес, бодрость, движение, творчество, веселье, оживленность

Оранжевый цвет для сайта

Рисунок 5 Сайт Fanta

  • Жёлтый цвет для сайта

Ассоциации: счастье, оптимизм, энтузиазм, жизнерадостность, архаичность, любопытство, мудрость, искренность

Желтый цвет для сайта

Рисунок 6 Сайт Flash Media

  • Зелёный цвет для сайта

Ассоциации: мир, рост, стабильность, равновесие, процветание, гармония, финансы, экология, здоровье, природа

Зеленый цвет для сайта

Рисунок 7 Сайт Ameritrade 

  • Синий цвет для сайта

Ассоциации: спокойствие, комфорт, безопасность, открытость, надёжность, печаль, размышления, логика

Синий цвет для сайта

Рисунок 8 Сайт Van Vliet & Trap

  • Фиолетовый цвет для сайта

Ассоциации: величие, роскошь, богатство, романтика, мистика, тайна, подлинность, чувственность

Фиолетовый цвет для сайта

Рисунок 9 Сайт Cadbury 

  • Чёрный цвет для сайта

Ассоциации: власть, изысканность, достоинство, твердость, нейтральность, сила, зло, утонченность

Черный цвет для сайта

Рисунок 10 Сайт Dream + Reach

  • Белый цвет для сайта

Ассоциации: чистота, простота, добродетель, спокойствие, безмятежность, невинность, стерильность

Белый цвет для сайта

Рисунок 11 Сайт с работами Клоина Тошева 

  • Серый цвет для сайта

Ассоциации: нейтральность, формальность, стиль, меланхолия, грусть

Серый цвет для сайта

Рисунок 12 Сайт Awwwards

  • Коричневый цвет для сайта

Ассоциации: надежность, комфорт, элегантность, прочность,  простота, стабильность, традиционность

Коричневый цвет для сайта

Рисунок 13 Art in My Coffee

Цветовая гамма для сайта

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

Существует три базовых способа сочетать цвета:

  1. Триада (треугольник) для сочетания цветов на сайте

Триада — основная и самая сбалансированная система из трёх цветов, расположенных в 120 градусах друг от друга на цветовом круге. Является самой надежной гаммой, поскольку в ней используется резонанс и дополнение цветов, но отсутствует явный контраст. Итого, есть цвета для фона, контента и для панели навигации.

Сочетание цветов для сайта

Рисунок 14 Цветовой круг. Триада

  1. Двойная комплиментарная система для сочетания цветов на сайте

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

Сочетание цветов для сайта

Рисунок 15 Цветовой круг. Двойная комплиментарная система

Например, страница Florida Flourish, основана на такой схеме. Зеленый цвет растения контрастирует с красными блоками, а голубое небо на фоне и оранжевая пустыня дополняют палитру.

Как выбрать цвет для своего сайта

Рисунок 16 Сайт Florida Flourish

  1. Аналогичные цвета для сайта

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

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

Выбор цветов для сайта

Рисунок 17 Цветовой круг. Аналоги

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

Как выбрать цвет для сайта

Рисунок 18 Сайт Blinksale

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

Автор: Луиза Ханова