Как написать ТЗ для дизайнера на шаблон email-рассылки

В конце статьи — пример готового ТЗ

Как написать ТЗ для дизайнера на шаблон email-рассылки

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

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

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

Почему нужно делать дизайн шаблона, а не отдельного письма

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

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

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

Конечно, собрать шаблон можно самостоятельно — или вовсе воспользоваться готовыми решениями из библиотеки вашего сервиса рассылок. Например, в библиотеке Unisender — больше 100 бесплатных вариантов. Но все их так или иначе придётся адаптировать под ваш бренд, и делать это самому не всегда хватает навыков и времени. Поэтому и нужен дизайнер, который соберёт всё за вас — а чтобы он понимал, какого именно результата вы ждёте, важно правильно составить техническое задание (ТЗ). 

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

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

Разбирать будем случай, когда мы не берём готовый шаблон из галереи сервиса рассылок или каких-то подборок. Допустим, мы хотим разработать дизайн полностью «под себя», в стиле проекта и под его задачи. Для этого обращаемся к дизайнеру — из штата нашей компании или на фрилансе.

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

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

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

Поиск примеров

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

Где искать референсы:

  • Открыть свой почтовый ящик и посмотреть, какие там есть рассылки.
  • Познакомиться с галереей готовых email-шаблонов на ресурсах типа Themeforest или в библиотеках сервисов email-маркетинга.
  • Посмотреть коллекции рассылок (например, на Email-competitors).

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

Референсы рассылок
Референс рассылки для туристической компании

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

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

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

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

20+ классных примеров оформления футеров в рассылках

С готовыми примерами переходим к подготовке непосредственно ТЗ.

ТЗ на шаблон рассылки: вводная часть

Написание ТЗ — дело творческое (если только компания не придерживается каких-то стандартов). Поэтому всё, что указано ниже, имеет больше характер рекомендаций: как можно писать ТЗ, какая структура у него будет. Главное требование — чтобы задание было понятно исполнителю, а конечный результат нас устраивал.

Начать ТЗ на дизайн шаблона удобно с вводной части. Она состоит из нескольких ключевых пунктов.

  • Постановку задачи. В нашем случае — нарисовать шаблон для email-рассылок. Желательно тут же оговорить, в каком формате будет получен результат.
  • Общие требования. К ним относятся шрифты, цветовая палитра, ширина письма.
  • Справочные материалы. В них входит ссылка на сайт, брендбук, референсы.

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

Почтовые приложения отображают не все шрифты. Поэтому в ТЗ предлагаем пользоваться только безопасными веб-шрифтами, которые загрузят все email-клиенты:

Шрифты для email
Стандартные шрифты для рассылки

Ширину макета желательно удерживать в пределах 600-800px. Это общепринятый «габарит» рассылок, который хорошо поместится практически в любом почтовом клиенте. С более широкими рассылками возможны проблемы — у них часто «уезжает» вёрстка или появляется неудобная полоса горизонтальной прокрутки:

размеры письма
Слишком широкое письмо, которому понадобилась горизонтальная прокрутка

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

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

Всё, что нужно знать о поведении почтовиков с картинками — в материале «Картинки не загрузились: как спасти рассылку и не потерять подписчиков».

картинки в рассылке
Вариант Б удачнее с точки зрения email — его получится сверстать «надёжнее»

ТЗ на шаблон рассылки: основная часть

Переходим к описанию того, что будет содержать шаблон. Разобьём его на классические части:

  • Прехедер — предзаголовок.
  • Хедер — шапка.
  • Тело письма.
  • Футер — подвал.

Для каждой части нам понадобится прописать контент — что она будет содержать, и примерную компоновку — как это будет расположено.

Контент

Прехедер, хедер и футер — достаточно «технические» части письма, содержание которых чаще всего стандартно:

Часть письма Что может содержать
Прехедер
  • Текст прехедера, дополняющий тему письма
  • Ссылка на веб-версию
  • Прочие «служебные» ссылки при наличии — от ссылки на профиль подписчика до ссылки отписки
Хедер
  • Логотип компании
  • УТП (слоган)
  • Телефон, прочие контактные данные
  • Режим работы
  • Кнопки соцсетей
  • Горизонтальное меню с разделами сайта
Футер
  • Кнопки соцсетей
  • Информация о компании
  • Объяснение, почему пользователь получил рассылку («вы получили это письмо, потому что...»)
  • Ссылка отписки
  • Прочие «служебные» ссылки
  • Меню сайта в формате ссылок или иконок

Тело письма — ключевая часть, ради которой всё и затевается. Её удобно разбить на дополнительные блоки по формату контента, который в них будет. Двигаемся по шаблону сверху вниз:

  • Верхний баннер (акция, спецпредложение).
  • Заголовок.
  • Вступление.
  • Кнопка.

