Психология цвета в веб-дизайне

Цвет на сайте так же важен, как и хороший копирайтинг, UX или типографика. Правильно подобранная палитра помогает заинтересовать посетителя, вызвать нужные эмоции и повлиять на конверсию. Согласно исследованию Seoul International Color Expo, 84,7% опрошенных считают цвет одним из значимых факторов, влияющих на решение о покупке. 

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

Основы теории цвета

Чтобы разобраться в том, как работает цвет на сайте, первым делом обратимся к истории. Она начинается с открытия цветового спектра, который был получен Исааком Ньютоном в 1880 году. Тогда он изучал свойства света и разложил при помощи стеклянной призмы белый свет на разные цвета – красный, синий и желтый. Таким образом появились основные цвета, а путем их сочетания получилось добиться дополнительных или, как их еще называют, вторичных цветов – зеленого, оранжевого и фиолетового. Смещение основного и двух вторичных позволило получить третичные цвета – сине-зеленый, красно-оранжевый, желто-зеленый, красно-фиолетовый, желто-оранжевый и сине-фиолетовый.

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

Такой цветовой круг принято разделять на 3 вида: 

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

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

• Триадная. Такая схема образует разносторонний треугольник, в котором используется 3 цвета, например зеленый, оранжевый и фиолетовый. На сайте это можно задействовать следующим образом: один цвет взять для фона, а остальные – для контента и акцентов.  

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

Свойства цвета

К основным свойствам цвета принято относить:

• Яркость. Один из ключевых параметров, от которого, в том числе, зависит успех сайта. С ним нужно быть аккуратным: яркие цвета могут как привлечь внимание, так и отпугнуть. Для примера посмотрите на изображение ниже – слева расположены цвета со 100% яркостью, справа – с 80%. Внимание к левому столбцу будет ниже, так как такие цвета сильно давят на глаза.

• Насыщенность. Еще одно важное свойство, которое отвечает за интенсивность тона. Если снизить насыщенность до 0, то цвет получится тусклым с серым оттенком. При добавлении насыщенности картинка становится яркой. 

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

Пример из шаблона «Продажа онлайн-курса» в Craftum

Если же сделать текст на белом фоне, например светло-серым, то это не будет контрастно, и читабельность снизится. Пользователям нужно будет вглядываться и тратить время на то, чтобы разобраться: «А что там написано? Какую информацию хотели до нас донести?».  

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

Другие классные сервисы для подбора палитр вы найдете в нашей статье «76 полезных ресурсов для дизайнера».

Еще больше упростить работу помогут готовые шаблоны сайтов от Craftum, где дизайнеры уже подобрали цветовую гамму, а значит, вам не придется думать над тем, как правильно распределить цвета по всей странице. Достаточно подобрать наиболее подходящий макет и изменить его содержимое. А если вы хотите использовать другую палитру, например созданную в Adobe Color, то добавить ее в конструктор можно в несколько кликов: просто зайдите в настройки блока и поменяйте цвет элемента.

Библиотека шаблонов в Craftum

Топ-8 цветов для вашего сайта

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

Красный

Яркий, кричащий, изящный, бросающийся в глаза и еще сотни других эпитетов – все они про красный цвет. Он способен привлечь внимание пользователя как никакой другой оттенок. Вспомните о таких брендах как Coca Cola, Ferrari, Cartier, Lego – в их палитре используется красный. И это не спонтанное решение, ведь такой цвет вызывает ассоциации с энергией, скоростью, силой и страстью.

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

Например, МТС использует свой фирменный красный цвет в кнопках, логотипе и иллюстрациях. 

Или вот еще один пример – здесь красный также играет роль акцентного цвета. 

Для какой ниши подойдет красный: 

• сфера питания – вызывает чувство голода;
• брендовая одежда – привлекает внимание;
• транспортная тематика – показывает «мощность» техники;
• продажа нижнего белья – олицетворяет страсть. 

Зеленый

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

Пример: 

И еще один сайт в зеленых тонах: обратите внимание, что в нем он используется для фонового изображения. Если красный лучше не применять для таких крупных объектов, то зеленый отлично вписывается и в таком контексте. Он нисколько не «режет» глаз, а напротив – успокаивает. 

