За маркетинг и двор стреляю в упор!

Что включить в дизайн рассылок банков, недвижимости, ecommerce

Для чего нужен мастер-шаблон

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

При подготовке мастер-шаблона всегда возникают два вопроса: «Какие именно блоки добавить?» и «Какую информацию запросить у клиента?». В этой статье я на них отвечу: поделюсь списком вопросов, который мы отправляем клиенту, и разберу, что включать в мастер-шаблон для нескольких сфер: банков, недвижимости, интернет-магазинов. Так что полезно будет и дизайнерам, и менеджерам.

Что запросить у клиента для мастер-шаблона

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

Ниже список с вопросами, которые мы задаём. Вы можете скопировать его и прямо так отправлять клиентам.

  1. Ссылку на сайт (были случаи, когда домены конкурентов отличались на одну букву).
  2. Брендбук.
  3. Логотип в векторе или в хорошем разрешении (чтобы адаптировать письмо под ретину).
  4. Фирменный шрифт (он не всегда есть в свободном доступе);
  5. Фото и любые графические материалы — паттерны, наборы иконок. Бывает, клиент хочет сохранить паттерн на фоне письма, у него есть свои иконки или он может использовать только фотографии бренда.
  6. Старые шаблоны писем (это поможет дизайнеру определиться с наполнением письма и стилем и улучшить то, что было до этого).
  7. Референсы, которые нравятся клиенту (поможет дизайнеру определиться со стилем).
  8. Пункты меню, которые должны быть в письмах (оптимально 4-6).
  9. Надо ли в письмах ориентироваться на дизайн сайта? Планируются ли какие-то обновления?
  10. Какие типы писем планируете отправлять? Например, письма с брошенными корзинами, приветственные, промо с товарами, дайджест, опрос, поздравления с праздником и т.д. От этого зависит, какие блоки нужно сделать.
  11. Какие виды сеток нужны? Например, две, три или четыре колонки, нестандартное расположение.
  12. Планируется ли динамический контент? Если нет, мы сможем добавить плашки со скидкой на картинку товара в сетке или оформить сетку нестандартно.
  13. Какие категории товаров использовать в шаблоне? Нужно ли вообще разделение по категориям?
  14. Планируете ли использовать в письме гиф?
  15. Нужен ли NPS-опрос?
  16. Нужен ли блок с иконками? Обычно его используют, чтобы описать преимущества.
  17. Какая информация будет в футере?
  18. Нужен ли номер телефона в шаблоне? Если да, то где именно — в хедере, футере или и там, и там? Нужна ли около номера информация о том, куда и в какое время звонить?
  19. Ссылки на соцсети и мобильное приложение.

Читайте также

Чек-лист для дизайнера: что проверить в макете перед сдачей

Универсальные блоки в мастер-шаблоне

Дальше мы начинаем собирать блоки. Часть из них универсальна, то есть нужна по умолчанию в любом мастер-шаблоне. К ним относятся:

  1. Прехедер. В прехедере находится ссылка на веб-версию письма. Она нужна на случай, если в письме не отобразятся изображения.
  2. Хедер. Обычно в нём располагается логотип компании с ссылкой на основной сайт или тематическую страницу, иногда контактную информацию и меню.
  3. Главный баннер для анонса инфоповода.
  4. Текстовый блок для описания инфоповода.
  5. СТА (Call To Action), то есть кнопка с призывом к действию.
  6. Футер. В этом блоке находятся ссылки на соцсети и мобильные приложения, копирайты, отписка от рассылки, контактные телефоны, адрес офиса.

Подробно о структуре писем мы рассказывали в статье «Дизайн емейл-рассылок: полная инструкция».

Контентная часть

Контентная часть — самая сложная. Прежде, чем приступить к дизайну, надо разобраться, какие блоки понадобятся клиенту для разных типов писем. Понятно, что футер и кнопки будут в любом письме. Но нужна ли ему товарная сетка? А описательный блок? Чтобы ответить на эти вопросы, надо разобраться в бизнесе клиента: изучить его преимущества, оценить фирменный стиль и предыдущие рассылки.

