Тренды в дизайне email-рассылок

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

Я проанализировала письма разных брендов в сегменте B2C за последний год. Показываю, какие приемы встречались мне чаще всего, и рассказываю, чем они интересны.

Нейросетевой стиль

Картинки, сгенерированные в Midjourney, Stable Diffusion или Kandinsky уже вовсю используют в маркетинговых коммуникациях — и рассылки не исключение. Искусственный интеллект пока не блещет креативом, но если нужен детализированный рисунок с каким-нибудь предметом или животным, вы получите такой арт за пять минут.

В моем почтовом ящике оказалось несколько писем, в которых техника исполнения иллюстраций похожа на работу нейросети.

Бренд книжных магазинов «Буквоед» кастомизирует нейросетевые картинки. Их всегда делают монохромными и вставляют в фирменную рамку в форме запятой. Получается узнаваемый дизайн даже со сгенерированной графикой. 

Часто попадаются сгенерированные фото людей. Сформулировать промпт и нажать на кнопку гораздо дешевле, чем организовывать фотосессию, и быстрее, чем искать нужный ракурс на стоках. Иногда в работах ИИ видны неточности анатомии, складок одежды, падающих теней. А иногда — просто необычайно гладкая кожа, идеальная прическа и смутное ощущение, что этот человек «нереальный». Но большинство пользователей не будут так вкрадчиво всматриваться. В рассылке Сбера даже специально подписали, что фото сгенерировано в собственном сервисе Sber AI — чтобы лишний раз впечатлить подписчиков мощью нейросети.

Детализированная 2D-графика

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

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

А ниже — интересный пример, как в 2D имитируют 3D с помощью градиентов: так нарисованы монеты. Бабочка и облака абсолютно плоские, и картинка привлекает внимание за счет этого диссонанса.

Нестандартная верстка

Чтобы длинное письмо дочитали, лучше делать верстку интересной, избегать монотонности. В рассылках от Samsung абзацы текста замиксованы с картинками в шахматном порядке. И сами картинки разные — иллюстрации, фото, взгляду есть за что зацепиться.

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

Еще один пример интересной верстки рассылки от Skyeng. Письмо разбито на несколько блоков на белых плашках. В начале плашек лиловые баннеры — то узкие, то более широкие. Сам контент нескучно организован: где-то разбит на два столбца, где-то используют рамки для выделения текста и добавляют мемы. В таком формате пользователь легко воспримет образовательные материалы, даже если открыл письмо на бегу.

Котики

Если вам казалось, что тренд на картинки с котами остался в конце 2010-х годов, спешу разубедить — эти звери незаметно захватили мир маркетинга. Как минимум у меня за прошедший год накопились десятки писем с котами всех пород, цветов и размеров. Возможно, вскоре котики станут самодостаточным элементом дизайна — как кнопки или иконки.

Подписчики Unisender тоже получают трендовые мемы:

Диаложное

Текст в диалоговом окне вовлекает пользователя в историю. В рассылке «Ленты» этот прием используют для объяснения условий использования сервиса. Читать неформальные сообщения, оформленные как диалог в мессенджере, легко и приятно — будто сам пообщался с техподдержкой.

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

Если хотите использовать похожие ходы в своих рассылках, читайте наш гайд по созданию смешных мемов.

3D-графика

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

Трехмерная графика не менее разнообразна, чем обычные иллюстрации. Например, объекты могут быть очень реалистичными, как в рассылках Skillbox.

А у Альфа-Банка всё подчинено геометрии: объекты созданы на основе простых фигур и расположены в изометрии.

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

Как сделать 3D-иллюстрацию: 5 онлайн-сервисов

Блок для фидбека

Многие компании в конце письма просят оценить рассылку. Обычно для этого предлагают поставить несколько звездочек, как в отзывах, или выбрать эмодзи. Но я нашла и более оригинальный дизайн. Вот пример со смайликами из символов вместо эмодзи — с заботой о миллениалах. Блок целиком классно смотрится, потому что линии скобок и подчеркиваний по толщине почти совпадают с линиями иллюстраций. 

У Aviasales тоже симпатично сделано — и снова с котиком.

Темная тема

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

Оригинальные кнопки

Обычно кнопка — это прямоугольник со скругленными углами, который залит одним цветом или простым градиентом. Но более неожиданный дизайн может привлечь к CTA больше внимания и повысить конверсию. Сделать кнопку необычной, но при этом похожей на кнопку — непростая дизайнерская задача. Некоторым брендам это удается. В следующем примере кнопку окрасили сложным градиентом из нескольких цветов и сделали обводку прерывистой линией.

А в примере ниже на кнопке разместили одновременно старый и новый ценник на курс. Никакого другого текста — все и так понятно.

Анимация и видео

Мне встречалось много рассылок с моушн-графикой. Преимущественно это крупные анимированные иллюстрации, призванные привлечь внимание к маркетинговому сообщению.

В нашей подборке инструментов для моушн-дизайна можно найти сервисы для создания анимации с нуля, даже если у вас нет в этом опыта. Даже незначительные эффекты помогут зацепить внимание подписчиков — как этот заголовок.

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

Также анимация и видео — хороший способ продемонстрировать суть товара или услуги. Например, графический редактор Topaz Labs наглядно показывает суть обновлений в письмах.

Акцентная типографика

Выравнивание текста, выбор шрифтов, размер и цвет надписей — тоже важная часть дизайна. Некоторые бренды уделяют особое внимание работе с типографикой, это возможность сделать дизайн запоминающимся, но не перегруженным. Например, в рассылке Сбера используют крупные трехмерные цифры с фирменным градиентом для оформления списков. Это запоминающаяся деталь, которая поддерживает общий визуальный стиль письма.

В следующем примере сделали акцент на заголовке. Он транслирует важное сообщение и приковывает к себе все внимание.

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

Что с этим делать?

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

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