menu

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Модули

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

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

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

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

Шрифты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создавайте красивые письма в UniSender
Удобный блочный редактор, 100+ адаптивных шаблонов писем, встроенные рекомендации по верстке и дизайну рассылок
Попробовать
Как создать макет письма без дизайнера 7

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

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

Пример 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. При создании макета можно опираться на алгоритм: определить цель письма → нарисовать прототип → создать окончательный макет → проверить по чек-листу.

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

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

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