Заказать демо Войти

ТОП-5 лучших дизайн‑версий HTML-писем для электронной рассылки

Удивляться, вдохновляться, положить в список референсов.

Дизайн письма в рассылке — это не только про красоту. Правильно расставленные визуальные акценты, цветовая палитра и шрифт — всё это управляет вниманием читателя.

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

Делимся дизайнами HTML-писем, которые захватили наше внимание.

Дайджест Musicbed: летний вайб в каждом блоке

Каждый месяц музыкальный сервис Musicbed высылает подписчикам дайджесты с тематическими релизами.

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

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

Промо‑рассылка от Yolele: внимание, Чёрная пятница

Дизайн, который моментально расставил акценты на самом важном: Black friday, продукт, оффер, кнопка.

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

Вот оно — управление вниманием во всей красе и пользе. Опять же: основной текст можно не читать — всё понятно с первого взгляда, ведь письмо «сканируется» при беглом прочтении по нужному бренду пути.

Макдоналдс: любовь с первого баннера

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

Нам нравится, что из главного баннера сразу становится ясно всё: чёткий оффер, креативная кнопка и, конечно, аппетитный бургер, из дизайна которого сразу становится ясно, что Биг Мак — действительно «биг».

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

Welcome-триггер от Fly By Jing: познакомиться как следует

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

Второе, этот триггер — настоящее, дружеское знакомство с рестораном и его создательницей. 

На баннере сразу отвечают на вопрос «А почему Fly By Jing?» и намекают на продолжение истории, которая и разворачивается в следующих блоках.

EmailMatrix: мотивировать доскроллить до самого «дна»

Одно из самых увлекательных писем, которые мы видели за последнее время. В Этом письме дизайн — главный герой. Реализация креативной задумки построена именно на оформлении и заставляет пользователя проскроллить до конца страницы.

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

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

Как улучшить дизайн в своих рассылках?

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

  • Собирать референсы. Насмотренность отлично помогает, когда вы сталкиваетесь со сложной задачей по оформлению, и вырабатывает вкус. Вдохновляйтесь крупными брендами, находите лучшие дизайны и подумайте, как выделиться на фоне конкурентов. Ищите лучшие примеры на Really Good Emails или Email-Competitors.
  • Экспериментировать. Стройте гипотезы и проверяйте каждую из них на практике. А когда получите результаты, постройте ещё гипотезы на их основе.
  • Добивайтесь WOW-эффекта. Добавляйте в рассылки счётчики, опросы, маскотов, APNG или AMP. Эти элементы привлекают внимание и повышают вовлечённость.
Заказать демо