Большинство из нас знакомы с психологией цвета. Есть сотни статей, тематических исследований и даже инфографика, которые открывают этот вопрос с разных точек зрения. Цвет влияет на нас, влияет на наш выбор и наш процесс принятия решений — нет никакого смысла спорить с этим. Тем не менее, вы не должны слепо следовать этим принципам, так как всегда есть исключения. Сегодня мы будем изучать роль цветового контраста в создании ярких и привлекающих внимание CTA-кнопок.
Изменение цвета от мягкой и спокойной зелени к резкому и жирному красному, чтобы привлечь больше внимания, не всегда может спасти ситуацию. Если нет хорошей базы, чтобы сделать CTA более заметным и броским, ничего не произойдет. В этом случае, говоря «базы» я имею в виду контраст. Мы собрали 10 примеров с хорошо продуманной и высокой контрастностью и 10 примеров, когда кнопки действия безопасно вписаться в окружающую среду, и, как следствие, теряют свое предназначение. Делайте ваши собственные выводы.
Итак, 10 примеров удачного использования контраста и цвета.
ESPN Спорт Программирование
Первая страница ESPN Sports Programming является отличным примером, который показывает, как цвет может играть значительную роль в увеличении конверсии. Есть 2 СТА: какой из них бросается в глаза в первую очередь? Конечно красный, так как благодаря яркому пятну и темному фону кнопка «contact us» выглядит гораздо привлекательней, чем простая надпись «watch demo reel» справа.
Moovrs
Хотя в кнопке и не использован хваленый красный цвет, который считается выигрышным решением, благодаря высокой контрастности между ним и основным цветом фона, СТА-кнопка сразу бросается в глаза, становится естественным фокусом.
Metaverse Mod Squad
Это еще один отличный пример дизайна, который отвечает правилам психологии цвета. Здесь красный используется в качестве инструмента, который легко расставляет акценты и отделяет такие важные детали, как CTA, иконки меню «Наймите нас» и ссылки из общего потока контента. Хотя фон и художественные штрихи производят подавляющий внимание эффект, эти три CTA всегда остаются в центре внимания.
S-Trip
Здесь дизайнер позаботился о том, чтобы CTA-кнопки выглядели отличными от фона и привлекали внимание. Используя яркий желтый оттенок, который поразительно отличается от фона, дизайнер сумел подчеркнуть важность этих двух компонентов.
Squad Digital
Насыщенный красный цвет с малиновым оттенком ставит CTA-кнопку в центр внимания. Хотя, конечно, вы не должны недооценивать роль темного, почти монотонного, фона, огромное количество пустого пространства и текстового блока в центре страницы, связь которых не создают каких-либо других координат.
El Passion
Хотя зеленый цвет обычно ассоциируется с безмятежностью и естественностью, что прекрасно вписывается в окружающую среду, в этом случае зеленый позволяет выделить CTA-кнопку и привлечь общее внимание. Эффект получается благодаря затемненному фону изображения и скудному количеству текста.
Icons Responsive
Icons Responsive имеет довольно насыщенную домашнюю страницу с большим количеством интересного материала. Есть анимация, что привлекает внимание, краткое описание, относительно большой логотип, навигационная панель. Тем не менее, несмотря на насыщенное содержимое, две СТА-кнопки выделяются на общем фоне и быстро привлекают внимание.
Chatrify
Здесь дизайнеры сделали выбор не только в пользу яркого, теплого желтого цвета, который использовали для СТА-кнопок на темном фоне, но они также использовали размер для того, чтобы добавить визуальный вес и значимость СТА. В результате, кнопка «Начните сейчас бесплатно» имеет визуальный приоритет над кнопкой «зарегистрироваться» в верхнем правом углу.
Teletrack Plus
Дизайн Teletrack Plus имеет великолепную деловую атмосферу, которая источает образ доверия и надежности. Несмотря на то, что целевая страница содержит много информации (макеты устройств, перечень функций), относительно небольшая, но весьма насыщенная желтая кнопка, помещенная почти в самом конце, хорошо выделяется и привлекает внимание. Как обычно, умелый выбор тона, что отличается от основного цвета палитры, спасает положение!
Mobirise
И снова вопрос: какая из кнопок привлекает ваше внимание в первую очередь? Я думаю, многие из вас согласятся, что оранжевая СТА-кнопка выглядит более привлекательно и ярко, чем кнопки-призраки.
Если честно, найти примеры страниц с плохой контрастностью и цветом не составило особого труда, они появляются все время. Поэтому мы включили примеры, когда СТА-кнопки нуждаются всего лишь в некотором улучшении, чтобы приносить большую конверсию.
100 Thoughtful Acts
Сайт компании 100 Thoughtful Acts – это отличный с точки зрения эстетики сайт. Тем не менее, крошечные СТА-кнопка, которая находится в конце текстового блока, выглядит немного тускловато. Хотя красный цвет ее кажется правильным решением. Однако это больше помогает вписать ее в общий стиль страницы, но не выделить.
Lucerne Health
Lucerne Health имеет такой впечатляющий фон фото, что от него трудно оторвать взгляд. СТА-кнопка отлично поддерживает общую цветовую тематику, и исполнена в спокойным и безмятежным синем тоне. Тем не менее, такая окраска только сохраняет общий стиль, но не фокусирует внимания.
Convect Air
Эта страница является еще одним прекрасным примером дизайна сайта, где СТА теряется на роскошном фоне. Отсутствие контраста и небольшой размер сыграл плохую шутку, лишив СТА-кнопку должного внимания.
Soundsnap
Сайт Soundsnap имеет 2 кнопки, которые похожи друг на друга, и, как следствие, имеют одинаковый приоритет. Более того они идеально вписываются в окружающую среду. Так что, единственное, что мгновенно бросается в глаза — это узкая яркая информационная панель в верхней части.
Wiser Digital
Кнопку «Найти больше» идеально перекликается с общим дизайном и делает крошечный вклад в эстетику. Хотя фон служит отличным фундаментом для текста и графики, СТА-кнопка все-равно резко не определена.
Spire
Здесь СТА-кнопка имеет более характерный внешний вид; единственный недостаток заключается в ее размере. Интересный фон с некоторыми причудливыми эффектами наложения имеет большое визуальное воздействие, не говоря уже об огромном белом слогане, который занимает центральное положение, так что СТА-кнопка, естественно, оказалась, «на окраине».
The Green Guys
Здесь мы видим преобладание желтого и зеленого цветов. Несмотря на то, что белый цвет в сравнении с этими двумя выглядит заметным, это не выделяет СТА-кнопку настолько, чтобы она стала центральным объектом притяжения взгляда, особенно, когда размер объекта настолько мал.
Martin Wren
Сайт Мартина Рена служит доказательством того, что яркие тона завоевывают больше внимания, нежели темные. Хотя темная СТА-кнопка отлично сочетается с дизайном и добавляет эстетики, оранжевая СТА-кнопка, с точки зрения увеличения конверсии, является более мощной.
Royal Albert Hall
Сайт основан на потрясающем живописном фоне, что создает общую эстетику. Несмотря на то, что шильдик выделяется благодаря резкому контрасту и его относительно большого размера, поле поиска и кнопка отправки выглядят смазанными и теряются на общем фоне.
Desperados
Desperados имеет удивительно творческий дизайн, достигнутый благодаря декоративному шрифту и декоративной графикой. Чтобы поставить акцент на CТА дизайнер использует дополнительные графические объекты, что это не спасает СТА от «слипания» с общей стилистикой сайта.
ВЫВОД
Выбор цвета играет огромную роль в создании дизайна сайта. Однако, как показывает практика, поддержание контраста между фоном и CTA имеет большое значение. Если вы хотите увеличить количество переходов и улучшить взаимодействие с пользователями, вы должны принять их во внимание и научиться ими манипулировать.
Хочешь знать все фишки интернет продаж?
Закажи свой комплект из самых лучших тренингов Михаила Христосенко со скидкой 60%.
Выбирай свой комплект «КОНВЕРСИЯ», «ТРАФИК» или «КОНВЕРСИЯ+ТРАФИК» со скидкой 60% >>>
И не забудь поделиться с друзьями!
Спасибо, Михаил!
Как всегда, всё коротко и ясно.