Email-рассылка – это визитная карточка бизнеса в общении с подписчиками. Каждый человек, открывая сообщение, в первую очередь обращает внимание на визуал, а после уже на текст. Структура и наполнение email: графика, иллюстрации, цвета, шрифты – это все играет важную роль в прочтении письма до конца и влияет на выполнение пользователем нужного действия. В этом материале мы делимся рекомендациями для дизайна email-рассылок.
Изображения
Письмо не должно быть в виде одной картинки: оно может просто не отобразиться. Помимо этого, сообщения-картинки часто не пропускаются фильтрами почтовиков.
Баннер
Он задает тон письма, поскольку обычно размещен в начале сообщения. Иногда делают несколько баннеров для разных текстовых блоков. Каждый из них должен быть ярким, привлекательным, соответствовать стилю компании. В основную картинку можно включить логотип, если его нет в шапке. Также рекомендуем добавлять на большой баннер СТА. Оптимальные размеры баннера: высота – 300px, ширина – 600px.
Alt-текст
Любое сообщение должно хорошо выглядеть и без картинок, потому что у некоторых пользователей изображения не загружаются автоматически. В таком случае, чтобы получатель смог понять смысл, нужно прописать Alt-текст к каждой картинке.
Изображения для карточек товара
Всегда лучше увидеть товар, чем читать рассказ с его описанием. Поэтому товар нужно показать во всех ракурсах, а еще лучше – в действии. Для этого подойдут качественные фото деталей, анимации. Если у товара есть несколько вариаций цветов, моделей и т. д, можно использовать эффект “ролловер”: при наведении на картинку она будет меняться на другую.
Пытаясь добавить как можно больше товаров в письмо, подумайте о юзабилити и эффективности такого решения. Чем больше изображений в ряду, тем меньшего они размера и тем тяжелее что-то на них рассмотреть. Поэтому больше 3 карточек горизонтально размещать не принято. При этом лучше позаботиться о том, чтобы эти изображения были в одном размере или соотношении сторон. Альтернативой может быть нестандартное размещение товаров.
Нестандартное размещение товаров в письме
Dark Mode
Чтобы в темном режиме картинки выглядели так же корректно, как и в обычном, делайте следующие элементы с прозрачным фоном:
- логотип и заголовки картинкой;
- иконки социальных сетей;
- изображения товаров;
- фото автора рассылки.
Так не будет выделяться стандартный белый фон. А если ваши изображения в черном цвете, то добавьте светлую тень или обводку, чтобы они не сливались в одно темное пятно. Больше рекомендаций для dark mode найдете в отдельной статье.
Темный/обычный режим
Фон
Восприятие одного и того же сообщения на разных фонах будет отличаться. У письма есть два фона: подложка (общий фон) и фон самого емейла. Подложка часто не показывается на мобильных устройствах. Ее лучше сделать в нейтральных оттенках или подобрать изображение, соответсвующее инфоповоду. Важно, чтобы она не уводила фокус от самого письма.
Нейтральная подложка письма
Фоновое изображение
Картинку для фона письма вообще не обязательно использовать. В некоторых почтовиках она заменяется сплошным серым или белым фоном. Например, Outlook не показывает фоновые изображения. Если вы все же решите его добавить: оно не должно отвлекать от текста, поэтому не стоит увлекаться узорами и яркими заливками. А для коварных почтовиков сделайте альтернативный однотонный фон, приближенный по цвету к выбранному изображению, чтобы сохранить концепт.
Негативное пространство
В дизайне писем для рассылки нужно использовать больше свободного пространства. Оно определяет не только границы элементов, но и создает эффективную визуальную композицию, помогает подписчику быстро сконцентрироваться на нужном объекте/месседже сообщения. Когда макет напичкан огромным количеством элементов, это перегружает читателя информацией, отвлекает и в результате он скорее закроет сообщение, чем будет пытаться понять, что же вы хотели донести.
На примере рассылки от Apple с использованием пустого пространства можно увидеть, как контраст с фоном, минимум текста, яркие цвета и свечения акцентируют внимание на MacBook.
Не забывайте оптимизировать графику: письмо с тяжелыми картинками загружается дольше, а никто не любит ждать. Каждое изображение должно весить до 1 Мб.
К выводам
При составлении дизайна и верстке писем для рассылки нужно учитывать все составляющие: каждый блок имеет определенную значимость и не должен нарушать общую структуру. Чем меньше отвлекающих факторов, тем выше шансы, что вас правильно поймут.
Не старайтесь добиться совершенства в дизайнерских фишках: то, что они понравились вам, не значит, что они понравятся всем. Точнее, обязательно кому-то они не понравятся и это нормально. Чтобы создать привлекательное во всех смыслах сообщение:
- соблюдайте основные правила создания рассылки;
- помните, что в зависимости от структуры мобильная и десктопная версии писем могут отличаться – делайте сообщения адаптивными;
- учитывайте тренды в дизайне email-писем;
- проводите предварительное тестирование верстки и дизайна письма и отдельных его элементов.
Каким именно будет оформление рассылки, решаете вы. Воплощайте даже самые смелые решения и создавайте стильные, узнаваемые емейлы с помощью широкого и удобного функционала eSputnik!