Веб-баннер кажется самым простым форматом: картинка небольшая, печати нет, правки бесплатные. На практике именно с ним чаще всего переделывают всё с нуля — потому что начали с красивого макета, а не с вопроса, где и как его покажут. Ниже порядок, в котором баннер собирается так, чтобы его приняла площадка и чтобы он работал в самом маленьком из своих размеров.
Шаг 1. Выяснить, где его покажут
Площадка задаёт почти всё: размеры, пропорции, допустимые форматы файла, вес, правила модерации. Макет «вообще для интернета» не существует — существует баннер для рекламной сети Яндекса, для VK Рекламы, для конкретного сайта или для письма в рассылке, и у каждого из них свои ограничения.
- Яндекс Директ, графические объявления в РСЯ: фиксированный список размеров, файл JPG, PNG или GIF. Лимит веса на момент подготовки статьи — до 512 КБ, но площадка его меняет, поэтому перед экспортом сверяйтесь со справкой Директа.
- VK Реклама: базовые пропорции — квадрат 1:1 и горизонталь 16:9, для историй и клипов — вертикаль 9:16. Размер в пикселях задаётся от этих пропорций.
- Собственный сайт: размеры диктует вёрстка, а не рекламная сеть. Здесь важнее, как блок ведёт себя на телефоне и не перекрывает ли его что-то в интерфейсе.
- Рассылка: почтовые программы режут анимацию и внешние шрифты, поэтому текст на баннере в письме лучше дублировать живым текстом рядом.
Итог первого шага — список площадок и форматов, а не один размер. Для кампании в РСЯ это обычно шесть-десять размеров сразу.
Шаг 2. Одна мысль на баннер
На веб-баннер смотрят долю секунды, и почти всегда — краем глаза, пока читают что-то другое. Он успевает сказать одну вещь. Поэтому до того, как открывать редактор, стоит записать словами, что именно должен понять человек, и в каком порядке.
- Оффер — главное: что предлагают и чем это выгодно. Крупнее всего на баннере.
- Подтверждение — одна деталь, которая делает оффер правдоподобным: срок, цена «от», условие.
- Действие — что сделать дальше. Кнопка или короткий призыв.
Всё, что не влезает в эти три пункта, уходит на посадочную страницу. Перечень услуг, адрес, три телефона и логотипы партнёров на баннере 300×250 не прочитает никто — зато они гарантированно задавят оффер.
Как сделать оффер и кнопку заметными — подбор контраста, размер призыва, расположение — разобрано отдельно в статье про кликабельность веб-баннера. Здесь важно только одно: иерархия должна читаться даже на самом маленьком размере из комплекта.
Шаг 3. Мастер-макет и ресайзы
Комплект размеров собирают не масштабированием одной картинки, а раскладкой одних и тех же элементов под каждую пропорцию. Квадрат, высокий «небоскрёб» и узкая горизонтальная полоса — это три разные композиции, хотя слова и цвета в них одинаковые.
| Размер | Пропорция | Что в нём помещается |
|---|---|---|
| 300×250, 336×280 | почти квадрат | оффер, подтверждение, кнопка и изображение — полный набор |
| 240×400, 300×600 | вертикаль | то же, но изображение сверху, текст и кнопка ниже |
| 160×600 | узкая вертикаль | оффер крупно в несколько строк, кнопка внизу, минимум картинки |
| 728×90, 970×250 | широкая полоса | оффер в одну строку, кнопка справа; подтверждение часто не влезает |
| 320×50, 320×100 | мобильная полоса | только оффер и кнопка; логотип — если остаётся место |
Практическое правило: мастер-макет делают не в самом удобном размере, а проверяют сразу в самом тесном. Если оффер не читается в 320×50 или 728×90, его формулировку надо сокращать, а не шрифт уменьшать. Короткая фраза, которая работает в полосе, будет работать и в квадрате — наоборот не бывает.
Шаг 4. Безопасные поля
Площадки поверх баннера кладут свои элементы: пометку «Реклама», значок меню, кнопку закрытия, иногда скругляют углы или слегка подрезают края при адаптации. Всё важное — текст, логотип, кнопку — держат с отступом от краёв, а у края оставляют только фон и изображение, которые не жалко потерять.
Отдельно проверяют правый верхний угол: именно туда площадки чаще всего ставят служебные значки. Кнопка или цена в этом месте рискует оказаться под ними.
Шаг 5. Анимация: GIF или HTML5
Анимированный баннер заметнее статичного, но у него свои ловушки. Главная — первый кадр. Многие площадки и браузеры показывают сначала его, а иногда и только его: анимацию останавливают, если баннер вне экрана, или отключают в режиме экономии. Поэтому первый кадр должен быть самостоятельным баннером с оффером, а не заставкой перед ним.
- GIF — просто и принимается почти везде, но тяжелеет с каждым кадром и плохо передаёт плавные градиенты. Хорош для двух-трёх смен текста на простом фоне.
- HTML5 — лёгкая плавная анимация и чёткий текст на любом экране. Сдаётся архивом с кодом и ресурсами, и у каждой площадки свои требования к архиву и к тому, как передаётся ссылка перехода. Делать его имеет смысл, когда требования площадки известны заранее.
Шаг 6. Экспорт
- JPG — для баннеров с фотографией. PNG — для графики с чёткими краями, плоскими цветами и прозрачностью. Для баннеров на собственном сайте удобен WebP: при том же качестве он легче.
- Для сайта экспортируйте в двойном разрешении: на экранах с высокой плотностью пикселей баннер в «родном» размере выглядит мыльным.
- Вес проверяйте после экспорта, а не на глаз. Если файл не проходит по лимиту площадки, сначала упрощают фон и уменьшают число кадров анимации, и только потом снижают качество сжатия — пережатый текст на баннере сразу бросается в глаза.
- Текст на баннере — это картинка. Его не прочитает поиск и не увеличит человек с плохим зрением, поэтому всё действительно важное должно быть продублировано на посадочной странице.
Шаг 7. Маркировка рекламы
С 1 сентября 2022 года интернет-реклама в России маркируется: у креатива должна быть пометка «Реклама», сведения о рекламодателе и идентификатор креатива — erid. На крупных площадках вроде Директа и VK Рекламы пометку и доступ к сведениям показывает сама площадка, а идентификатор выдаётся при регистрации креатива.
Если баннер размещается напрямую на чужом сайте, в телеграм-канале или в рассылке, место под пометку и сведения о рекламодателе приходится закладывать в сам макет. Это ещё одна причина решать вопрос площадки на первом шаге: добавить строку в готовый тесный баннер 300×250 без потери оффера почти невозможно.
Шаг 8. Модерация
Баннер, который прошёл все предыдущие шаги, всё ещё может не пройти проверку площадки. Причины повторяются из кампании в кампанию:
- Имитация интерфейса: нарисованные кнопки «закрыть», системные уведомления, окна чата, курсор поверх картинки. Площадки считают это обманом пользователя.
- Оффер на баннере не совпадает с посадочной страницей: на баннере скидка, на сайте её не найти.
- Мелкий текст условий, который невозможно прочитать в реальном размере.
- Отдельные требования к тематикам — медицине, финансам, недвижимости: для них площадки могут запрашивать документы и дополнительные предупреждения на креативе.
Нужен макет под эту задачу?
Разберём задачу, предложим формат и подготовим файл, который типография примет без доработок. Веб-баннер — от 1 500 ₽, макет для печати и улицы — от 3 000 ₽, срок от 48 часов. Из чего складывается сумма — на странице с ценами по форматам.
Чек-лист перед отправкой
- Известен список площадок и размеров, а не один «основной» размер.
- Оффер формулируется одной фразой и читается в самом тесном формате комплекта.
- Важные элементы не заходят в края и в правый верхний угол.
- Первый кадр анимации работает сам по себе.
- Вес файлов проверен после экспорта и укладывается в лимит площадки.
- Решено, кто и где размещает пометку «Реклама» и сведения о рекламодателе.
- Оффер на баннере совпадает с тем, что человек увидит на посадочной странице.
Если на каком-то из пунктов нет уверенности — это ровно та часть работы, которую удобно отдать дизайнеру. Готовим комплект размеров под конкретные площадки, раскладываем композицию под каждую пропорцию и сдаём файлы, которые проходят модерацию с первого раза.
