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