ИИ-помощник, удобный конструктор, 200+ шаблонов, статистика, автоматизация.
1500 писем бесплатно.
В конце статьи — пример готового ТЗ
Визуальное оформление рассылок — важная часть email-маркетинга. Даже самый интересный текст с самыми притягательными CTA может не сработать, если не уделить должного внимания дизайну. Письма с некачественным или просто небрежным оформлением могут не только свести к нулю эффективность отдельной коммуникации, но и стать причиной потери доверия пользователей — а это уже серьёзно.
Из всего этого следует, что с визуалом рассылки должен работать профессионал. А чтобы сэкономить время и деньги, ему стоит поручить создание не каждого отдельного письма, а шаблона рассылки.
В статье расскажем, как создать такое ТЗ для дизайнера, чтобы шаблон оправдал ожидания — а также был собран быстро и с минимальными правками.
При выпуске регулярных email-рассылок удобнее пользоваться шаблоном, а не готовить каждый раз макет с нуля. Когда есть шаблон, мы как бы «конструируем» письмо из готовых блоков — их нужно только наполнить актуальным контентом: картинками, текстами и ссылками.
Это сильно ускоряет и упрощает процесс, а также повышает качество оформления писем. Готовые стили заголовков, маркированные списки и линейки задают структуру, которая повторяется из письма в письмо.
В идеале, стоит собирать не просто шаблон, а мастер-шаблон — набор блоков на все случаи жизни. О том, чем он лучше и как им пользоваться, мы уже рассказывали в «Конверте». Но если ваши рассылки имеют схожую структуру или содержат небольшое количество блоков, вполне можно обойтись и обычным универсальным шаблоном — это дешевле мастер-шаблона и в некоторых случаях может быть даже удобнее.
Конечно, собрать шаблон можно самостоятельно — или вовсе воспользоваться готовыми решениями из библиотеки вашего сервиса рассылок. Например, в библиотеке Unisender — больше 100 бесплатных вариантов. Но все их так или иначе придётся адаптировать под ваш бренд, и делать это самому не всегда хватает навыков и времени. Поэтому и нужен дизайнер, который соберёт всё за вас — а чтобы он понимал, какого именно результата вы ждёте, важно правильно составить техническое задание (ТЗ).
Ниже подробно разберем, из чего состоит ТЗ на дизайн шаблона рассылки и поделимся готовым техническим заданием.
Разбирать будем случай, когда мы не берём готовый шаблон из галереи сервиса рассылок или каких-то подборок. Допустим, мы хотим разработать дизайн полностью «под себя», в стиле проекта и под его задачи. Для этого обращаемся к дизайнеру — из штата нашей компании или на фрилансе.
Мы не можем просто сказать дизайнеру «нарисуй нам рассылку» и оставить прочее на его усмотрение. Если мы так поступим, конечный результат может оказаться далёк от наших ожиданий и конкретных задач рассылки.
Дизайнер не может прочитать наши мысли, он способен лишь предложить решение на поставленную задачу. И корректно поставить такую задачу нам помогает как раз формат ТЗ. Кроме того, он может быть вовсе не в курсе отдельных нюансов создания дизайна рассылок — например, перечня допустимых шрифтов. Всё это стоит прописать в ТЗ, чтобы рассылка точно работала как надо.
Начинаем с поиска референсов — примеров того, что нам нужно сделать. Мы создаём не первую в мире рассылку — наверняка, есть много хороших образцов дизайна, на которые можно ориентироваться.
Где искать референсы:
Ищем похожие тематики. Если мы турфирма — изучаем рассылки туров, горящих предложений, туристической информации. Если интернет-магазин — письма с товарами и акциями.
Если наша область специфическая и в ней не так много рассылок, можно обращать внимание на форматы: дайджесты, продуктовые рассылки, информацию об услугах.
Например, мы занимаемся продажей дорогостоящего медицинского оборудования клиникам. Предполагаем, что рассылка будет в формате дайджеста статей из блога. В таком случае, достаточно посмотреть на рассылки корпоративных блогов вообще, чтобы составить представление о предполагаемом дизайне.
Подбираем референсы на свой вкус. Что нам понравилось, показалось интересным или просто соответствующим нашему контенту. При этом можно комбинировать: например, взять «шапку» из одной рассылки, подачу иллюстраций из другой, а лаконичный футер из третьей. Делаем скриншоты или сохраняем полезные ссылки.
20+ классных примеров оформления футеров в рассылках
С готовыми примерами переходим к подготовке непосредственно ТЗ.
Написание ТЗ — дело творческое (если только компания не придерживается каких-то стандартов). Поэтому всё, что указано ниже, имеет больше характер рекомендаций: как можно писать ТЗ, какая структура у него будет. Главное требование — чтобы задание было понятно исполнителю, а конечный результат нас устраивал.
Начать ТЗ на дизайн шаблона удобно с вводной части. Она состоит из нескольких ключевых пунктов.
Этот раздел (как и все остальные) должен учитывать ограничения, применимые к дизайну рассылок. Вот несколько основных.
Почтовые приложения отображают не все шрифты. Поэтому в ТЗ предлагаем пользоваться только безопасными веб-шрифтами, которые загрузят все email-клиенты:
Ширину макета желательно удерживать в пределах 600-800px. Это общепринятый «габарит» рассылок, который хорошо поместится практически в любом почтовом клиенте. С более широкими рассылками возможны проблемы — у них часто «уезжает» вёрстка или появляется неудобная полоса горизонтальной прокрутки:
Подробнее об оптимальных размерах верстки электронного письма читайте в нашей статье.
Картинками в шаблоне стоит пользоваться аккуратно. Даже в нашем современном мире нет гарантии, что почтовый клиент загрузит их по умолчанию или как-нибудь не исказит. Лучше пореже пользоваться наложением изображения и текста друг на друга, так как это тоже может вызвать проблемы в почтовиках:
Всё, что нужно знать о поведении почтовиков с картинками — в материале «Картинки не загрузились: как спасти рассылку и не потерять подписчиков».
Переходим к описанию того, что будет содержать шаблон. Разобьём его на классические части:
Для каждой части нам понадобится прописать контент — что она будет содержать, и примерную компоновку — как это будет расположено.
Прехедер, хедер и футер — достаточно «технические» части письма, содержание которых чаще всего стандартно:
| Часть письма | Что может содержать |
| Прехедер |
|
| Хедер |
|
| Футер |
|
Тело письма — ключевая часть, ради которой всё и затевается. Её удобно разбить на дополнительные блоки по формату контента, который в них будет. Двигаемся по шаблону сверху вниз:
Каждый блок описываем отдельно:
Контент для шаблона лучше брать не условный, а реальный — который мы будем использовать в рассылках. Можно взять текст из старых писем или попросить копирайтера написать новый. Наша задача — максимально приблизить шаблон к «боевым» условиям, в которых мы будем с ним работать.
Если размещаем статью, пусть это будет иллюстрация, заголовок и аннотация из настоящего материала в нашем блоге. Если товар, то вместо «глянцевого» изображения с фотостока куда полезнее подставить фото рядового товара из нашего каталога, написать его полное название и актуальную цену. Даже если впоследствии контент в шаблоне будет меняться (а он будет), правки, скорее всего, будут минимальными — ведь всё сделано уже под ваш тип контента и его параметры.
Когда придёт время делать рассылки, всё уже будет готово: заголовки встанут по размеру, а стандартные фото из каталога сложатся в красивую плитку.
Мы хотим сделать универсальный шаблон — такой, чтоб подошёл под дайджест, анонс товаров или поздравление. Поэтому нужно предусмотреть разные варианты компоновки контента: 1 столбец, 2 столбца, картинка слева и картинка справа, картинка по ширине письма.
При этом будем учитывать, что контентная часть письма не очень широкая, особо не разгуляешься. Поэтому ограничимся расположением элементов в 1-2, максимум в 3-4 столбца:
Зависит от дизайнера, с которым мы собираемся работать.
Если это постоянный член команды и у нас сложилось понимание на полуслове, чрезмерной детализации можно не делать. Разве что обговорить специфические моменты, связанные с email — ограничения по шрифтам, ширину макета и предпочтительную компоновку.
Если мы сотрудничаем с дизайнером на фрилансе у нас лимит по ресурсам и времени. Лучше расписывать всё максимально подробно и дать больше референсов.
Но мы не специалисты в дизайне, поэтому легко можем что-то упустить. Я считаю, что дизайнеру всегда нужно оставлять «пространство для манёвра», предлагая выбрать из нескольких вариантов, подобрать что-то самостоятельно или предложить своё решение.

