Фоновые изображения, удачно использованные в разных элементах емейла, способны сделать его более выразительным в целом и подчеркнуть главную идею рассылки.
- фон всего емейла,
- фон полосы,
- фон структуры,
- фон контейнера.
Фон емейла
Бэкграунд письма как правило окрашивают в нейтральные оттенки серого, а заливку тела шаблона делают белой. Но иногда стоит отходить от правил. Потому что по-настоящему красивые шаблоны для писем, обращают на себя внимание как рас своей неординарностью.
Общий цвет бэкграунда
Postman — это программное обеспечение для создания API, то есть их позиционирование связано с высокими технологиями. Чтобы передать эту идею, Postman традиционно использует образы, связанные с космосом.
А чтобы обрамить баннер в фирменном стиле, в этом приветственном письме используется тот же брендовый цвет, который можно увидеть и на сайте компании.
Стоит обратить внимание и на расположение блоков в этом емейле. У второй структуры справа и слева есть отступы в 10 px. Благодаря этому шаблон немного похож на бумажную открытку.
Общий цвет шаблона
В этом примере заливку сделали уже внутри емейла, под блоками с контентом.
Для этого в конструкторе шаблонов нужно выбрать цвет заливки и применить ее ко всему письму.
Не забудьте, что кнопки и текст должны хорошо читаться — для этого они должны контрастировать с фоном. Хедер и меню лучше всегда делать в стиле сайта, чтобы бренд был узнаваемым.
Фоновые изображения в подложке
В фоне можно использовать корпоративную символику и нейтральные оттенки. Или подобрать изображения, соответствующие инфоповоду.
Так, ювелирный магазин EFREMOV к выходу коллекции HONEY декорировал подложку пчелами.
Изображения на заднем фоне сразу привлекают внимание. Важно, чтобы такая подложка соответствовала как стилю, так и смыслу письма.
Фоновые изображения для контента
Создать необычный фон для контента сложнее, чем для подложки, ведь нужно помнить о том, как он будет сочетаться с товарами и темой письма.
Фон полосы
Полоса, выделенная особым цветом, моментально фокусирует на себе внимание и привлекает внимание к главному месседжу. Нужно помнить, что несколько ярких полос воспринимаются плохо, и не злоупотреблять этим приемом ради «вау-эффекта».
Структура с несколькими блоками
Лаконичный емейл в фирменном стиле Litmus.
Цвет подложки и шаблона — белый, и это добавляет письму воздуха. Благодаря этому голубая полоса не выглядит перегруженной, хотя содержит так много элементов:
- логотип,
- заголовок,
- текст,
- баннер.
Строка меню
Net-A-Porter с помощью фона делает акцент на меню, которое ведет читателя на соответствующие разделы сайта.
Контраст черного и белого смотрится стильно, а главное — соответствует дизайну сайта. Не забудьте проверить кликабельность и корректность ссылок.
Баннер
В этом примере от Virtus баннер разделили на три полосы.
Синяя заливка среднего акцентирует внимание на слогане «The Action Starts Now» и отлично контрастирует с цветом шрифта.
Футер
Футер тоже можно выделить цветом, если в нем находится важная информация.
Это могут быть:
- соцсети,
- разделы сайта,
- подпись отправителя,
- адреса, телефоны,
- ссылка на отписку.
Фон структуры
От четкости и логичности структуры емейла часто зависит, будет ли письмо прочитано. Ее фон поможет читателю сориентироваться в информационных блоках, да и просто может доставить эстетическое удовольствие.
Логотип
Логотип — это главный идентификатор бренда, поэтому многие компании выделяют структуру с ним ярким фирменным цветом, как это делает HubSpot.
Футер
Классический контраст черного и белого в примере от Chanel привлекает внимание к футеру.
Изображение в структуре
Harry Winston торгуют ювелирными изделиями, поэтому в их рассылках часто предлагают идеи для подарков, приуроченных к разным инфоповодам. Здесь это, конечно, свадьба. С помощью фона трех кнопок читатель сразу понимает тему письма.
Единственный минус этого емейла — недостаточно контрастный шрифт.
Текстура в карточке товара
Компания ARTEZA решила избавиться от привычного белого фона и разнообразила письмо яркой подложкой, удачно подчеркивающей карточки товаров.
Баннер
На этом примере видно, как получить баннер, просто залив структуру.
Меню
Меню выполняет не только практическую функцию, но может стать украшением емейла.
Хотя блок с меню встречается в емейлах все реже, многие популярные бренды продолжают делать на нем акцент в рассылках.
Фигурные элементы в структуре
Здесь мы видим, как выгодно подчеркивается структура емейла благодаря фону и яркому заголовку. А фигурный элемент придает письму экзотичности.
Фигурные элементы применяются в верстке email-писем довольно редко, но срабатывают почти всегда.
Фон контейнера
С помощью фона контейнера можно создать дизайнерский шаблон, даже абсолютно не разбираясь в HTML. Это эффективный инструмент как для обрамления фото товара и текста в товарной карточке, так и для создания полноценного баннера.
Карточки товаров
Что делать, если вам нужно поместить в письмо несколько карточек товаров, а фото в разных ракурсах и не становятся в общую композицию? Сделайте нужный акцент с помощью тематического фонового изображения.
Баннеры
Чтобы сделать баннер с помощью фона контейнера, нужно:
- загрузить в качестве фона структуры изображение,
- добавить контейнер с кнопкой и текстом.
Готово!
Даже если какое-то устройство или почтовый сервис не отобразят фон, основная текстовая информация будет доставлена.
Промокоды
Если промокод в письме нельзя скопировать, им могут так и не воспользоваться — слишком не юзерфрендли.
- загрузить в структуру баннер в виде фона,
- создать в структуре контейнер,
- написать промокод и залить его контрастным цветом.
Вот и всё 🙂
Текст
Если email состоит преимущественно из текста, то важную информацию лучше всего подчеркнуть, выделив цветом текстовый контейнер.
Особенно стоит обратить внимание на этот вариант тем, кто часто рассылает лонгриды и хочет разнообразить их.
Бонус
Сложно было пройти мимо этих примеров и не поделиться с вами)
Пример 1: Все и сразу
В этом письме использованы все мыслимые фоны: email, контейнеров, структуры... При этом:
- Фон товаров и контейнеров гармонично сочетаются друг с другом;
- Светло-серый фон отлично оттеняет меню, лого и футер.
Не нужно бояться нарушать правила в емейл-рассылках. Главное, чтоб результат нравился вам и вашей целевой аудитории.
Пример 2: Емейл-фейерверк
- Крупные элементы ярких цветов на фоне всего письма цепляют взгляд и заставляют проскролить письмо до конца;
- Фон контента в пастельных тонах оттеняет яркость общего фона;
- Шрифт хорошо контрастирует с фоном контента;
- Акцент сделан на основной идее.
Этот шаблон транслирует праздничные эмоции, которые наверняка стали причиной прямых продаж из этого письма.
Вместо заключения
К сожалению, фон емейла и его полос отображается только на десктопе, в мобильной версии поддерживается не более 600 пикселей контента.