Как создать баннер, который кликают: 7 правил дизайна + примеры

05.08.2026 Admin 2 просмотров Чтение: 1 мин
Цвет, шрифт, призыв, размер, контраст, анимация. Примеры хороших и плохих баннеров.

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

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

Цифра: Хороший дизайн баннера может увеличить CTR в 5-10 раз без изменения ставки и таргетинга.

Правило №1. Контраст — король

Баннер должен выделяться на фоне сайта, где он показывается. Если он сливается с фоном — его не заметят.

Как сделать правильно:

  • Используйте контрастные цвета: тёмный фон + светлый текст, или наоборот
  • Кнопка должна быть самым ярким элементом на баннере
  • Избегайте пастельных тонов, если сайт-площадка тоже пастельная

Пример:

  • ❌ Плохо: белый текст на светло-сером фоне — нечитаемо
  • ✅ Хорошо: белый текст на тёмно-синем или красном фоне

Правило №2. Один баннер — одно сообщение

Не пытайтесь рассказать всё сразу. Чем больше информации, тем сложнее понять, что делать.

Как сделать правильно:

  • Выберите одно главное предложение
  • Сделайте его крупным и заметным
  • Всё остальное — вторично (мелкий шрифт, если нужно)

Пример:

  • ❌ Плохо: «Скидка 50% на все товары до 31 августа. Успейте купить! Качество гарантируем. Доставка по Москве бесплатно.» — слишком много
  • ✅ Хорошо: «Скидка 50%» (крупно) + «Успейте до 31 августа» (мелко)
Тест: Покажите баннер другу на 2 секунды. Если он не понял, о чём реклама, — баннер перегружен.

Правило №3. Призыв к действию (CTA) — обязательно и заметно

Пользователь должен знать, что делать: кликнуть, перейти, купить, узнать.

Как сделать правильно:

  • Используйте глаголы действия: «Купить», «Узнать», «Перейти», «Заказать», «Скачать»
  • Кнопка должна быть большой и контрастной
  • Текст на кнопке — 2-4 слова, не больше

Примеры хороших CTA:

  • «Купить сейчас»
  • «Узнать цену»
  • «Заказать со скидкой»
  • «Получить консультацию»

Правило №4. Читаемый шрифт

Если текст нечитаемый — баннер бесполезен. Минимализм в шрифтах часто выигрывает.

Как сделать правильно:

  • Используйте не больше 2 шрифтов на баннере
  • Основной текст — жирный, без засечек (Arial, Roboto, Montserrat)
  • Размер шрифта — не меньше 14px для основного текста, 20+ для заголовка
  • Избегайте курсива и декоративных шрифтов — они плохо читаются

Правило №5. Анимация (GIF) — осторожно и с умом

Анимированные баннеры привлекают внимание, но если анимация слишком быстрая или раздражающая — пользователь закрывает глаза и не кликает.

Как сделать правильно:

  • Простая анимация: мигание, движение одного элемента, смена 2-3 кадров
  • Скорость: не быстрее 1 смены в 2-3 секунды
  • Не анимируйте кнопку (она должна быть статичной и кликабельной)

Примеры удачной анимации:

  • Смена фраз: «Скидка 50%» → «Только сегодня» → «Успейте!»
  • Мигающая рамка вокруг кнопки
  • Движущаяся стрелка, указывающая на кнопку
Важно: На LINKBOOST GIF-баннеры принимаются. Но тестируйте: иногда статика даёт больше кликов, чем анимация.

Правило №6. Правильный размер

На LINKBOOST доступны 10+ размеров. Самые популярные — 468×60, 728×90, 300×250, 336×280.

Как выбрать размер:

  • 468×60 — классика, подходит для шапки и подвала сайта
  • 728×90 — широкий баннер, хорошо виден
  • 300×250 — прямоугольник, идеален для сайдбара
  • 336×280 — большой прямоугольник, хорошо читается
  • 320×50 — мобильный формат (для телефонов)

Совет: Для первого теста возьмите 468×60 или 300×250 — они показываются на большинстве сайтов.

Правило №7. Адаптация под мобильные

Более 60% трафика идёт с телефонов. Если баннер плохо смотрится на мобильных — вы теряете большинство потенциальных кликов.

Как сделать правильно:

  • Используйте крупный шрифт — на телефоне текст уменьшается
  • Делайте контрастный дизайн — на ярком солнце видно хуже
  • Кнопка должна быть достаточно большой для пальца (от 44×44 px)
  • Загружайте отдельный мобильный баннер (320×50), если есть возможность

Примеры: хорошо vs плохо

❌ Плохой баннер:

  • Мелкий нечитаемый текст
  • Серая кнопка на сером фоне
  • 5 разных цветов, которые не сочетаются
  • Нет призыва к действию («Купить» отсутствует)
  • Слишком много текста

Результат: CTR < 0.1%

✅ Хороший баннер:

  • Крупный заголовок «СКИДКА 50%»
  • Яркая красная кнопка с текстом «Купить сейчас»
  • Спокойный фон (синий или белый)
  • Чёткий шрифт, жирный
  • Минимум текста (одно предложение)

Результат: CTR 1-3%

Готовый рецепт: Яркий фон + контрастная кнопка + крупный заголовок с выгодой + простой призыв = высокий CTR.

Чек-лист перед загрузкой баннера

  • ☐ Контрастный фон и текст (не сливаются)
  • ☐ Одно главное сообщение
  • ☐ Есть призыв к действию (кнопка с глаголом)
  • ☐ Шрифт крупный и читаемый
  • ☐ Анимация не раздражает (если есть)
  • ☐ Правильный размер (популярный формат)
  • ☐ Хорошо смотрится на телефоне

Где создать баннер бесплатно?

  • Canva — бесплатные шаблоны для баннеров, много размеров
  • Crello — аналог Canva, тоже бесплатно
  • Figma — для тех, кто умеет работать с векторной графикой
  • Photopea — бесплатный онлайн-аналог Photoshop

Сделайте баннер по этим 7 правилам, загрузите на LINKBOOST и посмотрите на CTR. Вероятность, что он будет кликаться, вырастет в разы.

Загрузить баннер и запустить кампанию

Хороший дизайн баннера = больше кликов за те же деньги.

Поделиться:
Категория: Реклама

О блоге

Полезные статьи о заработке в интернете, серфинге сайтов, выполнении заданий, рекламе и продвижении. Советы и инструкции для вебмастеров и рекламодателей.

Начните зарабатывать!

Серфинг сайтов от 0.02₽ за просмотр

Регистрация

Хотите зарабатывать больше?

Присоединяйтесь к LINKBOOST — начните зарабатывать на серфинге уже сегодня!

Начать зарабатывать