Как создать потрясающий дизайн рассылки: советы и примеры

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

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

Респонсивность

По данным Litmus, половина всех писем открывают с мобильных устройств, поэтому позаботиться о респонсивности письма — обязательно. Респонсивность прописывается в CSS верстке шаблона, но на этом она не заканчивается.

Что нужно для корректного отображения на мобильном устройстве:

• Верстайте в одну колонку.
• Оптимальная ширина шаблона для мобильных устройств — 600 px.
• Кнопки CTA — не меньше 44*44 px, чтобы легко было попасть пальцами на смартфоне. По той же причине откажитесь от множества ссылок.
• Размещайте важные элементы дизайна рассылки, такие как CTA, в верхней части письма. Подписчик не должен прокручивать письмо до конца в поисках кнопки. Забудьте о том, что люди будут тратить на это время.
• Не пишите много. Письмо для мобильного должно быть кратким и по сути.
• Проверяйте, как письмо выглядит на разных устройствах. В SendPulse эта возможность есть при создании любой рассылки.

Также вы можете бесплатно воспользоваться готовым респонсивным шаблоном в галерее SendPulse или составить свой дизайн письма в удобном drag and drop редакторе.

Цвета

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

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

Контраст важнее цвета, когда нужно выделить главное. Hubspot в течении двух дней проводили A/B тест, отправляя одно и то же письмо с красной и зеленой кнопкой CTA. В результате, красная кнопка победила зеленую с отрывом в 21%. А все потому, что красный цвет более контрастный, чем зеленый.

Типографика

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

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

Советы для удобочитаемости текста:

• Эффекты для шрифтов, такие как обводка, подчёркивание, тень, лучше не использовать.
• Прописные буквы нужно разряжать, а строчные — нет.
• Межстрочный интервал не может быть меньше пробелов между словами.
• Чем длиннее строка — тем больше межстрочный интервал.
• Если между двумя абзацами заголовок, то заголовок должен прилегать к своему абзацу, а не стоять ровно посредине между ними.

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

Корпоративный стиль

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

Распространённая практика — размещать разделы сайта прямо в письме. В этом случае письмо становится расширением сайта в почтовом ящике, и пользователь может сразу перейти к покупкам.

Соотношение изображений и текста

Спам фильтры почтовых клиентов часто не пропускают письма с большим количеством изображений, и мнения о том, какое же соотношение лучше, очень расходятся. Что считать эталоном — 60-40, 80-20 или 70-30?

Чем длиннее у вашего IP адреса история рассылок с хорошим open rate и минимальными жалобами на спам, тем больше вы сможете добавить изображений без ущерба для доставляемости. Ведь соотношение текста и картинок не единственный и не самый решающий критерий, влияющий на доставляемость. Большое значение имеет репутация IP адреса. Если с него не делали рассылок, тогда картинки в письме вероятнее всего повлияют на доставляемость.

Исходя из этой логики, новичкам рекомендуем брать соотношение 80-20, и минимум 500 символов текста.

CTA

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

A/B тесты

Не уверены, какой вариант дизайна принесет больше кликов и переходов? — Создайте несколько вариантов и запустите рассылку с A/B тестом. К примеру, можно создать два шаблона: в первом кнопка CTA будет красного цвета, а во втором — синего. В SendPulse можно настроить автоматическую отправку рассылки с A/B тестом.

А теперь давайте посмотрим, как известные компании используют эти и другие приёмы для создания привлекательного дизайна рассылок.

Примеры хорошего дизайна рассылки для вдохновения

National Geographic

National Geographic в дайджесте приглашают к участию в ежегодном конкурсе фотографии Your Shot. В верхней части письма фото из галереи, ниже заголовок «Покажите нам мир», за ним короткое описание и желтая кнопка СТА, которая хорошо контрастирует с белым фоном. Взгляд скользит естественным образом от фотографии к заголовку и к яркой кнопке.

Ниже расположены секции с разделами галереи «Природа», «Города», «Люди», чтобы посмотреть работы других фотографов. Если вы все еще не вдохновились на участие в конкурсе, внизу письма рассказывается о главном призе за первое место и призыв действию: «Выиграть приз». А приз — 10-ти дневная экспедиция на Галапагосские острова для двоих. Хороший стимул, подкрепленный подводной фотографией галапагосской черепахи.

