Как заставить пользователя нажать на кнопку или 5 главных call-to-action цветов в веб-дизайне

A A A

Content is King! — Согласны? Но вне зависимости от содержания, обложка тоже очень важна. Нет, мы не спорим, она не первостепенна, но при встрече, все же, судят по одежке, правда? Ведь как еще можно привлечь внимание прохожего, если не яркой вывеской? И только заполучив пользовательский интерес, мы сохраняем его при помощи контента.

То же правило верно и для цветов в веб-дизайне. Умеете ими манипулировать? 😉

У вас есть лишь один шанс на то, чтобы произвести первое впечатление

 

Чтобы понять свое реальное отношение к какому-либо предмету, вспомните, какие первые эмоции он у вас вызвал. Артур Шопенгауэр, философ.

 

У каждого сайта есть своя цель — итоговый шаг, который, по вашему мнению, должны сделать посетители: подписаться, добавить в корзину, купить, «зафолловить» и т.п.

И если такая «главная» кнопка существует, то факт, нажмет посетитель ее или нет, зависит от правильной мотивации это сделать.

Чем? Цветом!

Каким?

Воспользуемся примером коллег из 1stWebDesigner и проанализируем влияние цветов на примерах:

1. Pinterest выбирает красный:

web-design-colors-2
Без сомнений, красный считается самым страстным цветом. И если вы проверите цветовую палитру Pinterest, то легко заметите, какой цвет там в приоритете.

 

Оранжевый цвет в веб-дизайне:

web-design-colors-4

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

Красный цвет в веб-дизайне:

10 ассоциаций с красным цветом:

  • Кровь
  • Война
  • Огонь
  • Мужественность
  • Страсть
  • Соблазнение
  • Гнев
  • Принуждение
  • Энергия
  • Смелость

Цветовые координаты:

Hex: #FF0000
RGB: (255, 0, 0)

2. Amazon предпочитает оранжевый:

web-design-colors-5
Оранжевый цвет — теплый и энергичный, но не такой интенсивный, как красный. Он кажется более горячим и согревающим. Такой живой и дружелюбный, он скорее приглашает людей что-то сделать, а не заставляет. Иногда оранжевый цвет может казаться агрессивным, особенно в случаях призыва к действию. Поэтому он так же должен применяться аккуратно:

Оранжевый цвет в веб-дизайне:

web-design-colors-7

10 ассоциаций с оранжевым цветом:

  • Оптимизм
  • Нацеленность
  • Огонь
  • Предупреждение
  • Осень
  • Религии
  • Выносливость
  • Сострадание
  • Хэллоуин
  • Существо

Цветовые координаты:

Hex: #FF7F00
RGB: (255, 127, 0)

3. Facebook любит синий:

web-design-colors-8
Немало компаний выбирают именно синие и голубые тона. Такая цветовая гамма ассоциируется у нас с чем-то защищенным, надежным и опытным. Синий цвет — полная противоположность красному. Он успокаивает и избавляет от беспокойства.

Синий цвет в веб-дизайне:

web-design-colors-10
Согласно проведенному в 2009 году в Германии исследованию, синий цвет — любимый у 46% мужского населения и 44% женского. Википедия

10 ассоциаций с синим цветом:

  • Честность
  • Дружелюбие
  • Магия
  • Мальчики
  • Лед
  • Королевская власть
  • Зима
  • Полиция
  • Небо
  • Вода

Цветовые координаты:

Hex: #0000FF
RGB: (0, 0, 255)

4. Groupon за силу зеленого:

web-design-colors-11

Вы — оптимист? Любите зеленый цвет? Ведь именно он дарит спокойствие и веру в положительное будущее. Любая компания, деятельность которой хоть как-то связана с окружающей средой или природой, будет использовать зеленый цвет. Как доллары! 😉

Зеленый цвет освежает и расслабляет, дарит людям ощущение сбалансированности и вдохновленности

Зеленый цвет в веб-дизайне:
web-design-colors-13


Во многих языках мира (особенно в алтайских, куда входят, в частности, тюркские) синий и зелёный не различаются. Это связано с этимологией иероглифического знака, обозначающего этот цвет, первоначально обозначавшего цвет минералов, добываемых из земли. Википедия

10 ассоциаций с зеленым цветом:

  • Деньги
  • Рост
  • Жадность
  • Зависть
  • Природа
  • Весна
  • Здоровье
  • Молодежь
  • Трава
  • Надежда

Цветовые координаты:

Hex: #00FF00
RGB: (0, 255, 0)

5. Yahoo! взрывает сиреневым:

web-design-colors-14
Сиреневый цвет чаще всего связывают с воображением, креативностью, достоинством, благородством и изобилием. Кроме того, светлые тона сиреневого ассоциируют с весной и романтизмом, темные — с богатством и роскошью. Такой цвет чаще всего используется в сфере красоты и моды, производителями косметики и нижнего белья. Кроме того, он считается скорее женским и романтичным, чем мужским.

Сиреневый цвет в веб-дизайне:

web-design-colors-16

 

10 ассоциаций с сиреневым цветом:

  • Благородство
  • Гордость
  • Ум
  • Романтичность
  • Искусственность
  • Экзотика
  • Душевность
  • Роскошь
  • Женственность
  • Богатство

Цветовые координаты:

Hex: #800080
RGB: (128, 0, 128)

Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или , чтобы сообщить нам.