ТОП-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. Эти элементы привлекают внимание и повышают вовлечённость.
