Главная > Создание сайтов > 6 секретов суперпродающих баннеров и кнопок для сайта

6 секретов суперпродающих баннеров и кнопок для сайта

разработка дизайна сайта

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


  1. Во-первых, он должен иметь правильный размер. Параметры баннеров на сайте должны укладываться в общепринятые стандарты: 320 x 100 px для мобильной версии, 728 x 90 px для стандартного баннера в верхней или нижней части страницы, 300 x 250 px – для встроенного прямоугольного баннера и 300 x 600 px для крупных полноразмерных блоков. Что касается кнопок, их размер может варьироваться в зависимости от специфики дизайна и важности целевого действия.
  2. Хороший баннер всегда ассоциируется с брендом, а кнопка – с общим дизайном сайта. Отвечая на призыв к действию, посетитель выражает доверие, в первую очередь, бренду, и только затем – маркетинговому предложению. Общие черты проявляются в цветах оформления, шрифтах, изображениях. На многих сайтах кнопки с призывом к заказу услуг оформлены в фирменные цвета, контрастирующие между собой.
  3. Усиливайте эффективность с помощью анимации. Если говорить о баннерах, анимация должна быть умеренной: не должно быть миганий и слишком быстрой смены содержимого (не чаще 1 раза за две секунды). Поскольку баннер имеет не маленький размер, обилие анимации будет действовать на пользователя раздражающее и вызовет обратный ожидаемому эффект. Умеренная анимация, наоборот, привлекает и заинтересовывает. Но любая динамика на баннере не должна длиться дольше 5 секунд, иначе ее вряд ли будут досматривать до конца. Что же касается кнопок, ховеры здесь приветствуются: они обеспечивают понимание функциональности этого элемента на сайте и поощряют его использование.
  4. Тщательно продумайте дизайн. Например, в этом блоге по созданию сайтов мы видим баннер для бесплатного скачивания книги, с первого взгляда на который мы уже понимаем, что нам предлагают: книгу в формате PDF от создателей «Бизнес Сайт» — это ясно благодаря изображению и оформлению в фирменные цвета. Какие еще варианты есть для дизайна баннеров? Можно использовать изображения, но они не должны быть слишком крупными. Выгоднее всего смотрятся небольшие фото с максимальной детализацией и смысловым насыщением.
  5. Оформление кнопки многое сообщает посетителю о ее функциях на подсознательном уровне. Например, градиент с затемнением к низу воспринимается как выпуклая кнопка, а градиент с осветлением в нижней части – как нажатая кнопка. Тени и скругленные углы делают кнопку реалистичной, объемной, вызывают правильные ассоциации. Вместо текста на ней может находиться схематическое изображение действия, как это реализовано в интернет-магазине Розетка: для покупки кнопка с иконкой корзины, с сердечком – добавление в виш-лист, с весами – функция сравнения.
  6. Выбирайте правильные шрифты. Баннеры и кнопки сильно конкурируют с остальными элементами сайта: они очень ограничены в размере, но при этом несут большую смысловую нагрузку. Чтобы быть понятными пользователю, они должны быть легко читаемыми. Выбранные для этих элементов шрифты должны быть разборчивыми в том размере, в котором они использованы на кнопке или баннере. Лучше всего выбрать шрифт без засечек. На баннере можно использовать его в двух вариантах: два соседних размера или два начертания жирного, один из которых служит для заголовка, а другой – для основного текста. Для кнопки, соответственно, достаточно одного варианта.
  7. Не допускайте излишеств. В оформлении баннеров и кнопок не должно использоваться много цветов. Для кнопок достаточно 2 оттенков, а для баннера – не больше четырех. Все оттенки должны гармонично сочетаться между собой. В баннере крайне нежелательно использовать ядовитые неоновые оттенки, использовать сразу несколько изображений. Все это отвлекает пользователя от целевого действия и создает желание поскорее избавиться от такой навязчивости, покинуть сайт. Лучше всего работают элементы, которые фокусируют внимание потенциального клиента на CTA (призыве к действию).

правильное наполнение сайта контентом

Конечно же, все эти советы будут обеспечивать хорошую конверсию только вместе с качественным текстом. Для баннера важно соблюдение последовательности: предложение-поощрение-действие, а для кнопки – четкий и емкий CTA.

Читайте также:

Прокомментируете вышенаписанное?

* обозначены обязательные для заполнения поля