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

Что такое цветовой круг

В 1666 году Исаак Ньютон изобрел цветовой круг. Английский физик с помощью трехгранной призмы разложил белый цвет на спектр оттенков. Их переходы от одного к другому Ньютон представил в виде круга. Это изобретение используется и сегодня, в том числе дизайнерами. В начале XX века Иоганнес Иттен развил идею Ньютона. Швейцарский художник расширил количество цветов в круге с 8 до 12. На этом эволюция системы Ньютона не закончилась. Позже каждый из 12 цветов разделили на четыре оттенка, которые различаются интенсивностью.

Цвет в оформлении сайтов

Разберемся, на что ориентируются веб-дизайнеры.

Круг Ньютона-Иттена

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

Психология цвета

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

Тренды

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

Сфера деятельности компании

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

Семь цветов для увеличения объема продаж

Иногда достаточно поменять цвет всего одного элемента, чтобы повысить конверсию. Вот конкретные цифры:

1. Компания фонд Extra Storage Space вместо голубых элементов целевого действия стала использовать оранжевые — количество онлайн-заказов выросло на 7,8%.

2. Красная кнопка на сайте разработчиков HubSpot оказалась на 21% эффективнее зеленой по результатам 2000 посещений ресурса.

3. Компания Beata изменила цвет ссылок с голубого на красный, в результате чего количество кликов увеличилось на 53,13%.

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

Красный

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

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

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

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

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

Черный

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

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

Для оформления конверсионных элементов черный используется редко.

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

Нет: при продаже продукции для детей черный практически не используется.

Синий

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

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

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

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

Зеленый

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

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

Нет: для зеленого нет ограничений — он вписывается в любую тематику.

Фиолетовый

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

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

Нет: фиолетовый «противопоказан» автомобильной промышленности, сферам медицины и общепита. У мужчин он может вызывать раздражение.

Оранжевый

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

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

Нет: цвет не используется в консервативных сферах, например, в финансах или страховании.

Желтый

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

Да: желтый подходит для продажи детских товаров или пищевых продуктов, сайтов учреждений для детей, развлекательных площадок.

Нет: в сфере финансов, страхования и медицины желтый выглядит слишком легкомысленным.

Как подбирать цветовые сочетания

Разберем основные схемы колористики.

Контраст

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

Дополнение

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

Триада

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

Двойная комплементарная система

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

Раздельный выбор

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

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

Даже опытному дизайнеру иногда требуется помощь. Вот три сервиса для удобной работы с оттенками.

ColorScheme.ru

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

Paletton

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

Palettegenerator

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

Советы от по выбору цветов для веб-дизайна

Специалисты по оформлению сайтов рекомендуют:

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

2. Учитывайте гендерные особенности целевой аудитории. Мужчины и женщины по-разному воспринимают цвета. Ориентируйтесь на преобладающую ЦА.

3. Помните о возрасте аудитории. Когда человек становится старше, его восприятие цветовой палитры меняется. Изучите свою ЦА, чтобы понять, люди какого возраста принесут вашей компании максимальную прибыль.

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

5. Сделайте фон нейтральным. Не перегружайте сайт — посетитель не должен напрягаться. Нейтральный фон не отвлекает пользователя и помогает ему сосредоточиться на контенте.

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

7. Действуйте по правилу «60–30–10». Эта формула отражает оптимальное процентное соотношение цветов в дизайне сайта. Согласно правилу, 60% приходится на основной оттенок, 30% — на вспомогательный, 10% — на акцентный.

Еще раз о главном

Цвет имеет значение, в том числе при разработке дизайна сайта. Это доказывают результаты исследований.

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

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

Правило «60–30–10» помогает эффективно и гармонично распределять оттенки.

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