Design vs Email. Секреты красивых email-рассылок

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

Часто мы забываем, что письмо, которое лежит в нашем ящике - это маленький landing page, который должен производить положительное впечатление не только качеством контента, но и своим внешним видом. Именно взаимодействие качественного контента и визуальной части в создании email рассылки мы и рассмотрим сегодня.

Роль цвета в дизайне емейл-рассылок

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

1. Неуместный контарст

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

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

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

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

2. “Я покрашу все черным”

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

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

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

Однотонный градиент сверху вниз (равно как и снизу вверх) вызывает ассоциации с грязными потеками на стенах или чем-то выцветшим, несвежим, что совершенно не располагает человека к позитивному восприятию вашей емейл рассылки.

На примере ниже мы видим как раз неправильное использование однотонного градиента, который отдает то ли ржавчиной, то ли плесенью на стенах.

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

3. Сочетание цветов

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

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

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

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

4. Красный больше не продающий?

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

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

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

Решение довольно простое - оставляем три цвета:

• красный для акцентов

• черный для текста

• белый для фона

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

5. Мелких деталей не бывает

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

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

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

Исправляется такая оплошность банальной сменой цвета с красного на белый. Вот и весь секрет больших мелких деталей.

Дизайн рассылки и текст

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

• используйте максимум 3 шрифта (и максимум 3 начертания в них);

• используйте максимум 2 цвета, чтобы представить текст (например, черный заголовок и темно серый основной текст).

• шрифты должны соответствовать общей стилистике сайта/брендбука/отдельной серии рассылок.

6. Правильные шрифты

Знаете, как это часто бывает, увидел красивый шрифт на каком-то сайте, немного поискал, посмотрел и вот уже собралась увесистая папка с разными шрифтами. Что же с ней делать? Конечно не использовать все находки в одном письме!

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

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

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

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

7. Не в цветах дело

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

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

8. Разместить любой ценой

Иногда бывает так, что разместить текст на картинке ну очень нужно, а картинка не подходит по требованиям. В этом случае многие дизайнеры создают поверх картинки полупрозрачный прямоугольник и вписывают в нее текст. Такое решение очень долго считалось приемлемым, но в 2017 вид картинки с прозрачной плашкой на ней только отталкивает, при этом прозрачный прямоугольник «съедает» часть картинки.

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

9. Информация превыше всего

Главная наша задача - донести информацию. Не зависимо от типа письма, в любом случае, читатель должен получить информацию. Запомните, невозможно получить информацию, если сделать цвет текста лишь немного светлее/темнее цвета фона. Такой текст и вовсе можно упустить из виду при пролистывании письма.

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

10. И так сойдет

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

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

Эпилог

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

Для всех новых подписчиков мы готовим бесплатный индивидуальный дизайн в стиле их сайта. Хотите получить бесплатный шаблон и форму подписки? Регистрируйтесь - будем рады видеть вас в числе наших клиентов.