Красивый шаблон email-рассылки: формируем ТЗ для дизайнера

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

Зачем составлять ТЗ

Чтобы дизайнер собрал письмо, которое понравится вам и будет отражать цели рассылки. Без четкого и понятного ТЗ можно получить свободный дизайн, выполненный под себя, а не под компанию. Простые вводные для дизайнера тоже не подойдут. Если попросить его нарисовать модное письмо с рекой, небом и продуктами компании, получится чистое творчество. Есть шанс, что заказчику понравится результат. Но чаще его представление о рассылке не будет совпадать с тем, что придумал дизайнер, который не умеет читать мысли. Поэтому и итоговый макет не подойдет. В точном и подробном ТЗ дизайнер увидит ожидаемый результат и сделает так, как нужно компании.

Собираем шаблон email-рассылки

Первый шаг при составлении ТЗ — выбрать форму, с которой будет работать дизайнер. Если этого не сделать, он может нарисовать дизайн, который технически не подойдет под формат рассылки. Шаблон можно создать самостоятельно в сервисе рассылок Sendbox от Mail.ru для бизнеса. В галерее шаблонов доступны готовые варианты, которые можно изменить под собственное письмо. Или выбрать пустое поле, где расположить элементы в одну, две, три или четыре колонки, указать хедер (верхняя часть) и футер (нижняя). Этого хватит для ТЗ.

Указываем референсы

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

Посмотрите коллекции писем. В этих сервисах выкладывают и оценивают рассылки. По количеству баллов можно определить популярные и трендовые варианты. Три ресурса с коллекциями:

  • Email-competitors
  • Reallygoodemails
  • Emailsfresh

Смотрите на рассылки по темам и целям. Если вам нужно промо для ритейлера, изучите письма от Lamoda. Указывайте в ТЗ конкретные элементы, которые хотите добавить в свою рассылку. Дизайнеру будет проще создавать блоки. 

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

Собирайте папку со скриншотами, отмечайте детали и придумывайте комбинации. Например, хедер от Lamoda и футер от Intimissimi.

Собираем данные для ТЗ

Референсы для будущей рассылки соедините с информацией о компании. Расскажите дизайнеру про сайт и соцсети, покажите примеры предыдущих рассылок. Или приложите к ТЗ ссылку на брендбук.

Дизайнер должен представлять цель письма, которое он будет рисовать. Промо отличается от информационной рассылки, поэтом укажите, какую задачу будет решать письмо. Приложите созданный шаблон. Дизайнер не отвечает за текст, но ему нужно понимать объемы и наполнение текстовых блоков. Поэтому лучше заранее обратитесь к копирайтеру, чтобы он написал тексты, кнопки, описания. И с готовым контентом создавайте ТЗ для дизайнера.

Укажите пожелания по шрифтам, но помните, что не все почтовые системы воспроизводят их корректно. Стандартные Arial, Times, Tahoma откроются на любой почте. Но современные шрифты могут отображаться в виде непонятных символов. Если вам нужен такой шрифт, попросите дизайнера наложить его на изображение и добавить в письмо в виде картинки.

Прописываем задачи для адаптивной версии

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

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

Описываем содержание шаблона

Для каждого блока письма нужно расписать контент и представить примерное расположение элементов.

Прехедер

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

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

Шапка

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

Тело письма

Основная часть, на которую будет направлено внимание читателя. Для промо нужна картинка, которая акцентирует внимание на СТО. Подберите фотографии своего продукта, напишите сильное УТП и выделите размер скидки. На просмотр промо у читателя уйдет пару секунд, за это время он должен понять, что ему предлагают, сколько можно сэкономить и куда перейти для заказа. Поэтому на видное место добавьте кнопку с ссылкой на сайт. Все элементы промо компактно расположены в рассылке от Tom Tailor.

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

Подвал

В футер сваливают все то, что не поместили в хедере: информацию о компании, ссылку на отписку, кнопки соцсетей, меню сайта. Разделите эти элементы между верхней и нижней частями письма. Или используйте футер для рассказа о бренде. Так поступили маркетологи издательства Лабиринт, рассказав о трех преимуществах компании. У них интересный tone of voice — посмотрите текст для отписки.

Почему лучше подробнее описывать каждый блок в ТЗ

Даже при общении со штатным дизайнером, который работал с другими проектами компании и представляет пожелания заказчика, проговаривайте подробности. Ваше время и время дизайнера будут потрачены впустую, если итоговый результат придется полностью переделывать. Точное ТЗ не оставляет вопросов у дизайнера. Пусть он еще раз увидит привычные требования к дизайну письма, чем сделает его под себя.

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

Вариант эскиза

Последняя часть ТЗ — визуально представить письмо. Зарисовать его можно даже на листочке бумаги или собрать в конструкторе писем, как в примере с макетом из Sendbox.

Эскиз дополняет ТЗ, но не является обязательным. Но если работаете с дизайнером на фрилансе, к подробным требованиям обязательно приложите макет. Это поможет избежать недопонимания.

Итог

Шаблон для рассылки получится большим. Не экономьте время и силы на его создание. Иначе потратите еще больше ресурсов на переделывание и правки.

Попросите прислать готовый макет в онлайн-редакторе (например, Figma) или в графическом формате — PSD, скетч. Для правок создавайте новый документ с ТЗ, где приложите скриншоты и пропишите замечания.