Каждый блок описываем отдельно:

ТЗ на шаблон письма
Пример описания блока контента в теле письма

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

Если размещаем статью, пусть это будет иллюстрация, заголовок и аннотация из настоящего материала в нашем блоге. Если товар, то вместо «глянцевого» изображения с фотостока куда полезнее подставить фото рядового товара из нашего каталога, написать его полное название и актуальную цену. Даже если впоследствии контент в шаблоне будет меняться (а он будет), правки, скорее всего, будут минимальными — ведь всё сделано уже под ваш тип контента и его параметры.

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

Компоновка

Мы хотим сделать универсальный шаблон — такой, чтоб подошёл под дайджест, анонс товаров или поздравление. Поэтому нужно предусмотреть разные варианты компоновки контента: 1 столбец, 2 столбца, картинка слева и картинка справа, картинка по ширине письма.

При этом будем учитывать, что контентная часть письма не очень широкая, особо не разгуляешься. Поэтому ограничимся расположением элементов в 1-2, максимум в 3-4 столбца:

техзадание на шаблон письма
Возможные варианты компоновки контента в шаблоне

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

По-хорошему, расположением контента в 3-4 столбца лучше пользоваться реже — скажем, для карточек товаров. Самый «ходовой» способ расположить контент — это 1 и 2 столбца.

Насколько подробно описывать пункты ТЗ

Зависит от дизайнера, с которым мы собираемся работать.

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

Если мы сотрудничаем с дизайнером на фрилансе  у нас лимит по ресурсам и времени. Лучше расписывать всё максимально подробно и дать больше референсов.

Но мы не специалисты в дизайне, поэтому легко можем что-то упустить. Я считаю, что дизайнеру всегда нужно оставлять «пространство для манёвра», предлагая выбрать из нескольких вариантов, подобрать что-то самостоятельно или предложить своё решение.

Подробное тз на письмо

Тем не менее, основное видение шаблона должно оставаться за нами. Нам нужно понимать, что и зачем мы делаем. Пожелания дизайнеру в духе «удиви меня» или «этот шаблон должен зажечь» не принимаются.

Мобильная версия

Будет ли в нашем ТЗ часть о мобильной версии, зависит от того, как мы собираемся верстать шаблон.

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

Блочный редактор. Если мы верстаем в блочном редакторе, дополнительный макет для мобильной версии не нужен. Редактор адаптирует контент под смартфоны автоматически.

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

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

Адаптация для мобильного в тз как прописать
Прописываем свои пожелания по мобильной адаптации шаблона в случае «кастомной» вёрстки

Пусть у нас будет 2 макета: шаблон для десктопа и для мобильных устройств.

Как сверстать адаптивное письмо

Эскиз

Эскиз здорово упрощает жизнь дизайнеру. Чтобы создать его, не обязательно качать графические редакторы и выводить серые прямоугольники в Photoshop. Иногда трудоёмкость служит основной причиной, почему мы не делаем эскизы. Поэтому, чем проще, тем лучше.

Можно открыть Paint и набросать структуру там. Или даже сделать рисунок от руки, для чего вовсе не надо быть великим художником:

Эскиз шаблона рассылки

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

Рисовать эскиз в начале или в конце работы над ТЗ — дело вкуса. Кому-то удобно сначала прикинуть блоки визуально, а затем уже сопроводить их текстовым описанием. Кому-то наоборот. А чаще всего это взаимосвязано: работа над эскизом вносит изменения в контент, а проработка контента что-то исправляет в эскизе.

Результат

В итоге получается подобный документ: пример ТЗ на дизайн шаблона email-рассылки. 

Шаблон, нарисованный по нему, может оказаться очень длинным, но это не означает, что каждое наше письмо будет выглядеть таким «полотенцем». При подготовке рассылки мы сможем выбирать: скажем, берём один блок из начала, другой из середины, добавляем подзаголовки и парочку изображений.

Просим дизайнера предоставить макет в одном из распространённых графических форматов типа PSD или скетча. Иногда макет делают в онлайн-редакторах типа Figma, тогда готовый результат — просто ссылка на проект.

Дальше остаётся перевести получившуюся графику на язык html-разметки — что, на самом деле, не такая уж ординарная задача. Но это уже совсем-совсем другой разговор.

«Честно» — рассылка о том, что волнует и бесит

Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.

Наш юрист будет ругаться, если вы не примете :(
Нажимая «Подписаться», я принимаю Правила использования и подтверждаю, что ознакомлен с Политикой обработки персональных данных.
Учим превращать письма в систему продаж ООО «Юни Платформа», ИНН: 9707003468, erid: 2VSb5xN21d4