Апельсин
455
Блоги

Цвета, которые помогают продавать

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

Поделиться

В избранное

В избранном

Результаты исследования С. Сингх (Satyendra Singh) показывают, что покупатель всего за 90 секунд формирует мнение о продукте, причем 62-90% этого взаимодействия определяется только цветом.

Умение использовать цвета можно прокачивать до бесконечности. Это настоящая бездна возможностей для воздействия на человека.

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

Цветовая теория: основные принципы

Каждый видел в графической программе цветовой круг.

Немного истории: цветовой круг изобрел Исаак Ньютон. Обосновав теорию света и цветов в 1666г. Именно она легла в основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Ньютон при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.

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

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

Какой цвет больше подойдет для вашего бизнеса?

На основе нескольких исследований — анализа, опубликованного на сайте Vandelay Design, и поста о цветах в Smash Magazine — мы объясним, как цвета влияют на эмоции и помогают создавать UX-дизайн.

Красный и его оттенки

  • Основная его функция – побуждение к действию. Подойдет, если ваш сайт посвящен продаже товаров, которые обычно люди покупают импульсивно и спонтанно (это может аксессуары, обувь, одежда, косметика, товары для дома, еда), используйте его для элементов CTA : объявления о проведении акции, скидках, призыв оформить покупку. Оформление сайта в ярких цветах будет подталкивать пользователя к действию, но главное — не перестараться, чтобы кричащие цвета не отпугнули вашего клиента.
Яркие цвета одного оттенка правильно распределяют внимание
Красные оттенки, яркий желтый, розовый привлекают внимание к новой коллекции. Кроме того, бренд Milani Cosmetics не использует нелюбимые женщинами (согласно исследованиям) оранжевый, серый и коричневый цвета.
Красный от алого до бордового подчеркивает статус бренда

Синий

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

Синий цвет выражает доверие, порядок, вызывает чувство спокойствия, безмятежности. Поэтому синюю цветовую гамму выбирают для сайтов связанных с деньгами, личной информацией или юридическими документами. Обычно это страховые, финансовые организации, компании по продаже недвижимости или билетов. Самые очевидные примеры – сайты Booking, Ozon, Циан, Домофонд. Интерфейсы популярных соцсетей и мессенджеров также в этих оттенках — ВКонтакте, Телеграм, Твиттер, Фейсбук.

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

Черный

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

Достаточно открыть сайт Vertu:

louis vuitton и Dior:

Зеленый

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

В интернет-магазине роботов-пылесосов акцент сделан на чистоте и экологичности. Сочетание с белым цветом и темным деревом придает ощущение доступности и простоты:

Сочетание цветов

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

Маркетологи и дизайнеры Victoria’s Secret знают толк в правильных сочетаниях цветов: строгая черно-белая гамма с добавлениями нежного фиолетового и ярких розовых кнопок «призыва к действию».

Заключение

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

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

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

Call to Action

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

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

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

{ "author_name": "Апельсин ", "author_type": "self", "tags": [], "comments": 3, "likes": 5, "favorites": 21, "is_advertisement": false, "section_name": "blog", "id": "38948", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]