Цветовая схема сайта является одной из самых важных его частей – это одна из первых вещей, которые посетители замечают, притом фиксируя подсознательно. Поэтому выбор хорошей цветовой палитры является важной частью запуска или совершенствования (с редизайном) любого онлайн-магазина, – пишет Ник Бабич в блогe Shopify, переводит Evo.business
Читайте также: Как цвет влияет на продажи: кейс-исследование
Шаг 1. Определите эмоции, которые вы хотите вызвать у посетителя
Выбирая цветовую палитру для сайта, думайте не о том, как выглядят товары и как конкуренты оформляют страницы с ними – а о том, что ваши покупатели должны у вас почувствовать. Подумайте и сформулируйте: какие эмоции вы хотите вызвать.
А когда с эмоциями уже ясно, взгляните на такое руководство по ассоциациям между эмоциями и цветами (оно пригодно для всей западной цивилизации, но не для Востока):
- Фиолетовый (таинственный, романтический, духовный, изысканный). Фиолетовый намекает, что речь идет о чем-то высокого класса.
- Красный (страстный, опасный, важный). Стимулирующий цвет, создает впечатление скорости или силы.
- Оранжевый (игривый, энергичный, привлекательный). Оранжевый способен создать приятные, уютные ощущения для ваших посетителей, он хорошо ассоциируется с детством, хобби, спортом, Но дорогие товары лучше с ним не продавать (им больше пойдет фиолетовый, красный, черный).
- Желтый (веселый, дружелюбный, внимательный). Светло-желтый цвет сообщает о позитивности и теплоте. Темные оттенки желтого, рыжие тона создают впечатление древности, основательности.
- Зеленый (естественный, безопасный, свежий). Зеленый и салатовый цвета отражают близость к природе, а также рост («растет как трава») и именно поэтому зеленый дизайн часто часто связан с деньгами. Благодаря светофорам зеленый также ассоциируется с доступностью, с «зеленым светом» для движения, решения.
- Синий (доверие, спокойствие, надежность). Синий также излучает чувство внутренней безопасности.
- Розовый (женственность). Розовый наиболее известен как «цвет для девочек», однако его навязчивое использование давно вызвало протест у женской аудитории. И теперь он не входит даже в топ-10 самых популярных оттенков среди женщин (согласно исследованию Джо Хэллока); учтите это!
- Черный (сильный, сложный, таинственный). Черный в качестве фона может создать ощущение силы или роскоши, а также ассоциируется со многими играми и современными музыкальными стилями.
- Белый (чистота, здоровье, спокойствие). Белый наилучшим образом акцентирует любые другие цвета вокруг и внутри него. Так, при использовании в качестве фона белый не отвлечет внимание посетителей от важных элементов сайта магазина.
- Серый (нейтральность, спокойствие). Цветовая схема с серым фоном создает ощущение твердости, прочности, основательности. Поэтому серый цвет настолько популярен в торговом и деловом мире.
Шаг 2. Ограничьте количество цветов палитры сайта
Чем больше цветов вы используете в проекте редизайна сайта, тем труднее достичь гармоничного баланса. Использование слишком большого количества цветов в дизайне – сродни попытке передать миллион перебивающих друг друга чувств и сообщений. Это может только смутить посетителей сайта.
Вы получите гораздо лучшие результаты, если выберете три (или два) основных цвета для вашей палитры.
Совет. Если вам нужны для выделения блоков дополнительные цвета, кроме тех двух-трех, которые вы определили как базу своей палитры – используйте оттенки, незначительно отличающихся от базового цвета.
Шаг 3. Чисто черные блоки и шрифты замените на оттенки темно-серого
Самый темный цвет в цветовой палитре iOS – верхняя строка – не # 000000 (чисто черный), а # 333333 (темно-серый). Все просто: Apple знает, что блок с черным фоном психологически примагнитит взгляд посетителя, отключит его боковое зрение – и посетитель многое упустит на сайте или в приложении рядом с чисто черным блоком.
Потому не забудьте немного разбавить свой черный цвет, приглушить эту бездну черного фона, магнитящую взгляд. А заодно приглушите чисто черный цвет и у шрифтов.
Шаг 4. Продумайте использование правила 60-30-10
Концепция распределения цветов для отрисовке страниц сайта проста:
- 60% площади – ваш доминирующий цвет (это обычно не ваш главный фирменный цвет, а лишь основной фоновый цвет – часто он просто белый или серый).
- 30% площади – второй по значению цвет (вот тут часто применяется главный фирменный цвет бренда магазина).
- 10% площади – контрастный цвет для важных акцентов (скажем, для призывов к покупке – часто это оттенки красного или зеленого).
На некоторых страницах можно использовать инвертированную схему: скажем, товарные страницы сайта на 60% белые и на 30% фиолетовые, а страницы с контактами, оплатой, доставкой и информацией о продавце – на 60% фиолетовые и на 30% белые.
Шаг 5. Отрисуйте структуру всех страниц сайта вначале в монохроме, без цвета
Игра с цветом – она пьянит (если вы не веб-дизайнер и не собираетесь лениво применить одну из привычных цветовых схем, которыми вы уже создали сотню-другую сайтов). Но я настоятельно рекомендую избежать этого соблазна – и вначале спроектировать страницы интернет-магазина в черно-белом варианте.
И только когда со структурой всех страниц уже все ок, начинайте подставлять в блоки выбранные вами цвета палитры сайта.
Если смотрится не очень, тогда попробуйте поменять свои базовые цвета на их оттенки. Но только не меняйте утвержденную оптимальную расстановку блоков ради какой-то особо волшебной, как вам сегодня кажется, переигровки цветов и контрастов.
Шаг 6. Проверьте, чтобы блоки и кнопки важного содержания оказались везде контрастны с фоном
Высокий контраст – лучший выбор для важного контента или ключевых элементов. Чем больше вы хотите чего-то добиться от посетителей, тем больше вы должны полагаться на контрастные сочетания.
Исходя из этого, например, салатовая кнопка CTA (сall to action – призыв к действию) не должна ни в одном месте сайта «упасть» на темно-зеленый фон, на котором она станет малоконтрастной, невыразительной.
Шаг 7. Всегда следуйте правилу постоянства гаммы сайта
И последний совет – будьте последовательны в применении выбранной палитры. Последовательность не означает использование одинаковых цветов на каждой странице магазина – это было бы слишком скучно. Это означает, что нужно все время связывать цвета одной страницы магазина с цветами отличающейся по дизайну страницы.
Например, когда посетители переходят на страницу товара с Главной страницы магазина, вы можете использовать свой цвет бренда для заголовков – чтобы создать ощущение постоянства опыта.
Другими словами, между страницами с заметным отличием дизайна в большинстве случаев достаточно использовать всего один соединительный цвет – в идеале, базовый цвет вашего бренда.
Translated from English. Source: Shopify.com. Author: Nick Babich