Тем не менее, основное видение шаблона должно оставаться за нами. Нам нужно понимать, что и зачем мы делаем. Пожелания дизайнеру в духе «удиви меня» или «этот шаблон должен зажечь» не принимаются.
Будет ли в нашем ТЗ часть о мобильной версии, зависит от того, как мы собираемся верстать шаблон.
Сверстать письмо можно с помощью стандартных инструментов блочного редактора в сервисе рассылок или вручную, с помощью языков разметки. Во втором случае дизайн получится более гибкий, но и стоить будет дороже. Всё упирается в ресурсы, доступные на проекте.
Блочный редактор. Если мы верстаем в блочном редакторе, дополнительный макет для мобильной версии не нужен. Редактор адаптирует контент под смартфоны автоматически.
Ручная вёрстка. Если мы сделали выбор в пользу «кастомного» решения, то сможем управлять отображением шаблона на мобильных устройствах. Нужно предусмотреть отрисовку мобильной версии в ТЗ.
Не рассчитываем, что все решения по адаптации предложит дизайнер. Создаём отдельный раздел ТЗ, где пишем, как должны вести себя блоки с контентом при уменьшении размера экрана: где и как им перестраиваться, а где их вообще можно скрыть.
Пусть у нас будет 2 макета: шаблон для десктопа и для мобильных устройств.
Эскиз здорово упрощает жизнь дизайнеру. Чтобы создать его, не обязательно качать графические редакторы и выводить серые прямоугольники в Photoshop. Иногда трудоёмкость служит основной причиной, почему мы не делаем эскизы. Поэтому, чем проще, тем лучше.
Можно открыть Paint и набросать структуру там. Или даже сделать рисунок от руки, для чего вовсе не надо быть великим художником:
Наличие эскиза в ТЗ не обязательно. Но если мы хотим лучше передать свои ожидания от шаблона, его лучше сделать.
Рисовать эскиз в начале или в конце работы над ТЗ — дело вкуса. Кому-то удобно сначала прикинуть блоки визуально, а затем уже сопроводить их текстовым описанием. Кому-то наоборот. А чаще всего это взаимосвязано: работа над эскизом вносит изменения в контент, а проработка контента что-то исправляет в эскизе.
В итоге получается подобный документ: пример ТЗ на дизайн шаблона email-рассылки.
Шаблон, нарисованный по нему, может оказаться очень длинным, но это не означает, что каждое наше письмо будет выглядеть таким «полотенцем». При подготовке рассылки мы сможем выбирать: скажем, берём один блок из начала, другой из середины, добавляем подзаголовки и парочку изображений.
Просим дизайнера предоставить макет в одном из распространённых графических форматов типа PSD или скетча. Иногда макет делают в онлайн-редакторах типа Figma, тогда готовый результат — просто ссылка на проект.
Дальше остаётся перевести получившуюся графику на язык html-разметки — что, на самом деле, не такая уж ординарная задача. Но это уже совсем-совсем другой разговор.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.