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

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

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

Цветовые круги

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

Профессиональный графический дизайнер выбирает цветовую гамму не просто по интуиции, используются специальные методы подбора 2-3-4 оттенков, которые гармонично сочетаются между собой. Используются цветосхематические модели – круги Ньютона, Иттена, Гете, Шевреля.

Цветовые круги

Что такое круг Ньютона?

Первую цветовую модель разработал Исаак Ньютон в 1666 году. Ученый с помощью стеклянной призмы разложил белый свет на 7 цветов спектра, доказал его сложность и наличие оптических искажений (хроматических аберраций). Ньютон разложил сложный белый свет на красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый цвет. Проводя опыты, он увидел непрерывность и замкнутость цветового круга, а также появление новых (пурпурных) оттенков при смешении основных спектральных цветов. Смешивание цветов, которые не близки по спектру, дает менее насыщенный оттенок.

Основной принцип использования цветовых кругов состоит в выбор цветов по такой схеме:

  • Чтобы выбрать 2 цвета, используется прямой радиус, подбираются 2 спектральных или пурпурных цвета (для более сложных цветовых моделей), расположенных друг напротив друга.
  • Если нужно выбрать 3 цвета, рисуется равносторонний треугольник, и отбираются оттенки, которые находятся на вершинах этого треугольника.
  • При подборе 4 цветов рисуется квадрат, который захватывает 2 пары оттенков друг напротив друга.

Цветовой круг Ньютона

Цветовая теория и зависимость между цветом и эмоциями

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

Как цвет сайта влияет на восприятие бренда?

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

Например, если в средствах массовой информации упоминается Кока-Кола, многим людям в голову сразу приходит ярко-красный цвет фона, на котором написаны белые буквы бренда. При разговоре о социальной сети Фейсбук пользователи с визуальным восприятием представляют сочетание темно-синего и белого цветов, в которых оформлен интерфейс Facebook. То есть, если начинать думать о каком-то известном бренде, невольно осуществляется ассоциация с его фирменной цветовой гаммой.

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

Чем отличается мужское и женское восприятие цвета

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

Особенности восприятия цветов мужчинами и женщинами, которые нужно учитывать при подборе корпоративных оттенков:

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

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

Как использовать эту информацию коммерческой компании?

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

Если товар разработан для мужчин, хорошо будут работать насыщенный синий, зеленый, черный. Для женской аудитории подходит ярко-синий, ярко-зеленый, смешанные зеленые и синие оттенки, светлый и яркий фиолетовый, розовый, золотой.

Какой цвет использовать в зависимости от рода деятельности компании?

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

Учитывая специфику бизнеса и основного продукта, подбирайте соответствующие цвета:

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

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

Правила выбора и примеры сайтов

Если использовать красный цвет в разных вариациях (темный, яркий), таким образом, можно вызвать у потенциального потребителя страсть и желание, показать энергию и мощь продукта. Наиболее яркий пример – сайт Кока-Колы.

Сайт Кока-Колы

Желтый ассоциируется с теплотой, дружелюбностью. Компания Макдональдс выбрала этот цвет основным, т.к. пропагандируется семейные ценности, дружбу и радость. Кроме того, желтый цвет отлично ассоциируется с картошкой и бургерами – основными продуктами компании.

Сайт компании Макдоналдс

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

Сайт ВТБ банка

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

Сайт банка ПАО Сбербанк

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

Сайт компании Jeep

Главный и дополнительный цвета в оформлении сайта

При разработке онлайн ресурса нужно выбрать основной (главный) цвет и 1-2 оттенка, которые будут дополнять палитру дизайнерского оформления. Вначале нужно подобрать один цвет, в зависимости от сферы деятельности, продукта и предпочтений целевой аудитории. После этого, используя круг Ньютона или другой похожий инструмент, нужно подобрать еще 1-2-3 оттенка. Цветовая схема выбирается по принципу – 2 противоположные цвета, 3 цвета по треугольнику, 4 цвета – по прямоугольнику, которые накладываются на цветовой круг.

Есть основные цвета – красный, желтый, голубой. На основании этих красок получают другие оттенки. Главные составные цвета – оранжевый, зеленый, фиолетовый. Смешивая основные и смешанные цвета, получают третичные оттенки, которых может быть бесконечное множество. В зависимости от расположения относительно другого цвета оттенки могут быть аналогичными (расположены рядом) или контрастными (расположены в другом цветовом спектре).

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

  • Горизонтальное меню сайта (фон или кнопки)
  • Логотип, торговая марка или название компании в верхней части (шапке) сайта.
  • Заголовки текстов, важные выделения в текстовых блоках.
  • Кнопки и формы заказов, регистраций и других целевых действий.

Акцентные цвета

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

Яркий дизайн сайтов для приложений iPhone7

Для подбора гармоничного акцентного цвета рекомендуется использовать полезные сервисы Adobe Color CC Tool и другие.

Вспомогательные цвета

Это 1-2 цвета (чаще всего, пастельные или смешанные неяркие оттенки), которые хорошо сочетаются с главным цветом и дополняют его. Важным моментом является то, что вспомогательный оттенок должен только подчеркивать и дополнять основной цвет, а не спорить с ним (иначе внимание пользователя будет постоянно переключаться на элементы оформления, которые не являются ключевыми). Вспомогательные цвета нужны для заливки фона, оформления диалоговых окон, дополнительных кнопок и подразделов, гиперссылок.

Вспомогательные цвета

Советы по выбору цвета

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

  1. Для оформлении ресурса (сайта, интернет-магазина, лендинга, портала) достаточно подобрать 3-4 цвета по цветовым кругам. Один из низ будет основным, другие – вспомогательными и акцентными. Не нужно также выбирать слишком минималистичный вариант – иначе сайт будет выглядеть скучно, и все элементы будут сливаться.
  2. Текстовые блоки нужно заливать черным, темно-синим или темно-зеленым цветом. Классический (наиболее привычный и комфортный) вариант – черный. Плохо читаются светлые цвета, особенно на пастельных и белых фонах. Достаточно сложно читать тексты, залитые белым или светлы цветом на черном или другом темном фоне (глаза быстро устают).
  3. Цвета и их использование зависит от вида и назначения ресурса. Например, информационные сайты, блоги, медиаресурсы зачастую оформляются в белых или нейтральных тонах – чтобы привлечь внимание пользователей именно к текстовому наполнению. А интернет-магазины, используют яркие изображения продукции, контрастные цвета для форм захвата, корзины и других элементов, мотивирующих к целевому действию. Компаниям по оказанию услуг с яркими портфолио тоже подойдет пастельный или белый цвет фона.

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Понравилась статья? Поделитесь ею в соцсетях!