Дизайн email-рассылки — это оформление писем с помощью различных блоков и визуальных элементов.
Стандартные блоки — это хедер, тело письма и футер (подвал). К визуальным элементам относят логотип компании-отправителя, иллюстрации, фирменные цвета, шрифты, интерактивные элементы.
Наличие тех или иных составляющих зависит от наполнения и задачи конкретного письма.
Пример дизайна рассылки от «Нетологии». Письмо не перегружено элементами и цветовыми решениями — спокойный фон, одна основная картинка, короткий текст и призыв к действию
Какие задачи решает дизайн в рассылках
Дизайн рассылок влияет на общую визуальную привлекательность и на функциональность письма.
От дизайна зависит, дочитают ли подписчики письмо до конца, совершат ли желаемое действие. Более того, если не соблюдать правила оформления при создании писем, рассылка и вовсе может попасть в спам.
А еще рассылки, оформленные в одном стиле, повышают узнаваемость бренда.
В каждом письме от S7 есть логотип компании, а кнопки окрашены в фирменный зеленый цвет
Рекомендации по оформлению писем
Вот некоторые правила, которых стоит придерживаться в дизайне рассылок, чтобы достигать желаемых результатов.
Подготовьте шаблоны
Это инструмент для создания письма, его основа. Шаблон помогает придерживаться нужной структуры, единого оформления и упрощает процесс подготовки рассылок.
Дизайн-система — мастхэв, чтобы сделать ваши рассылки узнаваемымиИспользуйте разные шаблоны для разных типов писем с необходимым набором элементов — текстом, изображениями, гифками, карточками товаров. В сервисах email-рассылок можно выбрать и отредактировать готовые шаблоны или создать свои.
Также можно подготовить единый мастер-шаблон — универсальный набор элементов и блоков для разных типов рассылок. Разработкой мастер-шаблонов занимаются дизайнеры и верстальщики. В результате получается основа, из которой удобно брать готовые блоки для любого письма. Мастер-шаблон значительно ускоряет процесс создания рассылок.
Мастер-шаблон — универсальный шаблон, который содержит все необходимые блоки письма. В зависимости от задачи блоки и элементы можно редактировать, удалять или дополнять
Определитесь с цветовой гаммой
Цвета в письмах должны соответствовать фирменному стилю, но при этом не отвлекать внимание от содержания рассылки. Яркие цвета можно использовать для важных элементов и комбинировать их с более спокойными и приятными оттенками.
Для поиска гармоничных и эффективных цветовых решений можно проводить A/B-тестирования.
Черный фон в десктопной версии письма от музея «Гараж» кажется немного навязчивым
При этом в мобильной версии черный фон создает контрастную рамку и упрощает восприятие. Если большинство подписчиков открывают рассылку музея на смартфонах, такое цветовое решение оправдано
Продумайте дизайн основных блоков и элементов письма
Хедер. В шапке письма обычно размещают лого компании-отправителя, меню со ссылками на нужные разделы сайта, контактную информацию. Хедер не должен быть перегружен ссылками или текстом — многие компании размещают в нем только логотип или название.
Хедер писем Westwing Shop содержит логотип и кликабельное меню с разделами сайта
В хедере рассылки Zara Home есть только логотип компании
Текст и шрифт. Правильно оформленный текст с понятной структурой, абзацами и подзаголовками легко воспринимать. Важную информацию и главные мысли лучше выделять в подзаголовки или выбирать для них другой шрифт.
Количество текста зависит от задачи и типа письма. Идеального объема текста для рассылки не существует. Лучше отталкиваться от пользы и смысла, который необходимо донести до читателя.
Рассылки с минимальным количеством текста подойдут для подборок товаров и услуг, анонсов, оповещений о скидках и акциях, более длинные — для дайджестов, обучающих рассылок.
В рассылках Arzamas практически отсутствуют визуальные элементы и основную часть письма занимает текст
В рассылках PichShop текст присутствует только в заголовке и подписях к картинкам
Шрифт в рассылках также имеет значение. Есть безопасные шрифты, которые поддерживаются всеми почтовыми сервисами: Arial, Times New Roman, Verdana, Tahoma.
Безопасные шрифты корректно отображаются в письмах и удобны для чтения. В блоге Unisender можно более подробно прочитать о том, какие шрифты использовать в рассылках.
Изображения. Картинки в письме нужны не столько ради красоты, сколько чтобы дополнить и усилить текстовое сообщение.
Изображения должны соответствовать общему стилю компании — содержать фирменные цвета, узнаваемые элементы или графику.
Картинки для анонса статей в дайджесте Unisender сделаны в одном стиле
При добавлении изображений в рассылку необходимо учитывать их размер. Письмо с тяжелыми картинками будет грузиться дольше, а изображения могут и вовсе не отобразиться.
Так выглядит письмо, в котором не прогрузились картинки
По этим же причинам не стоит оформлять все письмо одной картинкой. Кроме того, почтовые сервисы нередко определяют такие письма как спам.
Ширина изображения ограничена шириной шаблона для письма — обычно это 600 пикселей, ограничений по высоте нет, средний рекомендуемый размер картинки — 200 кб. В конструкторе писем Unisender можно использовать картинки объемом до 500 кб.
Оптимизировать изображения помогут специальные сервисы: Tinypng, Squoosh, Optimizilla.
Изображения в большинстве рассылок делают кликабельными — к картинкам можно прикручивать ссылки на определенные разделы сайта.
Призыв к действию (CTA). Кнопки призыва к действию обычно оформляют контрастными цветами, придерживаясь общего стиля и цветов бренда. Яркий цвет кнопки привлекает внимание подписчиков к действию.
Если письмо содержит только один call-to-action, лучше разместить его ближе к началу, на первом экране. Или сделать рассылку короче, чтобы одну кнопку не приходилось долго искать. В длинные письма добавляют несколько кнопок, которые соответствуют разным действиям.
Контрастная кнопка призыва к действию сочетается с акцентами на изображениях и привлекает внимание подписчиков
Футер. В подвале письма обычно размещают контактную или юридическую информацию, ссылки на соцсети, кнопку отписки. При этом важно, чтобы ссылку для отписки было легко найти. Если подписчик не сможет отписаться, он отправит письмо в спам, а это повредит репутации отпраителя.
Футер рассылки от «Ситилинка» оформлен с использованием фирменных цветов, а еще в нем есть популярные мемы из группы ВКонтакте, которые побуждают читателя подписаться на соцсети магазина
Лаконичный футер одной из рассылок «Т—Ж» содержит короткую подпись, ссылки на соцсети и кнопку отписки
Сделайте рассылки адаптивными
Адаптивный дизайн позволяет правильно отображать содержимое письма на разных экранах — мобильных и десктопных.
Отсутствие адаптивности под мобильные устройства может испортить письмо. Например, ссылки или кнопки с призывом к действию окажутся слишком мелкими и пользователи не смогут выполнить желаемое действие.
Стандартный размер шаблона для десктопа — 600 пикселей, для мобильных устройств — 320 пикселей. Более широкое письмо не поместится в экран и будет неудобным для восприятия.
Современные сервисы рассылок автоматически адаптируют письма под стандарты, но лучше дополнительно проверять готовую рассылку перед отправкой.
Адаптивную рассылку удобно читать на мобильном устройстве, а еще здесь большие кнопки, по котором легко с первого раза попасть пальцем, не прицеливаясь
Также одно из относительных новшеств — это «тёмная тема» (dark mode) в письмах. Она иногда включается на устройствах. Например, на смартфонах в вечернее время суток, чтобы меньше напрягать глаза. При этом цвета в рассылках меняются на противоположные: светлые участки становятся тёмными, а тёмные, наоборот, подсвечиваются.
При разработке современного дизайна писем желательно учитывать, как они будут выглядеть не только на смартфонах в адаптированном виде, но и в режиме «тёмной темы». Если этого не предусмотреть на этапе дизайна и вёрстки шаблона, в дальнейшем какие-то части письма могут отображаться некорректно. Например, логотип, загруженный с непрозрачной подложкой, окажется обведённым белым прямоугольником на чёрном фоне, какие-то элементы станут неконтрастными, плохо различимыми и так далее.
Главные мысли
