Чтобы сайт приносил прибыль, нужно продумать каждую деталь, в том числе цветовое оформление. Казалось бы, от оттенка кнопки «Купить» или фона страницы ничего не зависит. Однако это не так. Результаты исследований доказывают, что у пользователя всего за 90 секунд складывается впечатление о сайте, компании и ее продукте. Из этих 1,5 минут 62% времени приходится на восприятие цветового оформления. В целом визуальная составляющая имеет значение для 93% пользователей.
Рассказываем, как цвет влияет на продажи и какие правила колористики следует применять в зависимости от специфики компании.
Разберемся, на что ориентируются веб-дизайнеры.
Эта цветовая система давно стала классикой. Многие дизайнеры предпочитают использовать в работе круг Ньютона-Иттена, с помощью которого удобно подбирать гармоничные оттенки.
Эмоциональная составляющая и смысловая нагрузка цвета зависят от культуры конкретной страны. Например, в европейской белый символизирует чистоту и нежность, а в восточной — ассоциируется с печалью и неудачами. Такие нюансы нужно учитывать при оформлении сайта.
Задача каждого веб-дизайнера — внимательно отслеживать тенденции. Тренды постоянно сменяют друг друга: сегодня в моде сложные оттенки, завтра — чистые цвета, послезавтра — градиент с плавными переходами и т. д.
Для разных направлений бизнеса используются традиционные цветовые решения. С их помощью компании воздействуют на эмоции целевой аудитории. Например, со сферой финансов связаны спокойные оттенки, которые символизируют стабильность, например, сдержанный синий. Автомобильная промышленность ассоциируется с красным и черным. Производители пищевых продуктов любят экологичный зеленый. При создании сайта компании дизайнер должен учитывать, какое цветовое решение подходит для ее сферы деятельности.
Иногда достаточно поменять цвет всего одного элемента, чтобы повысить конверсию. Вот конкретные цифры:
Компания фонд Extra Storage Space вместо голубых элементов целевого действия стала использовать оранжевые — количество онлайн-заказов выросло на 7,8%.
Красная кнопка на сайте разработчиков HubSpot оказалась на 21% эффективнее зеленой по результатам 2000 посещений ресурса.
Компания Beata изменила цвет ссылок с голубого на красный, в результате чего количество кликов увеличилось на 53,13%.
Теперь расскажем о том, как тот или иной цвет влияет на восприятие сайта целевой аудиторией и какой смысл он в себе несет.
Сотрудники Даремского университета провели исследование, результаты которого показали, что красная спортивная форма помогает побеждать в соревнованиях. Этот цвет ассоциируется с силой, скоростью, приливом адреналина, т. е. в прямом смысле возносит спортсменов на пьедестал. В веб-дизайне красный помогает привлечь внимание клиента и мотивировать его совершить целевое действие.
Кроме того, красный символизирует любовь. Этим активно пользуются продавцы подарков ко Дню святого Валентина. В целом красный в маркетинге давно стал инструментом, который на подсознательном уровне пробуждает в покупателе симпатию к продукции того или иного бренда.
С помощью красного веб-дизайнеры чаще всего оформляют элементы целевого действия либо привлекают внимание пользователей к информации об акциях и скидках.
Да: красный подходит для продажи любых товаров, особенно тех, которые люди покупают импульсивно. Он очень популярен в бьюти- и фешн-индустрии. Также красный часто используют банки, особенно в те периоды, когда они активно завоевывают рынок.
Нет: для консервативных сфер, например, бухгалтерии или юриспруденции красный не подходит.
Этот цвет принадлежит лакшери-сегменту. Он также часто используется в электронной коммерции. Здесь работает правило: чем больше черного на сайте, тем на более платежеспособных клиентов рассчитаны товары или услуги. При работе с этим цветом дизайнеры часто применяют «выворотку». Так называется прием, когда на темном фоне размещается светлый шрифт.
Черный соответствует предпочтениям мужчин, которые любят окружать себя статусными вещами. Этот нюанс тоже учитывается дизайнерами.
Для оформления конверсионных элементов черный используется редко.
Подпишитесь на нас в Telegram
Получайте свежие статьи об интернет-маркетинге и актуальные новости о наших готовых решениях
Да: черный подходит для продвижения товаров из люксовых ниш, например, ювелирных изделий, дорогих часов, элитной парфюмерии.
Нет: при продаже продукции для детей черный практически не используется.
Этот цвет ассоциируется с порядком, спокойствием, доверием. Разработчики социальных сетей часто используют его в качестве основного.
Владельцы бизнеса ценят синий за то, что он вызывает ощущение стабильности и надежности. Именно такое впечатление любая компания хочет производить на свою целевую аудиторию.
Да: синий подходит для организаций, которые занимаются финансами, продажей недвижимости, разработкой программного обеспечения, электронной коммерцией.
Нет: в природе практически не встречаются продукты синего цвета. По этой причине он не ассоциируется со здоровой вкусной пищей. Для рекламы заведений общепита или продажи продуктов синий не подходит.
Это практически универсальный цвет. Люди положительно воспринимают зеленый, он ассоциируется с природой и вызывает доверие. Этот цвет часто используется в банковской сфере и агросекторе.
Да: зеленый подходит для продвижения медицинских товаров и услуг, пищевых продуктов, косметики.
Нет: для зеленого нет ограничений — он вписывается в любую тематику.
Это цвет с оттенком элитарности — достаточно вспомнить пурпурную одежду римских патрициев. Фиолетовый ассоциируется с благородством, благополучием, силой. Психологи считают, что он вызывает ощущение спокойствия. Дизайнеры используют фиолетовый как в качестве основного цвета на сайте, так и для оформления элементов целевого действия.
Да: фиолетовый часто встречается в интернет-магазинах одежды, косметики, продукции для детей. Он также используется при оформлении онлайн-сервисов.
Нет: фиолетовый «противопоказан» автомобильной промышленности, сферам медицины и общепита. У мужчин он может вызывать раздражение.
Яркий оранжевый привлекает к себе внимание, но при этом не давит на эмоции пользователя. Этим он отличается от красного. Большинству людей нравится оранжевый, он выделяется на любом фоне и часто используется для элементов целевого действия. Такие кнопки обычно не призывают немедленно совершить покупку, а предлагают оформить подписку, забронировать товар, пройти регистрацию.
Да: оранжевый подходит для онлайн-магазинов одежды и детских товаров, туристических и развлекательных сайтов. Он также встречается в соцсетях, которые ориентированы на расслабленное дружеское общение.
Нет: цвет не используется в консервативных сферах, например, в финансах или страховании.
Это цвет солнца, тепла, радости, но он не особенно популярен в дизайне. Желтый воплощает оптимизм и любовь к жизни. С его помощью дизайнеры привлекают внимание пользователей, но он остается дополнительным, а не основным оттенком.
Да: желтый подходит для продажи детских товаров или пищевых продуктов, сайтов учреждений для детей, развлекательных площадок.
Нет: в сфере финансов, страхования и медицины желтый выглядит слишком легкомысленным.
Разберем основные схемы колористики.
Воспользуемся кругом Ньютона. Контрастные цвета располагаются диаметрально противоположно и усиливают друг друга. Яркие сочетания оттенков-антиподов не раздражают зрение, не вызывают отторжения и легко запоминаются.
В этом случае цвета круга располагаются рядом и дополняют друг друга. Пользователи хорошо воспринимают такие сочетания. Однако сайты, которые оформлены по принципу дополнения, запоминаются не так легко, как в предыдущем случае.
Это классическая схема. Дизайнеры считают ее наиболее сбалансированной. Если на круге нарисовать равносторонний треугольник, то каждому углу будет соответствовать определенный цвет. Вместе они создают классическую триаду. Треугольник можно поворачивать в любом направлении — схема от этого не перестает работать.
Эта схема включает четыре цвета — два основных и два вспомогательных. При ее составлении дизайнер выбирает две пары контрастных оттенков. Цвета, к которым подбираются антиподы, идут в круге друг за другом.
В этой схеме участвуют три цвета — основной и два дополнительных. Выбрать оттенки на круге помогает равнобедренный треугольник (с двумя равными сторонами).
