Мобильная версия сайта

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

Шрифт текста

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

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

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

Примечание.

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

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

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

Пример хорошего баннера в увеличенном виде:

Цвет фона

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

Рамка

Рамка может быть только по горизонтальным границам баннера.

Если нет белых элементов, которые пересекают край баннера, или цвет фона отличается от белого, то допускается отсутствие рамки.

Если есть белые элементы, которые пересекают край баннера, или цвет фона баннера белый, то необходимо добавить контрастную рамку 1 px по горизонтали (сверху и снизу). Наиболее подходящий цвет рамки — #dadada.

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

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

Читаемость обязательной информации

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

Пример хорошего баннера в увеличенном виде:

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

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

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

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

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

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

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

  1. Максимальные размеры кнопки/бейджа: высота — 50px, ширина — 150 px.
  2. Не рекомендуется использовать желтый цвет для кнопки, так как этот цвет используется в стандартных элементах дизайна страниц Яндекса. Допустимый желтый цвет — #f0e5ad и светлее.
  3. К бейджу магазина приложений предъявляются такие же требования, как к логотипам.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. С артефактами из-за сжатия файла

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

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

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

Не мельчите

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

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

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

  1. Текст должен быть контрастным и легко читаемым. Минимальный размер шрифта — 11 pt.
  2. Анимация в баннере может быть реализована только циклично. Длительность одного цикла анимации — не больше 18 секунд, перерыв между циклами — не меньше 60 секунд.
    Внимание.

    Второй пункт актуален только для полной версии сайта.

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

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

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

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

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

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