menu

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

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

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

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

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

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

Работа над ТЗ будет складываться из:

Далее рассмотрим каждый этап подробнее.

Зачем писать ТЗ

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

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

Когда дизайнер берётся за дело без конкретного ТЗ
Когда дизайнер берётся за дело без конкретного ТЗ

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

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

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

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

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

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

Референс рассылки туристического сайта
Референс рассылки туристического сайта

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

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

Пример корпоративного дайджеста
Пример корпоративного дайджеста

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

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

ТЗ: вводная часть

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

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

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

Ограничения, про которые не забываем, составляя этот раздел:

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

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

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

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

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

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

ТЗ: основная часть

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

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

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

Контент

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

Часть письма Что может содержать
Прехедер — Текст прехедера, дополняющий тему письма.

— Ссылка на веб-версию.

— Прочие «служебные» ссылки при наличии — от ссылки на профиль подписчика до ссылки отписки.

Хедер — Логотип компании.

— УТП (слоган).

— Телефон, прочие контактные данные.

— Режим работы.

— Кнопки соцсетей.

— Горизонтальное меню с разделами сайта.

Футер — Кнопки соцсетей.

— Информация о компании.

— Объяснение, почему пользователь получил рассылку («вы получили это письмо, потому что…»).

— Ссылка отписки.

— Прочие «служебные» ссылки.

— Меню сайта в формате ссылок или иконок.

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

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

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

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

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

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

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

Компоновка

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

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

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

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

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

Насколько подробно описывать каждый блок?

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

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

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

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

Оставляем дизайнеру возможность предлагать свои решения

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

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

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

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

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

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

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

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

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

Эскиз

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

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

Для простоты можно делать эскизы от руки
Для простоты можно делать эскизы от руки

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

Когда рисовать эскиз — в начале или в конце работы над ТЗ?

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

Результат

В итоге получается подобный документ:

Пример ТЗ на дизайн шаблона email-рассылки (откроется в новом окне в гуглдоке).

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

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

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

«Пиши, отправляй. Как писать тексты для email-рассылок»

Подпишитесь на рассылку и получите электронную книгу

Нажимая кнопку «Получить книгу», вы даете согласие на обработку персональных данных.