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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контент

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

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

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

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

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

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

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

Компоновка

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

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

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

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

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

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

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

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

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

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

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

Эскиз

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

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

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

Результат

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

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

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

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