Как сделать баннер для Ozon в Figma: от технических требований до дизайн-фишек

• 🎨 Цвета: сохраните палитру вашего бренда и цвета Ozon (#FF6B00 для акций, #1A1B22 для тёмного фона).
• 🔤 Шрифты: используйте PT Sans или Roboto — они лучше всего читаются на экранах.

Совет: если вы часто работаете с баннерами для Ozon, создайте в Figma шаблонный файл с заранее настроенными артбордами, стилями и направляющими. Это сэкономит до 30 минут на каждый новый баннер.

Создать артборды 1200×628 и 1080×1080|

Настроить безопасные зоны (50 px от краёв)|

Сохранить цветовую палитру бренда|

Добавить шрифты PT Sans/Roboto|

Проверить масштаб 100%-->

3. Композиция баннера: что работает на Ozon

Анализ топовых карточек на Ozon показывает: баннеры с чёткой иерархией элементов имеют CTR на 40% выше, чем перегруженные дизайны. Основные принципы:

• 👁️ "Правило 3 секунд": покупатель должен понять суть предложения за это время. Используйте не более 3-х ключевых элементов: товар, цену, уникальное торгового предложение (УТП).
• 🎯 Фокус на продукте: товар должен занимать не менее 60% площади баннера. Для Ozon критично показывать реальный вид продукта, а не абстрактные изображения.
• 🔴 Цветовые акценты: используйте не более 2-х ярких цветов. Например, оранжевый (#FF6B00) для скидок и зелёный (#00B637) для акций типа "Купи 2, заплати за 1".
• 📐 Зона внимания: самые важные элементы (цена, badge "Хит") размещайте в центральной части баннера — именно туда сначала смотрит пользователь.

Пример удачной композиции:

Ошибка 80% продавцов: они размещают логотип бренда в углу баннера. На Ozon это бесполезно — покупатели ищут товар, а не бренд (если только вы не Apple или Samsung). Логотип должен занимать не более 5% площади и не отвлекать от основного сообщения.

4. Работа с изображениями: как избежать блокировки

Ozon автоматически отклоняет баннеры с некачественными изображениями или нарушением правил. Главные требования к картинкам:

• 📸 Фон: должен быть белым (#FFFFFF) или прозрачным (PNG). Цветные фоны допускаются только если они часть брендбука (например, для Xiaomi или Dyson).
• 🔍 Чёткость: изображение товара должно быть в фокусе, без размытости. Минимальное разрешение — 800×800 px.
• 🚫 Запрещённые элементы:
  • Водяные знаки (кроме логотипа бренда размером до 5%)
  • Чужой товар в кадре (например, iPhone на баннере чехла)
  • Текст на изображении товара (например, наклейки на упаковке)
• 🎭 Реалистичность: Ozon блокирует баннеры с 3D-рендерами, если они выглядят нереалистично. Используйте только реальные фото или высококачественные рендеры (например, от Blender с текстурой 4K).

Как обработать изображение в Figma:

1. Импортируйте исходное фото в максимальном разрешении.
2. Используйте инструмент Mask (Ctrl+Alt+M), чтобы обрезать фон до белого.
3. Примените фильтр Sharpen (вкладка Effects), если изображение слегка размыто.
4. Для товаров с отражениями (например, стекло, металл) добавьте лёгкую Drop Shadow (Opacity: 10%, Blur: 5 px).

5. Текст на баннере: шрифты, размеры, ошибки

Текст на баннере должен быть кратким и контрастным. Исследования Ozon показывают, что баннеры с текстом до 7 слов имеют на 25% выше конверсию, чем перегруженные надписями.

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

• 🔤 Шрифты: используйте PT Sans Bold (для заголовков) и Roboto Regular (для описаний). Избегайте декоративных шрифтов — они плохо читаются на мобильных экранах.
• 📏 Размеры:
  • Заголовок: 40-50 pt (не более 2 строк)
  • Цена: 32-40 pt (выделяйте оранжевым цветом)
  • Дополнительный текст: 16-20 pt (серый цвет, #6C757D)
• 🎨 Контраст: текст должен отличаться от фона не менее чем на 70% по шкале контрастности (проверяется в Figma через плагин Contrast Checker).
• 🚫 Запрещёно:
  • Текст в виде изображения (должен быть живым текстом для SEO).
  • Злоупотребление восклицательными знаками (!!!).
  • Мелкий текст (менее 16 pt) — его не видно на мобильных.

Пример удачного текстового блока:

"[БЕСПЛАТНАЯ ДОСТАВКА]
Смартфон Xiaomi Redmi Note 12
19 990 ₽  22 990 ₽
⭐ 4.8 (1 234 отзыва)"

Ошибка: многие продавцы копируют описание товара с карточки на баннер. Это бесполезно — покупатель и так видит текст под баннером. Текст на баннере должен дополнять визуал, а не дублировать его.

6. Экспорт и проверка баннера перед загрузкой

Даже идеальный дизайн в Figma может испортиться при экспорте. Следуйте этому чеклисту:

1. Проверьте цвета:
   • Откройте экспортированный файл в любом графическом редакторе (например, Preview на Mac или Photos на Windows).
   • Убедитесь, что цвета совпадают с оригиналом в Figma (иногда при конвертации в JPEG появляется цветовой сдвиг).
2. Оптимизируйте вес:
   • Используйте сервис TinyPNG для сжатия без потери качества.
   • Для PNG выбирайте PNG-8 (если нет градиентов) или PNG-24 (для фотографий).

• Откройте баннер на смартфоне и проверьте, читается ли текст без масштабирования.
• Убедитесь, что важные элементы (цена, кнопка "Купить") не попадают под палец при скролле.

Критическая ошибка: многие продавцы загружают баннеры в Ozon без предварительного теста в инструменте предпросмотра (Товары → Предпросмотр карточки). Это приводит к тому, что на мобильной версии обрезается часть текста или товар выглядит неполноценно.

7. Частые причины блокировки баннеров и как их избежать

Ozon блокирует около 15% баннеров в день по разным причинам. Вот топ-5 ошибок и как их исправить:

Если ваш баннер заблокировали, не паникуйте: Ozon всегда присылает причину на email. Чаще всего проблема решается за 10 минут правок в Figma. Главное — не игнорировать требования, иначе аккаунт могут ограничить в загрузке изображений.

⚠️ Внимание: Ozon начал тестировать систему автоматической проверки баннеров на "кликабельность" с помощью ИИ. Если ваши баннеры имеют CTR ниже 0.5% в течение 7 дней, система может понизить их приоритет в выдаче. Решение: обновляйте дизайн каждые 2-3 недели, добавляя новые УТП или акционные элементы.

8. Продвинутые фишки для увеличения CTR

Чтобы ваш баннер выделялся, используйте эти приёмы (они работают даже в конкурентных категориях):

• 🔥 Анимация (для Premium-аккаунтов):
  • Ozon поддерживает GIF-баннеры для продавцов с рейтингом выше 4.8.
  • Создайте в Figma 3-5 кадров с плавными переходами (например, мигающая цена или смена цвета фона).
  • Экспортируйте в GIF с частотой 1 кадр/секунду и весом до 3 МБ.
• 📊 A/B-тестирование:
  • Загрузите 2 варианта баннера (например, с разными УТП) через Инструменты → A/B-тесты.
  • Ozon автоматически покажет более эффективный вариант через 3 дня.
• 🎯 Персонализация:
  • Используйте плагин Dynamic Content для Figma, чтобы создавать баннеры с динамической скидкой (например, "Скидка 15% именно для вас").
  • Это увеличивает CTR на 12-18% по данным Ozon.

Пример: магазин электроники увеличил продажи на 37% после добавления на баннер таймера обратного отсчёта ("Акция заканчивается через 02:15:42"). Такой элемент создаётся в Figma как отдельный слой с эффектом Blur для реалистичности.