7 шагов выбора цветовой гаммы сайта интернет-магазина

Цветовая схема сайта является одной из самых важных его частей – это одна из первых вещей, которые посетители замечают, притом фиксируя подсознательно. Поэтому выбор хорошей цветовой палитры является важной частью запуска или совершенствования (с редизайном) любого онлайн-магазина, – пишет Ник Бабич в блогe Shopify, переводит Evo.business

Designer
Depositphotos

Читайте также: Как цвет влияет на продажи: кейс-исследование

1

Шаг 1. Определите эмоции, которые вы хотите вызвать у посетителя

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

А когда с эмоциями уже ясно, взгляните на такое руководство по ассоциациям между эмоциями и цветами (оно пригодно для всей западной цивилизации, но не для Востока):

  • Фиолетовый (таинственный, романтический, духовный, изысканный). Фиолетовый намекает, что речь идет о чем-то высокого класса.
  • Красный (страстный, опасный, важный). Стимулирующий цвет, создает впечатление скорости или силы.
  • Оранжевый (игривый, энергичный, привлекательный). Оранжевый способен создать приятные, уютные ощущения для ваших посетителей, он хорошо ассоциируется с детством, хобби, спортом, Но дорогие товары лучше с ним не продавать (им больше пойдет фиолетовый, красный, черный).
  • Желтый (веселый, дружелюбный, внимательный). Светло-желтый цвет сообщает о позитивности и теплоте. Темные оттенки желтого, рыжие тона создают впечатление древности, основательности.
  • Зеленый (естественный, безопасный, свежий). Зеленый и салатовый цвета отражают близость к природе, а также рост («растет как трава») и именно поэтому зеленый дизайн часто часто связан с деньгами. Благодаря светофорам зеленый также ассоциируется с доступностью, с «зеленым светом» для движения, решения.
  • Синий (доверие, спокойствие, надежность). Синий также излучает чувство внутренней безопасности.
  • Розовый (женственность). Розовый наиболее известен как «цвет для девочек», однако его навязчивое использование давно вызвало протест у женской аудитории. И теперь он не входит даже в топ-10 самых популярных оттенков среди женщин (согласно исследованию Джо Хэллока); учтите это!
  • Черный (сильный, сложный, таинственный). Черный в качестве фона может создать ощущение силы или роскоши, а также ассоциируется со многими играми и современными музыкальными стилями.
  • Белый (чистота, здоровье, спокойствие). Белый наилучшим образом акцентирует любые другие цвета вокруг и внутри него. Так, при использовании в качестве фона белый не отвлечет внимание посетителей от важных элементов сайта магазина.
  • Серый (нейтральность, спокойствие). Цветовая схема с серым фоном создает ощущение твердости, прочности, основательности. Поэтому серый цвет настолько популярен в торговом и деловом мире.
2

Шаг 2. Ограничьте количество цветов палитры сайта

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

Вы получите гораздо лучшие результаты, если выберете три (или два) основных цвета для вашей палитры.

В исследовании Университета Торонто большинство людей заявили, что предпочитают цветовые комбинации, которые составлены только из двух или трех цветов

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

3

Шаг 3. Чисто черные блоки и шрифты замените на оттенки темно-серого

Самый темный цвет в цветовой палитре iOS – верхняя строка – не # 000000 (чисто черный), а # ​​333333 (темно-серый). Все просто: Apple знает, что блок с черным фоном психологически примагнитит взгляд посетителя, отключит его боковое зрение – и посетитель многое упустит на сайте или в приложении рядом с чисто черным блоком.

Рядом с такой черной кнопкой боковое зрение отключается

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

4

Шаг 4. Продумайте использование правила 60-30-10

Концепция распределения цветов для отрисовке страниц сайта проста:

  • 60% площади – ваш доминирующий цвет (это обычно не ваш главный фирменный цвет, а лишь основной фоновый цвет – часто он просто белый или серый).
  • 30% площади – второй по значению цвет (вот тут часто применяется главный фирменный цвет бренда магазина).
  • 10% площади – контрастный цвет для важных акцентов (скажем, для призывов к покупке – часто это оттенки красного или зеленого).

На некоторых страницах можно использовать инвертированную схему: скажем, товарные страницы сайта на 60% белые и на 30% фиолетовые, а страницы с контактами, оплатой, доставкой и информацией о продавце – на 60% фиолетовые и на 30% белые.

5

Шаг 5. Отрисуйте структуру всех страниц сайта вначале в монохроме, без цвета

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

Так вы выстроите наиболее качественное юзабилити страниц сайта, лучше определите иерархию расстановки блоков

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

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

6

Шаг 6. Проверьте, чтобы блоки и кнопки важного содержания оказались везде контрастны с фоном

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

Исходя из этого, например, салатовая кнопка CTA (сall to action – призыв к действию) не должна ни в одном месте сайта «упасть» на темно-зеленый фон, на котором она станет малоконтрастной, невыразительной.

7

Шаг 7. Всегда следуйте правилу постоянства гаммы сайта

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

Например, когда посетители переходят на страницу товара с Главной страницы магазина, вы можете использовать свой цвет бренда для заголовков – чтобы создать ощущение постоянства опыта.

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

Другими словами, между страницами с заметным отличием дизайна в большинстве случаев достаточно использовать всего один соединительный цвет – в идеале, базовый цвет вашего бренда.

Translated from English. Source: Shopify.com. Author: Nick Babich

Prom.ua