На этом этапе маркетолог и дизайнер работают сообща и начинают собирать информацию.

  1. Смотрим сайт, брендбук и прошлые рассылки, чтобы понять, как себя позиционирует бренд.
  2. Определяем целевую аудиторию клиента, чтобы адаптировать дизайн под нужный сегмент. Грубо говоря, молодой аудитории — тренды и смелые решения, старшему поколению — сдержанное и консервативное.
  3. Проводим интервью с клиентом и учитываем его пожелания.
  4. Смотрим, что именно компания предлагает клиентам и какой контент создаёт.

Разберёмся на примерах, что именно нужно для разных сфер бизнеса — строительной компании, интернет-магазина и банка.

Красиво сверстаем ваши письма

Дизайн и вёрстка email-рассылок

Мастер-шаблон для строительного бизнеса

Мастер-шаблон для строительного бизнеса

1. Картинка и текст в шахматном порядке

Универсальный вариант, который подойдёт для новостного блока, рекламных акций и даже описания жилого комплекса.

мастер-шаблон, картинка и текст в шахматном порядке

 

2. Текст под картинкой

Универсален, как и предыдущий вариант. Подойдёт для новостного блока, предложений компании или описания жилого комплекса.

мастер-шаблон, текст под картинкой

 

3. Текстовый блок с заголовком и кнопкой

Подойдёт для новостей или событий компании.

мастер-шаблон, текстовый блок с заголовком и кнопкой

 

4. Блок с описанием квартиры

Его можно использовать в промо-рассылках или триггерах, например, с брошенным просмотром.

матер-шаблон, блок с описанием квартиры

5. Товарная сетка

Оптимально для квартир использовать сетку с двумя товарами в ряд. Если сделать две или три колонки, картинки невозможно будет рассмотреть. А это важно для покупателей.

Товарная сетка используется в промо-рассылках или триггерах, например, с брошенным просмотром.

мастер-шаблон, товарная сетка

Мастер-шаблон для банка

Мастер-шаблон для банка

1. Описательный блок с картинками

Можно использовать для разных целей: описать условия акции или вставить фотографии сотрудников с именем и должностью.

мастер-шаблон, описательный блок с картинками

2. Описательный блок с иконками

Этот блок часто используется для описания этапов, например, как в примере — «Что ждет участников квеста». По сути выполняет ту же роль, что и предыдущий блок.

мастер-шаблон, описательный блок с иконками

 

3. Блок с шагами

Понадобится, когда вам нужно визуализировать последовательность действий. В нашем мастер-шаблоне он был в двух вариантах — иконки с заливкой и без.

мастер-шаблон, блок с шагами

мастер-шаблон, блок с шагами

4. Таблицы

Банки часто отправляют клиента сводки по карте или по счету. Лучше всего такие материалы смотрятся в формате таблицы.

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

Если таблица большая, можно её сократить и добавить ссылку на скачивание.

мастер-шаблон, таблицы

 

5. Блок с картой

У любого банка есть дебетовые или кредитные карты, так что без этого блока никак.

мастер-шаблон, блок с картой

 

6. Блок с преимуществами

Блок на случай, если банку надо рассказать о своих преимуществах.

мастер-шаблон, блок с преимуществами

 

7. Блок со статьями

Если банк ведёт блог, надо предусмотреть разные варианты блоков с новостями и постами из блога. Мы предложили несколько вариантов.

Первый — с графическими картинками и кнопками. Здесь мы ограничены количеством строк: чтобы смотрелось гармонично, в разных новостях они должны быть равны:

мастер-шаблон, блок со статьямиВторой вариант — с ссылками в тексте. Мы отказались от кнопок, чтобы не перегружать новость и добавить больше текста. Якорный объект — картинка:

мастер-шаблон, блок со статьями

