menu

Как создать макет письма без дизайнера

Все, что вам надо знать о дизайне писем

Мы уверены, что каждый должен делать свою работу: дизайнер — макет рассылки, верстальщик — верстку, email-маркетолог — стратегию и управление. Но если нет подходящего ресурса, все приходится делать самому.

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

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

  1. чтобы письмо хорошо выглядело на всех устройствах и все функции работали;
  2. чтобы верстальщик не отказался его верстать;
  3. чтобы составить ТЗ дизайнеру (если он есть) и проконтролировать результат.

Для удобства мы разделили статью на 2 части: базовые понятия и сборка письма. Начнем с базы.

Часть 1. Базовые понятия о дизайне писем

Размер письма

600 пикселей — оптимальная ширина письма. Именно такую рекомендуют почтовики. Если письмо шире — на некоторых устройствах появится горизонтальная полоса прокрутки. При этом длина письма и размер фона может быть любым.

Если делаете макет в Photoshop, то можно сразу создать документ с шириной 600 px.

Начало работы над макетом в Photoshop
Задаем размеры документа в Photoshop

Базовая структура

Классическое письмо состоит из прехедера, шапки, тела и футера. Отдельными элементами являются границы и фон.

Структура классического письма
Структура классического письма

Шапка и подвал — устойчивые структуры, они редко меняются от письма к письму. Прехедер занимает пару строк и не всегда нужен. Поэтому основные изменения касаются тела письма.

Модули

Письма верстают таблицами. Поэтому каждый элемент занимает участок в виде прямоугольника или квадрата. Эти модули не пересекаются и редко накладываются друг на друга. Их наполнение может быть разным: текст, изображение, кнопка, GIF-анимация, ссылка.

Покажем на примере.

Рассылка Афиши.Daily, пример модульной структуры письма
Модульная структура письма

Модули располагают в одну или несколько колонок. В теле письма количество колонок может меняться: одна колонка может смениться двумя-тремя. Чтобы письмо было проще адаптировать под мобильные устройства, обычно используют 1–2 колонки.

Шрифты

В email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.

Безопасные шрифты для email-рассылок
Безопасные шрифты

Если текст слишком мелкий, пользователи будут увеличивать письмо. Например, в устройствах под iOS 6–7 минимальный размер шрифта 13 px. Если в рассылке есть текст меньше, то система его автоматически увеличит до этого размера.

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

  • наложить его на какое-то изображение, чтобы он стал его частью;
  • сделать из нестандартного шрифта отдельную картинку, которую можно было бы распилить для адаптации под мобильные.

Нестандартные шрифты нужно использовать ограниченно. Письмо из нестандартных шрифтов — это письмо из картинок. А такие сообщения часто попадают в спам-фильтры почтовых служб и блокируются.

Расстояние между объектами

Между буквами, строками и блоками нужно соблюдать отступы. Если этого не делать, они слипаются между собой или, наоборот, выглядят разобщенными.

Пример неудачных междустрочных интервалов
Междустрочные интервалы заголовка и текста практически совпадают. Они слипаются. Пропадает ощущение контраста

Решить проблему можно двумя способами: увеличить расстояние между заголовком и текстом или сократить междустрочный интервал в абзаце.

Пример удачных междустрочных интервалов
Теперь заголовок и текст контрастируют

Расстояние между буквами определяет шрифт, расстояние между строками — интерлиньяж, а расстояние между блоками — отступы. Чтобы эти элементы дизайна не «слипались», расстояние всегда должно увеличиваться при переходе на более высокий уровень (от букв к строкам, от строк к блокам и т.д.). В бюро Горбунова это называют правилом «внутреннего и внешнего». Чтобы создать контрастность и повысить выразительность отдельных объектов, внешнее всегда должно быть больше внутреннего.

Совет Артема Горбунова о внутреннем и внешнем

Артемий Лебедев. Теория близости

Фирменный дизайн

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

Пример LinguaLeo. Вот рассылка:

Письма от Lingualeo в едином стиле
Одна цветовая гамма, один и тот же шрифт, похожие макеты.

А вот сайт:

Дизайн сайта Lingualeo
Единый стиль — круто

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

