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

Шрифт

  1. Высота шрифта на баннере должна быть не больше:
    • 140 пикселей, если текст занимает не больше 10% баннера;

    • 104 пикселя, если текст занимает не больше 15% баннера;

    • 88 пикселей, если текст занимает не больше 25% баннера;

    • 64 пикселя, если текст написан в одну строку;

    • 40 пикселей, если текст написан в две строки;
    • 30 пикселей, если текст написан в три строки.

  2. Минимальный размер шрифта для логотипов, сообщений, иллюстраций, предупреждений — 22 пикселя. Исключение — фотографии упаковок и товаров, а также снимки экранов.

Расположение текста

Расстояние от края баннера до текста должно быть не меньше 20 пикселей. Текст и элементы баннера не должны располагаться в сейфзонах.

Размер сейфзон:

  • метка — 60 × 20;
  • три точки — 42 × 42.
На примере сейфзоны выделены красным:

Цвет фона

Не рекомендуется использовать:
  1. Текст на слишком пестром фоне с мелкими элементами. Текст должен быть контрастным по отношению к фону и легко читаемым.
  2. Желтый фон, так как этот цвет применяется для стандартных элементов дизайна страниц Яндекса. Допустимый желтый цвет — #F0E5AD и светлее.

Длительность анимации

  1. Баннер или его отдельные элементы не должны мигать, отвлекая пользователя.
  2. Допустимая частота смены элементов на баннере — не чаще 1 раза за 2 секунды.
  3. На стоп-кадре баннер должен отображать основную информацию рекламного сообщения.
  4. В HTML5-баннере может быть добавлена управляющая кнопка Посмотреть еще раз, нажатие на которую приводит к повторному запуску сценария. Сам HTML5-баннер может быть интерактивным и реагировать на движение курсора мыши или нажатие на баннер, изменяя изображение в зависимости от действия.

Элементы интерфейса на баннере

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

Возрастное ограничение

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

  1. Рекомендуем размещать в правом нижнем углу баннера.
  2. Шрифт — Arial Regular, 24 пункта.
  3. Цвет — #DADADA.
    Примечание.

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

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

  1. Максимальные размеры кнопки или бейджа: высота — 80 пикселей, ширина — 280 пикселей.
  2. Не рекомендуется делать кнопку или бейдж желтыми, так как этот цвет применяется для стандартных элементов дизайна страниц Яндекса. Допустимый желтый цвет — #F0E5AD и светлее.
  3. Расстояние от края баннера до кнопки должно быть не меньше 20 пикселей.
  4. К бейджу магазина приложений предъявляются такие же требования, как к логотипу.

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

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

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

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

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

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

    Эффект может появиться по нескольким причинам:

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

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

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

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

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

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

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

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

Уменьшите количество шрифтов

  1. Используйте не больше двух шрифтов и начертаний.
  2. Используйте не больше трех цветов в шрифтах.
Эти два