В третьем варианте мы не используем картинки и поэтому не ограничены в количестве символов. Разное количество текста смотрится гармонично:

мастер-шаблон, блок со статьями

 

8. Блок с выделенной информацией

Подойдёт для важной информации: например, когда начинается или заканчивается срок действия карты.

мастер-шаблон, блок с выделенной информацией

9. Блок с баннером

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

мастер-шаблон, блок с баннером

10. Блок с мобильным приложением

У каждого банка есть мобильное приложение, поэтому это обязательный пункт в мастер-шаблоне.

мастер-шаблон, блок с мобильным приложением

Мастер-шаблон для интернет-магазина

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

мастер-шаблон для интернет-магазина

 

1. Разные варианты кнопок

Мы сделали варианты с иконками и без. И текст, и иконки можно менять.

мастер-шаблон, разные варианты кнопок

 

2. Блок с промокодом

Важный блок в мастер-шаблоне для интернет-магазина. Обязательно верстайте промокод текстом, а не картинкой, чтобы клиент мог его скопировать.

мастер-шаблон, блок с промокодом

3. Баннер категории

Этот блок нужен для промо-рассылок, чтобы разделить товарную сетку.

мастер-шаблон, баннер категории

4. Товарная сетка

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

мастер-шаблон, товарная сетка

 

Когда колонки две или три, текст хорошо ложится в блоки и можно добавить дополнительную информацию о товаре (материал, размер, вес).

Такую сетку используют для различных триггеров и регулярных рассылок. Она подходит для динамического контента, когда товары подтягиваются автоматически.

Для динамического контента предусмотрите несколько строк текста и ограничение по символам, чтобы текст смотрелся гармонично. Например, ограничьте строку 150 символами, а лишний текст обрежьте и добавьте в конце многоточие.

Также нужны варианты отображений цен со скидками и без, если такие товары предусмотрены на сайте.

мастер-шаблон, товарная сетка

5. Нестандартная товарная сетка

Вариант с плашками на товарах, чтобы выделять акционные или самые популярные товары.

мастер-шаблон, нестандартная товарная сетка

6. Товарная сетка с одним товаром

Блок для подробного описания товара. Можно уточнить, что входит в подарочный набор или состав товара, технические характеристики.

мастер-шаблон, товарная сетка с одним товаром

7. Блок с опросом

Нужен, чтобы узнать довольны ли клиенты рассылками или работой интернет-магазина. Можно придумать разные варианты оформления: шкалу от 0 до 10 как в нашем примере, кнопки «Супер»/»Ну такое», рейтинг с количеством звёзд и т. д.

мастер-шаблон, блок с опросом

8. Блок с корзиной

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

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

мастер-шаблон, блок с корзиной

9. Блок с категориями товаров

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

мастер-шаблон, блок с категориями товаров

 

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

мастер-шаблон, блок с категориями товаров

10. Второстепенный баннер

Его можно использовать в промо и триггерах. Для последних он особенно хорош, так как вы не перегрузите их большим главным баннером.

мастер-шаблон, второстепенный баннер

Как видите, каждый мастер-шаблон индивидуален, но при этом есть чёткие правила. Главное, понять, что потребуется в рассылках именно вам.

Узнавайте об обновлениях блога Email Soldiers первым

Спасибо!

Осталось подтвердить подписку — кликнуть по кнопке в письме, которое мы вам отправили.

Похожие статьи

Дизайн, вёрстка, текст рассылки
Клиентам о email-маркетинге, часть 3. Дизайн, вёрстка, текст рассылки

Какими должны быть текст, дизайн и вёрстка в рассылках, чтобы они дошли до подписчиков и заинтересовали их.

Чек-лист для дизайнера: что проверить в макете перед сдачей
Чек-лист для дизайнера: что проверить в макете перед сдачей

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

Опрос внутри письма: в каких почтовых клиентах это будет работать

Вставляем опрос в письмо, чтобы подписчикам не приходилось переходить на другую страницу для ответов.