Рекомендации по оформлению
На странице представлены рекомендации по оформлению баннера. Обратите внимание, что иллюстрации в уменьшенном размере.
- Шрифт
- Расположение текста
- Размер логотипа
- Цвет фона
- Длительность анимации
- Элементы интерфейса на баннере
- Возрастное ограничение
- Кнопка или бейдж магазина приложений
- Дополнительные рекомендации
- Читаемость шрифта
- Не используйте эффекты и украшательства
- Уменьшите количество шрифтов
- Не используйте изображения/фото низкого качества
- Выберите главное
- Не мельчите
- Не используйте текстовые баннеры
- Оформление обязательной юридической информации
- Остались вопросы?
Шрифт
- Высота шрифта на баннере должна быть не больше:
140 пикселей, если текст занимает не больше 10% баннера;
104 пикселя, если текст занимает не больше 15% баннера;
88 пикселей, если текст занимает не больше 25% баннера;
64 пикселя, если текст написан в одну строку;
- 40 пикселей, если текст написан в две строки;
- 30 пикселей, если текст написан в три строки.
- Минимальный размер шрифта для логотипов, сообщений, иллюстраций, предупреждений — 22 пикселя. Исключение — фотографии упаковок и товаров, а также снимки экранов.
Расположение текста
Расстояние от края баннера до текста должно быть не меньше 20 пикселей. Текст и элементы баннера не должны располагаться в сейфзонах.
Размер сейфзон:
- метка — 60 × 20;
- три точки — 42 × 42.

Размер логотипа
Логотип бренда, продукта или технологии должен занимать не больше 28% площади баннера.
Цвет фона
- Текст на слишком пестром фоне с мелкими элементами. Текст должен быть контрастным по отношению к фону и легко читаемым.
- Желтый фон, так как этот цвет применяется для стандартных элементов дизайна страниц Яндекса. Допустимый желтый цвет — #F0E5AD и светлее.
Длительность анимации
- Баннер или его отдельные элементы не должны мигать, отвлекая пользователя.
- Допустимая частота смены элементов на баннере — не чаще 1 раза за 2 секунды.
- На стоп-кадре баннер должен отображать основную информацию рекламного сообщения.
- В HTML5-баннере может быть добавлена управляющая кнопка Посмотреть еще раз, нажатие на которую приводит к повторному запуску сценария. Сам HTML5-баннер может быть интерактивным и реагировать на движение курсора мыши или нажатие на баннер, изменяя изображение в зависимости от действия.
Элементы интерфейса на баннере
- Баннер не должен маскироваться под элементы пользовательского интерфейса — например, под системное окно Windows.
- Баннер не должен содержать стандартные элементы пользовательского интерфейса (курсор, поисковая строка, различные кнопки и т. п.), которые не выполняют соответствующие функции.
- Не следует использовать желтый в элементах интерфейса, так как этот цвет применяется для стандартных элементов дизайна страниц Яндекса. Допустимый желтый цвет — #F0E5AD и светлее.
Возрастное ограничение
Если на баннере необходимо возрастное ограничение, то:
- Рекомендуем размещать в правом нижнем углу баннера.
- Шрифт — Arial Regular, 24 пункта.
- Цвет — #DADADA.Примечание.
Если ограничение серого цвета не читается, например из-за пестрого фона, его следует разместить на белой подложке.
Кнопка или бейдж магазина приложений
- Максимальные размеры кнопки или бейджа: высота — 80 пикселей, ширина — 280 пикселей.
- Не рекомендуется делать кнопку или бейдж желтыми, так как этот цвет применяется для стандартных элементов дизайна страниц Яндекса. Допустимый желтый цвет — #F0E5AD и светлее.
- Расстояние от края баннера до кнопки должно быть не меньше 20 пикселей.
- К бейджу магазина приложений предъявляются такие же требования, как к логотипу.
Дополнительные рекомендации
Читаемость шрифта
90% отказов при прохождении модерации случаются из-за плохой читаемости шрифта.
- Лучше отказаться от дробных координат при выравнивании шрифта в HTML5-баннере, чтобы избежать эффекта «размытости» (требуется проверка во всех популярных браузерах).
- Рекомендуется использовать векторные шрифты.Совет.
Если использовать векторный шрифт невозможно, сохраните растровые текстовые блоки в максимально хорошем качестве (с учетом ограничений по размерам баннера).
- В некоторых случаях шрифт в векторном формате также содержит эффект «размытости».
Эффект может появиться по нескольким причинам:
- маленький размер
- сложная форма шрифта (например, с засечками)
- шрифт не адаптирован для использования в вебе или изначально разработан для заголовков и крупных кеглей
Решить проблему «размытости» шрифта, в том числе и в векторном формате, можно несколькими способами:- увеличить кегль шрифта
- заменить шрифт на более простой
- использовать шрифт, адаптированный для веба и маленьких кеглей
Не используйте эффекты и украшательства
Украшательство шрифтов и плашек (тень, обводка, объем) может усложнить восприятие сообщения.
Уменьшите количество шрифтов
- Используйте не больше двух шрифтов и начертаний.
- Используйте не больше трех цветов в шрифтах.