Рекомендации для баннеров на главной странице

Данные рекомендации разработаны на основе анализа более 1000 баннеров, представленных к размещению на главной странице Яндекса. Соблюдение рекомендаций повышает вероятность того, что баннер будет принят к размещению при первой проверке службой модерации.

Качество баннеров проверяется для следующих разрешений: Mac OS — 1440x900 px, Windows — 1366x768 px.

На текущий момент составлены рекомендации для полной версии сайта.

Полная версия сайта

Комплект рекламных материалов

Для каждого типа баннера необходимо предоставить отдельный комплект материалов:

HTML5-баннер
  1. HTML5-HiDPI-баннер, который соответствует требованиям. Максимальный вес баннера — 150 КБ. При масштабировании страницы в браузере до 200%, на баннере не должно быть артефактов и искажений.
  2. Базовая картинка-заглушка размером 728x90. Максимальный вес картинки — 150 КБ.
  3. Вторая картинка-заглушка размером 1456x180 без артефактов и искажений в тексте/картинках. Максимальный вес картинки — 600 КБ.
  4. В теге <meta/> укажите размер баннера следующим образом:
    <meta name="ad.size" content="width=728,height=90">
Баннер-изображение/графический баннер
  1. Графический баннер-изображение размером 728x90. Максимальный вес баннера — 150 КБ.
  2. Второй графический баннер-изображение размером 1456x180 без артефактов и искажений в тексте/картинках. Максимальный вес баннера — 600 КБ.
Внимание.

Не забудьте ознакомиться с общими техническими требованиями для баннерной рекламы.

Рекомендации по оформлению баннеров

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

  1. Основные рекомендации
  2. Дополнительные рекомендации

Основные рекомендации

Шрифт текста
  1. Шрифт на баннере не должен превышать высоту и ширину заглавной буквы «Ф» шрифта «Arial Bold» 36 pt (т. е. высоту и ширину квадрата со сторонами 26 px) для одной строки; для двух строк — шрифт 25 pt (квадрат со сторонами 20 px); для трех строк — шрифт 20 pt (квадрат со сторонами 15 px).
  2. Минимальный размер шрифта — 11 pt (в логотипах, сообщении, иллюстрациях, дисклеймерах). Исключение — фото упаковок, фото товаров и снимки экранов.
Расположение текста

Расстояние от края баннера до текста должно быть не меньше 10 px.

Примечание.

Данное требование не относится к расположению возрастной метки.

Размер логотипа

Логотип (бренда, продукта, технологии) должен занимать не больше 10% площади всего баннера.

Цвет фона

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

Обязательная рамка

По всему контуру баннера должна быть рамка, контрастная фону баннера в любом месте соприкосновения. Толщина рамки — 1px. Наиболее подходящий цвет — #dadada.

Длительность анимации
  1. Баннер или его отдельные элементы не должны мигать, отвлекая пользователя от взаимодействия со страницей.
  2. Допустимая частота смены элементов на баннере — не чаще одного раза в две секунды.
  3. Анимация в баннере может быть реализована только циклично. Длительность одного цикла анимации — не больше 18 секунд, перерыв между циклами — не меньше 60 секунд.
Читаемость обязательной информации

Обязательная правовая информация (например, название банка в ОПФ, сроки акции и т. д.) должна быть четко видна сразу, без взаимодействия пользователя с баннером.

Элементы интерфейса на баннере
  1. Баннер не должен маскироваться под элементы пользовательского интерфейса — например, под системное окно Windows.
  2. Баннер не должен содержать стандартные элементы пользовательского интерфейса (курсор, поисковая строка, различные кнопки и другие элементы), которые не выполняют соответствующие функции.

Возрастная метка

Если на баннере необходима возрастная метка, то:

  1. Возрастную метку нужно ставить в верхнем правом углу баннера.
  2. Шрифт метки — «Arial regular» 12 px.
  3. Цвет метки — #dadada.
    Примечание.

    Если метка серого цвета не читается, например, из-за контрастного фона, под нее следует поставить белую подложку.

Размер бейджа магазина приложений

Размер бейджа (для баннера формата 728x90 px) должен быть не больше 110x33 px.

Дополнительные рекомендации

Читаемость шрифта

90% отказов при прохождении модерации случаются из-за плохой читаемости шрифта.

  1. Не используйте дробные координаты при выравнивании шрифта в HTML5-исходниках, чтобы не появился эффект «размытости».
  2. В большинстве случаев нужно использовать векторные шрифты и текстовые блоки.
    Совет.

    Если использовать векторный шрифт невозможно, сохраняйте растровые текстовые блоки в максимально хорошем качестве (с учетом ограничений по весу баннера).

  3. В некоторых случаях шрифт в векторном формате также содержит эффект «размытости».

    Это может происходить по нескольким причинам:

    • Маленький размер

    • Сложная форма шрифта (например, с засечками)

    • Шрифт не адаптирован для использования в вебе или он изначально разработан для заголовков и крупных кеглей

    Решить проблему «размытости» шрифта, в том числе и в векторном формате, можно несколькими способами:
    • Увеличьте кегль шрифта

    • Замените шрифт на более простой

    • Используйте шрифт, адаптированный для веба и маленьких кеглей

Не используйте эффекты и украшательства

Украшательство шрифтов и плашек (тень, обводка, объем/выдавливание) может усложнить восприятие сообщения.

Уменьшите количество шрифтов
  1. Используйте не больше двух шрифтов и начертаний.
  2. Используйте не больше трех цветов в шрифтах.
Эти два требования не относятся к:
  • логотипу бренда, технологии или продукту;
  • дисклеймеру или обязательной правовой информации;
  • шрифту возрастной метки;
  • шрифту, который является частью иллюстрации.

Не используйте изображения/фото низкого качества
  1. С артефактами из-за сжатия файла

  2. С размытием или чрезмерной четкостью

Выберите главное

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

Не мельчите
  1. Не используйте маленькие изображения объектов с большим количеством мелких деталей.

  2. Не используйте фото в качестве фона для баннера, если на нем много мелких деталей или контрастные цвета.

Обязательная информация

Текст должен быть контрастным и легко читаемым. Минимальный размер шрифта — 11 px.

Возможные варианты оформления:

Автоскроллинг с возможностью ручной прокрутки
Обязательная информация (например, название банка в ОПФ, сроки акции и т. д.) должна быть видна без взаимодействия пользователя с баннером.

Разделение на кадры
Обязательная информация размещается отдельно на разных кадрах:
  • сроки акции — на первых кадрах;
  • остальная информация (обязательная для клиента) — размещается под плашкой «юридическая информация» и доступна по наведению курсора.
Внимание.

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

Фиксация на несколько секунд и управление паузой
Кадр с обязательной информацией (указаны названия банков в ОПФ) отображается не менее трех секунд. У пользователя должна быть возможность нажать на паузу и ознакомиться с остальной информацией. Если пользователь не нажал на паузу, анимация в баннере продолжается.

Фиксация и наведение курсора
Правовая информация отображается не менее трех секунд, а также доступна далее по наведению курсора.