Психология цветов в веб-дизайне: как выбрать цветовую палитру, чтобы повысить конверсию сайтов

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

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

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

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

Разбор самых популярных цветов в дизайне

1. Красный

Красный — продающий цвет, символ силы, энергии, страсти, срочности. Легко привлекает внимание и может вызывать сильные и мгновенные реакции. Так как цвет очень популярный, советуем делать цвет узнаваемым за счет экспериментов с оттенками красного. Из-за способности убеждать действовать “здесь и сейчас”, активно используется для оформления распродаж и сетей быстрого питания. Если нужна быстрая конверсия, используйте красный.

2. Зеленый

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

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

3. Синий

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

4. Розовый

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

5. Фиолетовый

Значение цвета достаточно широкое. Фиолетовый напоминает людям об уважении, престиже, изысканности, благородном королевском величии, элегантности. Выбирайте его, если у вас товар высокого класса и он должен вызывать чувство роскоши. Отлично подходит для изображения “благородной красивой старости” — то есть для повышения конверсии антивозрастных продуктов. При необходимости он может вызвать чувство загадочности, незаменимое для причудливых брендов.

6. Желтый

Первый цвет, который приходит в голову при словах “счастье”, “тепло”, “позитив”, “свет” — желтый. Желтый сайт — прекрасный способ зарядить людей чувством оптимизма, надежды, мотивации и ободрения. Иногда желтый непроизвольно подчеркивает доступность продукта и повышает конверсию продуктов с доступной ценой. Тем не менее, с желтым надо быть аккуратным: в больших количествах он, вместо улучшения настроения, может вызывать возбуждение и беспокойство.

7. Золото

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

8. Оранжевый

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

9. Черный

Если вы ищете цвет силы,  авторитета, стабильности и власти, выбирайте черный. 

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

10. Белый

Белый — незаменимый цвет для сайта услуг клининга и отрасли здравоохранения. Передает  чистоту и простоту, может использоваться как чистый холст с безграничными возможностями для творчества. Советуем использовать для повышения конверсии брендам, которые мотивируют клиентов создавать что-то свое. Белый часто встречается в дизайне минималистского бренда, в сочетании с контрастными цветами. Однако тут стоит внимательно отнестись к аудитории вашего бренда. В Китае, Японии и других странах Дальнего Востока белый ассоциируется не с доверием, мягкостью и благородством, а с трауром.

11. Серый

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

12. Коричневый

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

13. Серебро

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

14. Радуга

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

Более детально попрактиковаться в подборе цветов и изучить значение цвета в повышении конверсии вы можете на курсе “Web-дизайнер с 0”. Вы получите структурированное знание, тотальную практику и опыт лучших спикеров в своем направлении.

Быстрый чек-лист цветов для сайта по отраслям

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

Интересные социально-демографические особенности восприятия цветов

1. Маленькие дети обычно предпочитают яркие цвета для сайта: синий, желтый, оранжевый, зеленый и фиолетовый, красный, а также, как ни странно, они предпочитают блоки цветов вместо ярких узоров.
2. Любимые цвета мужчин — синий (57%), зеленый (14%), черный (9%) и красный (7%). Менее 5% мужчин заявили, что их любимым цветом был оранжевый, желтый, коричневый, серый или белый, и 0% мужчин назвали фиолетовый своим любимым цветом. Любимые цвета женщин — синий (35%), фиолетовый (23%), зеленый (14%), красный (9%) и черный (6%). Менее 5% женщин заявили, что их любимым цветом является оранжевый, желтый, коричневый, серый или белый. Используйте эти знания, чтобы повысить конверсию.
3. Подростки предпочитают черный цвет и более сложные цветовые комбинации.
4. Взрослые обычно отдают предпочтение приглушенным цветам, а их цветовые предпочтения, как правило, стабильны.
5. Люди старше 65 лет, как правило, не любят желтый цвет и предпочитают синий, розовый и зеленый.  Психология цвета в дизайне гласит, что более высокую конверсию получат спокойные оттенки, а не яркие и стимулирующие. Что интересно: любовь к фиолетовому прямо пропорциональна возрасту женщин.
6. Люди из рабочего класса, как правило, предпочитают более яркие оттенки основных и второстепенных цветов. А вот более состоятельные люди склонны к более сложным цветовым комбинациям. Они зачастую предпочитают третичные цвета с различными оттенками.
7. Чем выше образование у человека, тем  больше шансов, что он будет выбирать более сложные цветовые сочетания. Хорошо образованные люди, как правило, предпочитают третичные цвета, в то время как менее образованные люди предпочитают первичные и вторичные цвета.
8. Люди, как правило, предпочитают цвета, которые отражают цветовую палитру их климата. Люди, живущие в тропическом климате, лучше реагируют на яркие, теплые цвета, в то время как люди, живущие в более холодных климатах, предпочитают более приглушенные цвета.

Самые универсальные цвета в веб-дизайне

Приблизительно 8% мужчин и 0,5% женщин страдают различными формами дальтонизма. Чтобы они могли читать текст на цветном фоне, важно использование цветов с высоким значением контраста. Чем универсальнее бренд, тем более важно учитывать специфику зрения потребителей для повышения конверсии.

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

Просто имейте этот факт в виду, когда будете провоцировать конверсию.

Как комбинировать цвета в дизайне?

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

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

Монохроматический — используются оттенки или оттенки одного цвета.

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

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

Сплит-комплементарность — как и комплементарность, в которой используется противоположный цвет, в этой палитре используются два противоположных цвета.

Триадный — создается из трех цветов, равномерно распределенных по цветовому кругу. 

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

4 ошибки в выборе цветов, которые следует избегать

1.  Не используйте чистый черный (#000000)

Чистый черный визуально часто выглядит слишком подавляющим. На самом деле ничто никогда не бывает на 100% черным: ни волосы, ни уголь, ни смарт-телевизор. Bootstrap и Foundation, пользовательский интерфейс Photoshop, клавиши на вашем MacBook не полностью черные.  Психология цвета в дизайне советует добавить немного мягкого цвета в наш черный цвет: даже что-то вроде # 111111 будет гораздо больше подходить для глаз. 

2. Красный и зеленый никогда не должны быть видны

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

3. Неоновые цвета

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

4. Яркие цвета с более яркими цветами

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

Инструменты, которые помогут вам выбрать правильные цвета

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

• Adobe Color CC — надежный помощник пользователей Adobe.
• Paletton — простая палитра цветов для начинающих.
• Flat UI Color Picker — идеален для создания красочных плоских дизайнов.
• Mudcube Color Sphere — предлагает выбор тем и предоставляет HEX-числа.
• Check My Colors — используется для проверки комбинаций цветов переднего плана и фона, а также для того, чтобы он имел правильный контраст для использования людьми с дальтонизмом.

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

А может вы веб-дизайнер, который хочет прокачать свои скиллы? Или вы имеете 0 опыта в веб-дизайне, но вам очень нравится эта профессия и вы хотели бы развиваться в ней?

Тогда регистрируйтесь на курс “Web-дизайнер с 0” и перенимайте опыт лучших практиков рынка, которые помогут вам изучить психологию цвета в дизайне, освоить профессию и выйти на доход от 2000 долларов в месяц.