Дизайнеры eLama каждый месяц готовят сотни рекламных баннеров. Чтобы ускорить работу с ресайзами, они придумали шаблон, который сохраняет не только время, но и разнообразие в креативах. Что помогло усидеть на двух стульях, рассказывает дизайнер eLama Анжелика Беседина.

В месяц отдел маркетинга eLama запускает 10–13 рекламных кампаний с баннерами для продвижения новых рекламных систем в сервисе, инструментов, спецпредложений, бесплатных вебинаров и других продуктов. А мы в отделе дизайна готовим визуал для кампаний в РСЯ, ВКонтакте и других каналах.

Для каждой кампании мы делаем 2–5 уникальных креативов и около 10–30 ресайзов — баннеров разного размера. Итого получается от 200 до 600 баннеров для разных кампаний в месяц.

Примеры баннеров с ресайзами
Набор баннеров с ресайзами к одной кампании

Помимо времени на создание основного креатива, мы тратим 1-1,5 часа на ресайзы. Мы работаем в Figma и, чтобы сократить время на работу с ресайзами, решили сделать шаблон.

Идея была в следующем: мы делаем типовой баннер с ресайзами к нему, а потом каждый раз при работе над задачами берем его за основу, меняем только тексты, цвета и изображение и получаем баннеры разных размеров.

Однако мы сразу столкнулись с проблемой. Как правило, наши баннеры довольно серьезно отличаются друг от друга: цветами, количеством текста, изображениями и дополнительными элементами. Мы хоть и создаем их по брендбуку, чтобы соблюдать единую стилистику, но всё же они получаются уникальными.

Примеры разнообразных баннеров
Примеры баннеров, которые похожи только размером, остальные их элементы и характеристики — цвета, тексты, изображения, плашки и их расположение — отличаются

С единым шаблоном, который бы ускорил нашу работу, мы рисковали потерять эту уникальность, ведь тогда нам бы пришлось готовить баннеры, подходящие под один-единственный шаблон с одинаковым набором элементов и расположением. А это точно скажется на эффективности рекламы: аудитория перестает замечать однотипные объявления и реагировать на них.

Получить профессиональный креатив реально без дизайнера — в конструкторе SUPA можно создать эффективный баннер или даже видеоролик самостоятельно по настроенным шаблонам. А с eLama это будет еще и бесплатно: мы оплачиваем работу клиентов со всеми инструментами, доступными на маркетплейсе в личном кабинете. Кроме SUPA, там вы найдете SpyWords, SMMplanner, инструменты для построения сквозной аналитики и другие полезные для бизнеса сервисы.

Узнать больше о маркетплейсе →

Создаем шаблон на любой случай

Мы изучили решения коллег из других компаний, несколько раз пересобирали шаблон в Figma и обсуждали его внутри команды и в итоге пришли к решению, благодаря которому теперь работаем быстрее и сохраняем уникальность креативов. Мы не встречали ничего подобного в интернете, поэтому делимся своим решением.

  1. Чтобы создать шаблон в Figma, мы прибегли к компонентам. Материнским компонентам задали основные элементы, которые используем в креативах: фон, изображение, основной заголовок, подзаголовок, текст на плашке. И отдельным элементом задали плашку под текстом — чтобы при необходимости выделить какую-то фразу.

    Работа с компонентами
  2. Задали еще один компонент из автолейаута, состоящий из основных элементов, которые, в свою очередь, тоже компоненты. Это позволило нам не ограничиваться неизменным расположением элементов на баннерах, ведь положение текстов, изображений и остальных составляющих часто меняется.

    Добавление автолейаута
  3. Дальше из этих компонентов создали шаблон со всеми необходимыми размерами.

    Подготовка шаблона ресайзов
Конструкторы изображений, видео и визуала

Что в итоге: меньше рутины, больше времени на поиск идей

Благодаря компонентам стало удобнее изменять контент и стилистику во всех ресайзах. С помощью автолейаута мы можем менять местами элементы и настраивать отступы. А так как автолейаут сам по себе компонент, то вносить изменения в расположении элементов легко на всех форматах креатива.

Корректировка баннеров через шаблон

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

Работа с отдельными элементами

Бывало, что привязка к автолейауту ограничивает дизайнерский процесс. Но как нельзя кстати в Figma появилась функция Absolute position, которая открепляет элемент от привязки к автолейауту, но при этом оставляет элемент во фрейме — то есть в компоненте.

Функция Absolute position
Работа с Absolute position
С помощью Absolute position меняем наклон у элемента и его расположение на баннере

Изменение угла наклона
Таким же образом с Absolute position можно быстро изменить угол наклона и расположение на всех ресайзах

Благодаря Absolute position можно поворачивать элементы и располагать их в любом месте. Это позволяет сделать баннеры, например с плашкой с текстом, и в пару кликов поворачивать ее на всех ресайзах.

Работа с элементами
Ресайзы баннера

В итоге с помощью шаблона мы сократили время на подготовку баннеров для рекламных кампаний в 2–3 раза и теперь на ресайзы одного креатива тратим от 15 до 25 минут. А освободившееся время посвящаем работе над самим креативом — делаем его лучше и оригинальнее — или переключаемся на другие задачи, например, на визуал для лендингов, соцсетей, презентаций и поиск референсов для них.

Telegram Ads
Партнерская программа
Скидка до 10% на WOWBlogger
Маркетплейс
Биржа услуг
Маркировка
РК по акции Директ