Что интересного появилось в email-дизайне относительно недавно? Например, активно стали использоваться сломанные сетки и перекрывающиеся элементы.

 

Тенденции в email-дизайне: открытая композиция

Ранее мы писали про смелую типографику и яркие цвета с градиентами. Сегодня мы в DashaMail вдохновились западными рассылками и по мотивам статьи решили рассказать про email-дизайн с эффектом выхода за рамки.

Зачем ломать границы в письмах?

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

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

Harry’s

Взяв сетку за основу, Harry’s разбивает традиционную верстку с помощью шахматных модулей, реализуя эффект кирпичной кладки.

Behance

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

Pizza Express

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

Lastminute.com

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

Открытая композиция активно используется в рассылках ритейла

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

Boden

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

Lacoste

Lacoste умеет работать с абстрактным дизайном. Снимки моделей представлены отдельно от изображения продукта. Добавив в письмо “воздух”, они получили потрясающий дизайн.

Типографика, выходящая за границы

Работа с типографикой вне границ — это тоже здорово и интересно! Частично перекрывающийся текст на изображениях — еще один трюк, встречающийся в печатном дизайне и теперь в рассылках.

Что учесть, работая с типографикой, выходящей за границы, в письмах?

Во-первых, наложение текста на сами по себе загруженные изображения может осложнить прочтение. Поэтому необходим контраст между текстом и изображением.

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

J.Crew

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

Maude

Пример того, как даже чуть-чуть выходящая за границы типографика может сильно повлиять на восприятие.

Все приведенные выше примеры с открытой композицией и типографикой, выходящей за границы, предъявляют ряд требований к email-продакшну.

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

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

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

Дарья Савицкая, DashaMail

https://www.cossa.ru/