Дизайн email-рассылки: создаем письмо, которое достигает цели

Дизайн email-рассылки: создаем письмо, которое достигает цели

 

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

 

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

 

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

 

Содержание:

 

Элементы эффективного дизайна email-рассылки

      Привлекающий заголовок и основной баннер

      Четкая иерархия контента

      Продающие изображения и графика

      Цветовая схема и типографика

      Оформляем призывы к действию (CTA)

Адаптация под различные устройства и почтовые клиенты

Тестирование и оптимизация дизайна

Советы по созданию дизайна email-рассылок (вместо заключения)

 

 

banner

 

 

Элементы эффективного дизайна email-рассылки

 

Привлекающий заголовок и основной баннер

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

 

Заголовок должен быть кратким, емким и интригующим, а баннер — визуально привлекательным и соответствующим содержанию письма.

 

Скриншот1

Пример хорошей структуры письма от компании True Sea Moss. В рассылке — скидка 20% на продукцию в честь Дня поминовения. Размер скидки, промокод и кнопку мы видим немедленно при открытии письма. А по баннеру с картинкой сразу можно понять, к чему приурочена акция

 

Четкая иерархия контента

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

 

Структура письма обычно такая: хедер с логотипом компании, баннер с цепляющим заголовком и кнопкой СТА, основная информация (текст, подборка товаров или что-нибудь еще), кнопка и футер с контактами.

  

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

 

Что такое мастер-шаблон для email-рассылки и как его создать

 

 

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

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

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

  • Сохраняйте лаконичность. Избегайте длинных предложений и многословия. Старайтесь формулировать свои мысли кратко и ясно.

 

gif_pisma

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

 

Продающие изображения и графика

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

 

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

  • Повышение читабельности. Графики, схемы и иллюстрации упрощают восприятие сложной информации.

  • Эмоциональная связь. Фотографии и инфографика способны вызвать эмоции, делая письмо более трогательным или убедительным.

  • Улучшение запоминаемости. Визуальные элементы дольше остаются в памяти, нежели просто текст.

 

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

 

Сколько же картинок использовать?

 

  • Для рассылок с акциями и подборками товаров достаточно одного цепляющего баннера с офером и карточек товаров с кнопками.

  • Для контентных рассылок можно использовать больше изображений, но следите, чтобы они не отвлекали от текста.

     

Оптимальное соотношение текста и картинок: 80/20 или 60/40. Исключение: подборки товаров, где картинки нужны для наглядности.

  

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

 

Цветовая схема и типографика

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

  

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

 

image2

Сайт ТЦ Неглинная и письмо от него же. Тот же шрифт, те же цвета — все это создает единый стиль

 

Также при выборе основного цвета для письма помните о его читабельности. Использование насыщенного корпоративного цвета в больших объемах может ухудшить восприятие текста.

  

image3

Отличный пример — «Золотое яблоко». Компания использует свой фирменный цвет в заголовках и иногда в отдельных визуальных элементах

 

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

 

Для корректного отображения используйте ограниченный набор «безопасных» шрифтов:

  

  • Arial

  • Arial Black

  • Georgia

  • Courier New

  • MS Sans Serif

  • Tahoma

  • Times New Roman

  • Trebuchet MS

  • Verdana

 

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

 

Оформляем призывы к действию (CTA)

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

  

  • Используйте контрастный цвет. Кнопка должна выделяться на фоне остального письма. Для этого выберите яркий цвет, который не используется в других элементах дизайна.

  • Увеличьте размер кнопки. Чем больше кнопка, тем выше вероятность, что на нее кликнут.

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

  • Используйте понятный текст. Текст на кнопке должен быть кратким, ясным и побуждать к действию. Используйте глаголы в повелительном наклонении, например «Купить», «Зарегистрироваться», «Перейти».

 

screenshot1

 

screenshot2

Подборка писем с хорошими кнопками. Даже при беглом прочтении глаз зацепится за эти СТА. P.S. Много синего в этой подборке — случайность :) Любые другие цвета точно так же привлекают внимание. Главное — хорошо выделить кнопку

 

Не существует какого-то стандарта по числу кнопок, которое гарантирует максимум продаж или других целевых действий. Но чаще всего их помещают так:

 

  • В начале письма. После 1-2 предложений или прямо на баннере. Так кнопка будет сразу видна, без прокрутки. Люди сразу поймут, чего от них хотят, и смогут быстро перейти по ссылке, если предложение заинтересует. Современный читатель оценивает текст в течение 2-3 секунд. Сделайте эти секунды решающими и подсветите целевое действие! 

  • В конце письма. Перед подписью или футером. Те, кто дочитал письмо до конца, скорее всего, заинтересованы в предложении и с радостью кликнут по ссылке.

 

То есть для длинного письма достаточно 2-3 кнопок CTA. А если вы добавляете товарную сетку, то можно разместить кнопки прямо в карточках с каждым товаром.

 

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

 

 

Адаптация под различные устройства и почтовые клиенты

Представьте, что вы получили письмо от какой-то компании. Вы открываете его, но вместо того, чтобы приступить к чтению текста, видите кашу из слов, картинок и непонятных ссылок. Разочарование? Да! Скорее всего, вы сразу же удалите такое письмо, даже не вникая в его содержание.

 

К сожалению, многие компании до сих пор рассылают письма, не адаптированные под мобильные устройства. Это означает, что половина получателей (а ведь сегодня большинство людей открывает электронную почту на телефонах) не могут нормально их прочитать.

 

Как этого избежать? Используйте адаптивный дизайн. Это такой подход к созданию писем, при котором они автоматически подстраиваются под размер экрана устройства, на котором их открывают. Только в таком виде рассылку можно отправить пользователям.

 

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

 

screenshot3

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

 

Тестирование и оптимизация дизайна

A/B тестирование — это метод, который позволяет сравнивать два варианта дизайна письма, чтобы увидеть, какой из них работает лучше.

 

Как это работает?

 

  • Создайте два варианта дизайна, изменив в каждом только один элемент письма: например, заголовок, кнопку CTA или цвет фона.

  • Разошлите письма случайным группам подписчиков, гарантируя, что каждый получатель получит только один из вариантов.

  • Проанализируйте, какой вариант письма имел более высокий процент открытий, кликов или конверсий.

 

Что можно тестировать?

 

  • Заголовок: длина, формулировка, наличие эмодзи.

  • Текст: шрифт, размер, цвет, наличие картинок, списков, цитат.

  • Кнопку призыва к действию: текст, цвет, размер, расположение.

  • Разметку: количество колонок, расположение элементов.

  • Персонализацию: обращение по имени, использование истории покупок.

 

Анализируя результаты, вы получаете ценные данные о предпочтениях вашей аудитории.

 

 

banner

 

 

Советы по созданию дизайна email-рассылок

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

 

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

  • Структурируйте информацию. Разбивайте текст на короткие абзацы, используйте подзаголовки и списки.

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

  • Сделайте дизайн адаптивным. Убедитесь, что ваши письма корректно отображаются на любых устройствах, ведь большинство людей читает email-рассылки на смартфонах.

 

А если нужна помощь с рассылкой — обращайтесь в Handbox! Напишем продающие тексты, красиво оформим письмо и настроим отправку.