Запрещенные элементы

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

  • JavaScript;
  • flash-анимацию;
  • CSS-анимацию;
  • видео;
  • формы;
  • эффекты наведения — изменение свойств объекта при наведении мыши (псевдокласс :hover);
  • эффекты параллакса.

Вставлять эти функции и объекты в макет письма не надо — они не отобразятся у пользователей.

Мы познакомились с основными понятиями в дизайне email. Пришло время собрать макет.

Часть 2. Собираем письмо

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

Решаем, что будет внутри письма

Это дайджест, полноценная статья или каталог? Каждый формат предполагает свой дизайн.

Дайджест Нетологии. Цель — рассказать, что произошло на сайте и в блоге за неделю:

https://gyazo.com/42dd96d219596f0c6a24dd8366606c4b

Письмо-статья от Мегаплана. Основной упор на текст и авторские иллюстрации.

https://gyazo.com/bf4b11dffa5f32bd2d2841dffb2c7b1e

Письмо-каталог от PitchShop. Упор на визуальную составляющую — покупатель видит товар, кликает на него и покупает.

https://gyazo.com/3af5664f5224f5eb026729003893e862

Наша задача — кратко описать, что нового случилось в блоге и на сайте сервиса. Значит, делаем письмо-дайджест.

Рисуем прототип

Прототип нужен, чтобы продумать количество колонок, взаимоотношения между блоками и получить общее представление о макете. Такие «черновики» часто используют, чтобы показать клиенту концепцию страницы. Сделать прототип можно в Photoshop, Balsamiq или Axure. А можно нарисовать от руки.

Прототип письма на бумаге и в Photoshop
Прототип письма для GuitarPlay.com на бумаге и в Photoshop

Создаем окончательный макет

Макет делаем в фотошопе. Вы можете выбрать любой аналогичный сервис. Из-за того, что сервиса GuitarPlay.com не существует, можем придумывать все, что захотим. Начнем с прехедера и шапки.

Прехедер и шапка email
Прехедер и шапка письма

В названии использован декоративный шрифт. Его можно объединить вместе с логотипом в единое изображение.

Перехожу к телу письма. Для текста я выбрал безопасный шрифт Sans Serif. Модуль под абзацем «Как взять баррэ?» — это картинка с наложенным сверху значком YouTube. Сюда нужно вшить ссылку на видео.

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

В теле есть проблемы с отступами. Например, здесь название не может определиться, к чему оно больше тяготит — к изображению или тексту:

Ошибка: равные расстояния от заголовка до шапки и текста
Расстояние до изображения и текста практически одинаковое

Подвинем название ближе к тексту.

Правильное расстояние между заголовком письма, шапкой и текстом
Теперь понятно, к чему относится название

Проделал тоже самое с остальными интервалами:

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

Чтобы еще больше разделить модули, можно добавить горизонтальные линии. Вот конечный вариант письма с подвалом:

https://gyazo.com/605a7bae6bd0dd84bf7cc8c1297a6cab

Основную часть закончили. Теперь нужно проверить, все ли элементы дизайна можно перенести на языки разметки. Мы подготовили чек-лист с 20 правилами подготовки макета письма к версткеВ него надо заглянуть, прежде чем отдать макет верстальщику или начать верстать письмо самостоятельно.

Запомнить

  1. Максимальная ширина письма — 600 px. На длину ограничений нет.
  2. Письмо состоит из прехедера, шапки, тела и подвала. В них находятся модули, которые не пересекаются и не накладываются друг на друга.
  3. Для основного текста рассылки нужно выбирать «безопасный» шрифт. Декоративные шрифты переводим в изображения и потом добавляем в письмо.
  4. Буквы, строки и отдельные модули не должны слипаться между собой. Чтобы такого не случалось, пользуемся правилом внутреннего и внешнего.
  5. У большинства рассылок есть фирменный дизайн. Для этого дизайнеры используют одни и те же шрифты, цвета и структуру во всех письмах.
  6. Почтовые приложения не отобразят Flash-объекты и видео. Прежде чем вставить что-то новое, убедитесь, что почта это поддерживает.
  7. При создании макета можно опираться на алгоритм: определить цель письма → нарисовать прототип → создать окончательный макет → проверить по чек-листу.