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

Основные требования по оформлению баннеров

Все размеры указаны для формата 640 × 134. Для формата 320 × 67 размеры должны быть вдвое меньше. На странице представлены уменьшенные иллюстрации. Чтобы посмотреть их в большем размере, Скачайте архив.

  1. Шрифт текста
  2. Расположение текста
  3. Размер логотипа
  4. Цвет фона
  5. Рамка
  6. Длительность анимации
  7. Читаемость обязательной информации
  8. Элементы интерфейса на баннере
  9. Возрастная метка
  10. Кнопка/бейдж магазина приложений

Шрифт текста

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

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

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

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

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

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

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

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

Примечание.

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

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

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

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

Цвет фона

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

Рамка

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

В другом случае необходимо добавить контрастные границы толщиной в 1 пиксель по горизонтали (сверху и снизу). Наиболее подходящий цвет — #DADADA.

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

  1. Баннер или его отдельные элементы не должны мигать, отвлекая пользователя.

  2. Допустимая частота смены элементов на баннере — не чаще 1 раза в 2 секунды.

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

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

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

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

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

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

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

  1. Его нужно ставить в верхнем правом углу баннера.
  2. Шрифт — «Arial Regular» 12 пунктов.
  3. Цвет — #DADADA.
    Примечание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. С артефактами сжатия

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

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

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

Не мельчите

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

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

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

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

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

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

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

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

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

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