---
source: https://yandex.ru/support/direct/ru/fixed-cpm-campaigns/products-frontpage/full-version
---


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

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

### Шрифт

1. Высота шрифта на баннере должна быть не больше:

   - 140 пикселей, если текст занимает не больше 10% баннера;
   - 104 пикселя, если текст занимает не больше 15% баннера;
   - 88 пикселей, если текст занимает не больше 25% баннера;
   - 64 пикселя, если текст написан в одну строку;
   - 40 пикселей, если текст написан в две строки;
   - 30 пикселей, если текст написан в три строки.
2. Минимальный размер шрифта для логотипов, сообщений, иллюстраций, предупреждений — 22 пикселя. Исключение — фотографии упаковок и товаров, а также снимки экранов.

### Расположение текста и элементов баннера

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

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

- метка — 70 × 30;
- три точки — 42 × 42.


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

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

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

### Цвет фона

Не рекомендуется использовать:

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. Используйте не больше трех цветов в шрифтах.

Эти два требования не относятся к:

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

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

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

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

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

#### Не мельчите

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

#### Оформление обязательной юридической информации

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

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

Автоскроллинг с возможностью ручной прокрутки

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

Разделение на кадры

Обязательная информация размещается отдельно на разных кадрах:

- сроки акции — на первых кадрах;
- остальная информация — под плашкой «юридическая информация» и доступна по наведению курсора.

Внимание

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

Фиксация на несколько секунд и управление паузой

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

Фиксация и наведение курсора

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