Mable’s Labels

«Да пребудет с вами четвертое мая!» — именно так звучит интерпретация крылатой фразы Йоды в рассылке от магазина наклеек Mable’s Labels, ко дню Звездных Войн.

Читателям предлагаются скидки 40% на детские именные наклейки с галактическим дизайном.

Фотография мечтающего о полете ребенка расточает тепло и вызывает положительные эмоции. А яркая розовая кнопка с надписью: «Купить теперь должен ты», в стиле речи Йоды, подталкивает к покупке. Классическая схема — вызвать эмоции и сразу указать на целевое действие.

Chanel

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

Topshop

Лаконичный дизайн, черно-белое фото девушки, иерархия шрифтов, ярко розовый текст с крупной розовой кнопкой, и читателю сразу понятно, что распродажа расширилась — вперед за покупками!

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

True Citrus

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

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

У True Citrus фирменный шаблон в яркой цветовой гамме, с логотипом и девизом компании — #KeepsYouTrue. По центру расположена вдохновляющая фраза недели «Стремитесь к прогрессу, а не к совершенству», а над ней расположены разделы сайта, чтобы читатель под приятным впечатлением и на эмоциях сразу перешел к покупкам.

True Citrus активно пользуется психологическим приемом социального доказательства, в каждом письме демонстрируя количество счастливых клиентов в этом месяце.

А вот примеры вдохновляющих мыслей от True Citrus, собранные нами за шесть недель.

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

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

Берите себе на заметку — именно так разогревают лиды и повышают вовлеченность аудитории.

Mud Pie

Бренд одежды Mud Pie предлагает принять участие в конкурсе фотографий своего стиля в одежде от Mud Pie. Фото нужно опубликовать в Инстаграм со специальным хештегом, а победитель недели получает 100$ на покупки.

Пример внизу демонстрирует, как можно объединить пользовательский контент в Инстаграм с email маркетингом и сделать это со вкусом.

Фотографии оформлены подобно тому, как люди крепят у себя дома на стене или на холодильнике фотокарточки счастливых моментов. Появляется ощущения уюта, а не рекламности, и при этом возле каждого блока стоит призыв к действию, который намекает: «Хотите так выглядеть? — Тогда вперед, за покупками!».

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

Starbucks

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

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

J. Crew

Неожиданно вкусная фотография в рассылке от бренда одежды J.Crew с заголовком «Это стоит прокрутить до конца». Эстетически привлекательное изображение вызывает аппетит и интригует — что же скрывается за картинкой? Не часто получаешь письма такого формата от брендов одежды.

Kate Spade

Мы приготовили для вас два примера от бренда Kate Spade, который часто балует своих подписчиков креативными и красочными рассылками.

Письмо, приуроченное ко Дню Матери, преподнесли весьма оригинально: в виде переписки в мессенджере с сестрой, которая пишет вам, что купила сумку Kate Spade в подарок маме и одну взяла себе.

Шрифт, которым прописаны сообщения мессенджера, характерен для всех рассылок бренда. Акценты дизайна позволяют быстро просканировать главное в письме: фото сумки — «Гид по подаркам ко Дню Матери» — «Бесплатная доставка» — «Варианты доставки».

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

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

Nintendo

В письме-подтверждении от Nintendo вас приветствует культовый персонаж 90-х, Марио. В нем удачно расставлены акценты и читателю легко понять логику письма: «Вы успешно зарегистрировались в клубе “My Nintendo”, привяжите свой акаунт к Nintendo ID и зарабатывайте баллы!».

Ives Rocher

Рекламная рассылка Ives Rocher презентует клиенткам бренда свой журнал о секретах красоты и уважению к природе. Атмосферные фотографии природы хорошо дополняют идею журнала и его описание.

Два раза проставлен логотип журнала — это повышает его визуальную узнаваемость.

А также есть две кнопки перехода на журнал. Первая кнопка стоит после описания философии издания, а вторая — после двух статей из этого журнала, которые выполняют роль тизера.

Adidas

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

Apple

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

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