Для какой ниши подойдет зеленый: 

• финансы – вызывает доверие;
• ЗОЖ – указывает на полезность продуктов;
• экология – ассоциируется с природой;
• туризм – транслирует ощущение легкости, релакса;
• медицина – отображает безопасность;
• клининг – олицетворяет чистоту. 

Синий

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

Посмотрите, как ветеринарная клиника нашла применение синему цвету в своем брендбуке: 

Или вот еще один пример – здесь синий также используется как акцентный цвет: 

Для какой ниши подойдет синий: 

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

Желтый

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

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

Для какой ниши подойдет желтый:

• товары для детей – вызывает радость, ассоциации с весельем и играми;
• логистика и такси – олицетворяет скорость;
• фастфуд – вызывает аппетит и намекает на быстроту приготовления;
• бизнес, отражающий энергию и динамику.

Черный

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

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

Для какой ниши подойдет черный:

• премиальные товары и бьюти-сфера – говорит об эксклюзивности;
• IT – указывает на современность компании;
• финансы – отражает надежность;
• продажа автомобилей или алкоголя – олицетворяет качество и премиальность.

Фиолетовый

Фиолетовый олицетворяет богатство и власть – именно такое значение он обрел задолго до появления сайтов и дизайна в целом. Около 1200 лет до нашей эры пурпурный краситель был очень редким и дорогим – его могли использовать лишь избранные. Сегодня фиолетовый мы можем встретить на сайтах с продукцией класса люкс. Также он снимает напряжение и создает ощущение легкости, поэтому его часто можно увидеть в сфере медицины. Помимо этого фиолетовый нередко используется и в IT, чтобы показать качество и современность. 

Пример сайта для платформы разработки с использованием фиолетового: 

А вот как на своем сайте использовал пурпурный цвет интернет-магазин last.wear – он обошелся лишь акцентами, что позволило передать роскошность и изящность этого цвета. 

Для какой ниши подойдет фиолетовый:

• медицина – вызывает чувство спокойствия;
• IT – указывает на современность и качество продукта;
• брендовая одежда и креативные проекты – ассоциируется с модой и творчеством;
• продукты питания – расслабляет и порождает желание приобрести продукты.

Оранжевый

Еще один цвет, который можно часто встретить на сайтах и дизайн-продуктах – это оранжевый. Яркий, но при это не такой «кричащий» как красный, а более сбалансированный. В психологии он указывает на творческое мышление, свободу, позитив и уверенность в себе. Часто ассоциируется с цитрусовыми фруктами и золотой осенью. Отличный пример использования оранжевого цвета можно увидеть в продукте компании Coca-Cola – Fanta.

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

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

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

Для какой ниши подойдет оранжевый:

• продукты питания – передает яркость вкусов;
• IT – говорит о технологичности компании;
• недвижимость – олицетворяет уют;
• сфера развлечений и детские товары – вызывает радость.  

Розовый

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

Если вы хотите показать что-то милое и нежное, то розовый также подойдет. Например, его можно встретить в интернет-магазине изделий ручной работы: 

Розовый цвет используем и мы сами. На нашем сайте он задействуется в качестве акцентов.

Для какой ниши подойдет розовый:

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

Заключение

Какой цвет подойдет моему бренду? Этот вопрос затрагивает всех владельцев бизнеса, особенно тех, кто только начинает свою деятельность. При выборе палитры старайтесь опираться как на значение цвета, так и посыл, который несет ваша компания. Например, на сайте детского сада ярко-желтый вызовет теплые и радостные эмоции, а на сайте медицинской клиники может выглядеть неуместно. Иногда правила нарушаются: например, красный может не только транслировать страсть, но и просто расставлять акценты в нужных местах. При всем этом следует поглядывать и на конкурентов: если кто-то из них «закрепил» цвет за собой, вы можете подобрать другую палитру и выделиться среди остальных.

После того, как вы выберете цвет, который подходит для вашей ниши, можно будет переходить к созданию сайта. Сделать это можно вместе с Craftum всего за 159 рублей в месяц. Регистрируйтесь и создавайте уникальные проекты!