Кинетическая ракета
Москва, ул. Бауманская, 7+7 (495) 792-29-50
Барнаул, ул. Балтийская, 248 800 700-02-07
Оставить заявку
Нажимая на кнопку, вы соглашаетесь с условиями политики конфиденциальности
или напишите нам:

Что учесть в визуальном стиле письма?

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

Леонид

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

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

Постоянство и выразительность стиля

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

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

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

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

Что учесть в визуальном стиле письма?

Минимализм и простота — основа визуального стиля Эпл

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

Что учесть в визуальном стиле письма?

Можно убрать логотип и подписи, но мы все равно поймем, что это Эпл из-за преемственности визуального стиля

Польза и удобство

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

  • из хедера понятно, от кого пришло письмо;

  • заголовок раскрывает тему письма;

  • баннер и текст на нем доносят основную мысль;

  • CTA четко сообщает, что требуется от читателя;

  • футер дополняет письмо контактами, адресом, ссылками на соцсети бренда.

Рассмотрим подробнее этот принцип на двух примерах.

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

Что учесть в визуальном стиле письма?

О новой модели рассказали просто и понятно, а еще показали, где ее можно купить

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

Что учесть в визуальном стиле письма?

Глаза разбегаются, сосредоточиться на чем-то одном сложно

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

Явная структура

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

Я придерживаюсь «правила внутреннего и внешнего» — это когда внутренние расстояния одного элемента должны быть меньше внешних. Например, межбуквенное расстояние должно быть меньше пробелов между словами.

Разберем на примерах Шанель и Бумстартера.

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

Что учесть в визуальном стиле письма?

Аккуратное письмо легко воспринимается,
а предложение бренда считывается за 10-15 секунд

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

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

Что учесть в визуальном стиле письма?

Чтобы разобраться в тарифах, нужно вчитываться и переходить на сайт

Ограничения

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

  • Рекомендуемая ширина письма — 600px. Макеты больше этого ограничения будут отображаться на некоторых устройствах не полностью, может появиться горизонтальная полоса прокрутки.

  • Шрифт всегда подбирайте из «безопасного списка»: Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Courier New, Times New Roman, Georgia. Эти шрифты будут корректно отображаться во всех браузерах и почтовиках.

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

  • Встраивать видео в письма нельзя из-за технических ограничений почтовиков. Вместо видео используйте картинку или гифку с кнопкой Play, которая по клику будет вести на видео. Используйте гифки до 1МБ, чтобы письмо быстрее грузилось.

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

Brand / Icon / Simple / SimpleIcon@3x Created with Sketch.