Работа с текстом
Располагайте текст только в безопасной зоне баннера или обложки — то есть с отступами от краёв изображения — на примерах ниже она обозначена зелёным прямоугольником. Так текст не будет обрезаться на разных устройствах и будет правильно отображаться для всех пользователей.
Не перегружайте текстом элементы бренд-зоны
Так ваши обложка и баннеры будут выглядеть аккуратнее, текст — легко читаемым на любых экранах, а пользователям будет проще понять основную информацию.
Рекомендуем использовать:
короткий и понятный заголовок;
крупный и хорошо читаемый шрифт;
не больше одной дополнительной строки текста.
Не нужно:
размещать длинные описания;
использовать большое количество текста;
применять несколько разных стилей текста одновременно.
Проверьте, что текст хорошо читается
Текст должен хорошо читаться на фоне изображения. Если изображение яркое, пёстрое или содержит много деталей, текст может сливаться с фоном и становиться трудным для восприятия. Чтобы этого избежать, используйте:
полупрозрачную подложку под текст;
дополнительный контраст между фоном и текстом;
затемнение изображения в области размещения текста;
однотонные или недетализированные участки изображения для размещения текста.
Не рекомендуем использовать под текст крупные непрозрачные подложки, потому что они:
перегружают баннер;
закрывают изображение;
могут ухудшить визуальное восприятие.
Примеры оформления текста в элементах бренд-зоны
Работа с обложкой
Обложка — это верхнее изображение, которое встречает всех пользователей, открывших вашу страницу. Поэтому важно, чтобы обложка правильно отображалась на всех устройствах.
Как разместить элементы в обложке
Расположите в безопасной зоне текст, логотип, ключевую информацию, важные части товаров или объектов. По краям — фон, узоры, декоративные или второстепенные части изображения.
Для компьютеров и ноутбуков
Загрузите изображение 3 200x1 200 px, где:
безопасная зона 2 048х964;
остальная зона — область, которая может обрезаться или перекрываться навигационными элементами страницы.
Для планшетов и смартфонов
Загрузите изображение: 2 046x1 152 px, где:
безопасная зона 750х920;
остальная зона — область, которая может обрезаться или перекрываться навигационными элементами страницы.
Работа с баннерами
Баннеры — это изображения, которые помогают рассказывать о товарах, акциях или коллекциях внутри бренд-зоны. Баннеры можно публиковать в одиночном варианте и в ряд из двух или трёх позиций.
Если изменить ширину экрана устройства, изображения на баннерах подстраиваются под размер устройства пропорционально и без искажений. Если уменьшить экран — текст и мелкие детали в баннере также станут меньше. Поэтому важно размещать контент правильно.
Как разместить элементы в баннере
Расположите в безопасной зоне текст, логотип, ключевую информацию, важные части товаров или объектов. По краям — фон, узоры, декоративные или второстепенные части изображения.
Одиночный баннер
Два баннера в ряд
Три баннера в ряд
Разрешение
Для компьютеров и ноутбуков — 2 880x1 236 px
Для планшетов и смартфонов — 1 536x788 px
1 432x1 432 px
948x1 400 px
Безопасная зона
Для компьютеров и ноутбуков — 2 640x996 px
Для планшетов и смартфонов — 1 392x644 px
1 232x1 212 px
748x1 180 px
Минимальные отступы
Для компьютеров и ноутбуков — не менее 120 px от краёв загружаемого изображения
Для планшетов и смартфонов — не менее 72 px от краёв загружаемого изображения
снизу не менее 120 px, а слева, сверху и справа — 100 px от краёв загружаемого изображения
снизу не менее 120 px, а слева, сверху и справа — 100 px от краёв загружаемого изображения
Примеры расположения контента на баннерах
Для одиночного баннера на компьютерах и ноутбуках.
Для одиночного баннера на планшетах и смартфонах.
Для двух баннеров в ряд.
Для трёх баннеров в ряд.
На смартфоне баннеры объединяются в один, а снизу появляется элемент навигации с затемнением. Учитывайте это при расположении текста, чтобы он не попал под затемнение.