Как выбрать идеальную цветовую схему для сайта?

Natalia Shpitula Обновлено 30 июля, 2020

Loading...

Содержание:

1.Какие ассоциации вызывают цвета
2.Как выбрать цветовую гамму сайта
3.Практикум: как сочетать цвета
4.Три вида оттенков
5.Используйте цветовой круг
6.Сравните несколько цветовых схем и выберите лучшую

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

Какие ассоциации вызывают цвета?

Цвет — это самый быстрый способ создать первое впечатление, ведь мы считываем визуальные элементы на эмоциональном уровне. Фирменный цвет может на 80% повысить узнаваемость бренда, а значит, и привязанность потребителей.

Какой оттенок вы представляете, когда думаете о Coca Cola? Компания не зря выбрала красный: он вызывает эмоции любви и радости. Кстати, это один из цветов, который чаще всего используют топ-бренды. Его выбрали 29% компаний с мировым именем. На первом месте — синий (33%), а на третьем — черный или серый (28%). Рассказываем подробно, какие ассоциации вызывают краски:

Теплые:

• красный — активность, эмоциональность, страсть, сила, любовь, радость (McDonalds, CNN, Netflix, Pinterest, H&M);
• розовый — сладость, романтика, игривость, теплота, сострадание (Barbie, LG, Victoria`s Secret);
• оранжевый — успех, решительность, дружелюбность, восторг (Amazon, Firefox, Fanta);
• желтый — молодость, свежесть, оптимизм (DHL, Shell, IKEA, Nicon).

Холодные:

• зеленый — свежесть, спокойствие, расслабленность, доверие, мир, надежда (Animal Planet, Starbucks, Android);
• синий — комфорт, ясность, честность, верность, надежность (Samsung, Skype, Ford, Facebook);
• фиолетовый — гламур, сила, амбиции (Hallmark, Yahoo, Cadbury).

Ахроматические:

• белый, серый, черный — элегантность, роскошь, уважение, современность, мудрость, стиль (Nike, Apple, Chanel, Puma, Toyota).

Подумайте, с какими чувствами и эмоциями ассоциируется ваш товар или услуга, и выбирайте соответствующие оттенки.

Как выбрать цветовую гамму сайта?

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

В какой нише вы работаете?

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

Как воспринимает цвета ваша аудитория?

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

Где живут ваши клиенты?

Вы собираетесь работать в одной стране или по всему миру? Не забывайте о ментальных особенностях восприятия. Хотя многие ассоциации универсальны (желтый — солнце, зеленый — природа), некоторые цвета могут негативно восприниматься в определенной стране. Ознакомьтесь с культурным кодом, прежде чем начинать продвижение за рубежом.

К какому полу принадлежат

На какой пол ориентирован ваш бизнес? Мужчины и женщины по-разному воспринимают некоторые краски. Исследование показало, что обоим полам больше всего нравится синий, а меньше всего — белый, желтый и коричневый. Зато мужчины совсем не любят фиолетовый, который на втором месте по популярности у женщин.

Какого возраста ваши покупатели?

Предпочтения человека могут меняться с возрастом. Чем старше люди, тем больше им нравятся коротковолновые оттенки (синий, зеленый, фиолетовый) и тем меньше — длинноволновые (красный, оранжевый и желтый). Нелюбимая окраска у молодежи до 18 лет — фиолетовая и коричневая, а у пенсионеров — желтая.

Лайфхак. Чтобы упростить анализ, воспользуйтесь тестом на сервисе Grasshopper. Ответьте на семь простых вопросов (к примеру, что лучше всего описывает ваших клиентов и какой тип продукта вы предлагаете) — и получите вариант основного цвета для бренда.

Практикум: как сочетать цвета

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

Немного теории: три вида оттенков

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

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

Акцентный — работает на контрасте с основным. Оттеняет его и выделяет элементы, на которые вы хотите обратить внимание: кнопки СТА (call to action — призыв к действию), названия разделов или заголовки. 

Фоновый — фон страницы. Его выбор зависит от специфики бизнеса. Почти все порталы электронной коммерции (Amazon, eBay, Zara и многие другие) выбирают белый фон, чтобы он не отвлекал внимание от продуктов и выделял содержание. А страницы, связанные с творчеством, могут использовать самые неожиданные креативные решения и выходить за рамки правил.

Используйте цветовой круг

Цветовой круг — универсальный инструмент для гармоничного сочетания красок. Комбинации бывают таких видов:

• монохромные: разные оттенки одного тона — от светлого к темному и наоборот;
• аналоговые: расположенные рядом на круге (желтый и оранжевый, голубой и синий);
• комплиментарные: расположенные друг напротив друга (красный и зеленый, желтый и фиолетовый);
• триада: расположенные в вершинах равнобедренного треугольника, нарисованного внутри круга (красный, желтый, синий);
• тетрада: расположенные в углах квадрата или прямоугольника, нарисованного внутри круга (синий, зеленый, оранжевый, сиреневый).

Лайфхак. Используйте цветовой круг на сервисе Adobe Color: введите основную окраску, выберите желаемую схему — и получите готовое сочетание.

Помните о пропорциях

В каких пропорциях сочетать оттенки? Дизайнеры советуют руководствоваться принципом гармонии: 60 (основной)/30 (фоновый)/10 (акцентный). Не обязательно строго придерживаться этих цифр, но ориентироваться на них стоит — такая комбинация наиболее приятна человеческому глазу.

Продумайте цвета логотипа

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

• расцветка логотипа должна гармонично сочетаться с фоном, но не сливаться с ним;
• в некоторых случаях можно поменять оттенок эмблемы, отрегулировав контрастность или яркость;
• вокруг лого должно быть достаточно свободного места, чтобы он был заметен.

Зайдите на интернет-порталы известных брендов и посмотрите, как они оформляют логотипы. Приведем несколько примеров:

• основной цвет эмблемы Airbnb красный, но на сайте размещен белый вариант, чтобы выделить его на фоне заглавной цветной фотографии. Зато красный лого используется в качестве фавикона;
• Apple успешно работает с ахроматическими цветами, варьируя оттенки лого: белый на фоне черной шапки страницы и темно-серый на фавиконе;
• IKEA и Starbucks не меняют цвета своих крупных эмблем, размещая их на белом фоне и оставляя вокруг достаточно пространства.

Лайфхак. Чтобы подобрать оттенки для логотипа, воспользуйтесь онлайн-сервисом Logaster. Он поможет в несколько кликов сгенерировать эмблему, а затем редактировать ее неограниченное количество раз.

Сайт будет выглядеть лучше в цветах вашего бренда!

Создайте корпоративный стиль вместе с Logaster!

Сравните несколько цветовых схем и выберите лучшую

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

Заключение

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

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

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

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