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

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

Шрифт текста

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

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

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

Примечание.

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

Цвет фона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не мельчите

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

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

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

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

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

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

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

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

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

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

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