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