Сегодня сложно представить электронное письмо без кнопок призыва к действию, хедера и футера, а теперь ещё и без стильного фонового изображения. Такое письмо с визуальным оформлением выделяет его среди прочих, особенно если вы используете фон не только в колонтитулах письма. К тому же цвет и картинки подсознательно влияют на восприятие информации в сообщении.
Зачем расставлять акценты с помощью фона для письма:
- выделиться среди конкурентов — показать, что вы заботитесь о дизайне письма и хотите сделать его ярким и интересным.
- вызвать интерес и заставить читать письмо дольше — с хорошим фоном желание читать дальше может возрасти, т. к. письмо само по себе уже необычное.
- превратить ваше письмо в аналог небольшого веб-сайта — мини-лендинг в почте — точно необычно и то, что захочется дочитать до конца.
- создать интересный стиль, который запоминается читателям — запоминающийся фон будет ассоциироваться с вашей компанией.
Как выбрать цвет фона
Если первое время вам может быть сложно отказаться от стандартного белого фона, то подумайте, что использование фона для рассылок значительно изменит восприятие вашей рассылки в лучшую сторону. Посмотрите, как бренды смело используют яркие цвета фона и нестандартные фоновые картинки в рассылках.
Фон — это самый простой вариант улучшить дизайн рассылки, можно просто залить блок цветом или сделать картинку-подложку. Причём фоновое изображение нужно оптимизировать, а цвет без проблем отображается во всех электронных письмах. Также учитывайте, что у ваших пользователей может по умолчанию стоять тёмная тема почтового агента. Продумайте, как ваше письмо будет выглядеть в таком случае.
Доказано, что цвет влияет на психику, причём чем ярче и насыщеннее цвет, тем сильнее эффект от его воздействия.
Какой эффект производит каждый цвет
Бодрящие
- красный: побуждает к действиям, привлекает внимание, помогает принять решение, избыток вызывает агрессию и раздражение, поэтому не переусердствуйте с использованием.
- оранжевый: улучшает настроение, повышает активность и концентрацию, оказывает возбуждающий эффект на психику.
- жёлтый: ассоциируется с солнцем и радостью, поднимает настроение, стимулирует мозговую деятельность, побуждает к творчеству.
Эти цвета подойдут для привлечения внимания, побуждают совершить действие, помогут эффективно провести акцию или распродажу.
Успокаивающие
- синий: глубокие оттенки успокаивают и снижают активность нервной системы, дарят умиротворение и расслабляют, вызывают доверие и ассоциации с надёжностью.
- зелёный: тёплые оттенки этого цвета успокаивают, холодные — приводят в тонус, цвет дарит ощущение безопасности и избавляет от негативных эмоций.
- фиолетовый: дарит умиротворение и в то же время вызывает интерес, ассоциируется с загадочностью и философией.
Правила контраста
Использование контраста позволяет выделять объекты на изображении, а в нашем случае в дизайне писем. Контраст помогает человеку интуитивно выделить какие элементы важные, а какие второстепенные. Именно этим вниманием читателя вы должны управлять, думая об оформлении письма.
- цвет: используйте комплиментарные (противоположные на цветовом круге цвета), чтобы привлечь внимание к кнопкам действия или выделить нужные элементы
- размер: чем больше изображение или объект, там больше внимания он привлекает
- форма: если элемент отличается от всех другой формой, то человек его обязательно заметит
- текстура: изменение привычного фона выделяет элемент среди других
- ориентация: текст или изображение, которые расположены под углом к остальному контенту, будут перетягивать на себя внимание читателя
Когда вы размещаете текст на изображении, то используйте высокий контраст между ними. Однако не переусердствуйте, чтобы глаза читателей не устали от слишком жёсткого и яркого контраста. Много контраста — это его отсутствие, внимание человека будет перегружено. Используйте вот такой инструмент для подбора контрастного сочетания цветов (добивайтесь, чтобы показатель контрастности был в зелёной зоне).
Помните о «негативном пространстве» — это пустые белые места между элементами дизайна и текстом, позаботьтесь о том, чтобы «воздуха» в вашем дизайне было достаточно. Рекомендуемый коэффициент контрастности — минимум 4,5 : 1 (или 3 : 1 для крупного текста, что соответствует размеру шрифта 18pt или 14pt, если речь о жирном начертании). Попробуйте этот инструмент для проверки контраста, чтобы узнать, будет ли работать та или иная цветовая комбинация.
Как выбрать цвет для фона письма?
1. Ассоциации с цветом
Стоит помнить, что существует теория ассоциативных связей, где у разных групп людей определённый цвет вызывает свои ассоциации. Если в сфере финансов зелёный цвет ассоциируется с деньгами, то у фермера он может вызывать ассоциацию с растениями. Поэтому при выборе цвета подумайте о том, какой опыт взаимодействия с этим цветом есть у вашей аудитории и с чем он связан в их повседневной жизни?
2. Цветовая схема
Стильно выглядят письма, где используется не один цвет, а полная схема из трёх, которые сочетаются между собой. Выбирайте цвета, которые находятся или рядом на цветовом круге или контрастируют друг с другом.
3. Сочетание с брендом
Используйте цвет и фоновую картинку, которые связаны с посланием вашего бренда и дизайн-системой компании. У читателя должно возникать то же ощущение, которое вы хотите передать вашим клиентам: тёплое, строгое или весёлое.
4. Соответствие контенту
Учитывайте содержание письма при подборе оформления. Например, яркие цвета для акции и распродажи или тёплые оттенки для летних рассылок.
Как не надо делать
Избегайте цветовой схемы, состоящей из красных и зелёных цветов, особенно размещения зелёного текста на красном фоне и наоборот. Также плохо сочетаются синий на фиолетовом, розовый на красном или жёлтый на синем.
Старайтесь учитывать, что некоторые почтовые клиенты самостоятельно инверсируют цвета при переходе на тёмную тему, тогда при конвертации ваш дизайн может стать сложным для восприятия. Для таких случаев пропишите оформление для разных тем или запретите инверсию цвета в ваших рассылках.
Как сделать красивый фон для письма
После того как вы определились с цветовой палитрой рассылки, можете применять схему на практике. Используйте выбранные цвета в фоне и старайтесь подбирать изображения похожей палитры. Рассмотрим, как можно разнообразить фон для рассылки.
Один цвет для фона всего письма
Привычный и уже немного скучный белый фон письма стоит по умолчанию в шаблоне любого редактора писем. Можно заменить на бледный оттенок любого выбранного цвета, чтобы сделать письмо более привлекательным. Сам по себе фон не привлекает внимания, но контрастные блоки и кнопки на нём смотрятся выгоднее, чем просто на белой подложке. Например, Эльдорадо использует бледный оттенок для фона, на котором выделяются белые карточки, а красные кнопки и скидки отчётливее привлекают внимание.
Разные цвета для выделения смысловых блоков
У любого письма обычно блочная структура и разный фон таких разделов помогает легко понять, где заканчивается она часть и начинается следующая. Выберите цвета, которые будут выделять важные блоки, при желании можете разбавить их разделами на белом фоне. Так вы легко привлечёте внимание к нужной информации и заставите дальше прокручивать письмо.
Фон для выделения кнопок действия
Не секрет, что цель большинства рассылок — это побудить читателя совершить целевое действие. Достижению этой цели поможет более яркое выделение фона под кнопкой действия. Однако помните про сочетание цветов, чтобы не получить негативного визуального эффекта. Лучше всего наложить под кнопку тот же цвет, но менее яркий его оттенок или использовать нейтральный фон и яркий цвет кнопки.
Обозначение структуры письма
Любое письмо состоит из хедера, основной части и футера. Если вы ещё не используете эти элементы, то добавьте их в свои письма:
- в хедере, верхней части письма укажите название бренда и основные разделы сайта, к которым обычно обращаются покупатели
- в основной части используйте более бледный фон, чтобы на нём не потерялась важная информация (акции, скидка, кнопка действия), также постарайтесь использовать в этом разделе цвета, которые будут использованы в фоне футера и хедера, чтобы письмо выглядело в едином стиле
- в нижней части, в футере укажите ваши контакты, соцсети и другую справочную информацию, этот раздел также выделите контрастным фоном
Фон как подложка под продающее письмо
Если вам нужно привлечь внимание к событию, акции или важной информации, можно использовать оформленный баннер, а под него разместить фон для email подходящего цвета. Такое письмо будет больше похоже на рекламный буклет, но несомненно привлечет внимание читателей среди других, более стандартных писем. Однако такие письма не стоит рассылать слишком часто. Так как вёрстка всего письма в виде баннера нежелательна с точки зрения доставляемости (в письме нет текста, только картинка). Плюс, в письме как из примера текст теряется на фоне светлых блоков.
Фоновая картинка под телом письма
Фоновое изображение для письма — ещё один способ придать больше стиля и профессионального внешнего вида вашей рассылке. Как интересно можно добавить изображения в фон писем?
1. Сезонное оформление
Используйте фоновую подложку в зависимости от времени года: например, снежинки зимой, а летом более яркие и тёплые картинки, которые ассоциируются с солнцем и пляжем. Это же правило действует на картинки в честь праздников: сердца в День влюблённых, ёлки и подарки под Новый год, цветы на 8 Марта.
2. Фон по теме письма
Если вы хотите передать в рассылке определённое состояние или погрузить человека в нужную атмосферу, используйте письмо с фоновой картинкой. Чаще всего такие письма используют для коротких сообщений, которые призывают перейти на сайт, где дальше человека продвигают к покупке. Чтобы такое письмо сработало лучше всего, продумайте дальнейшие шаги вашего клиента на сайте.
3. Фон паттерн
Для привлечения внимания к какому-то разделу письма вы можете подложить под него фон с ярким паттерном. Фоновый рисунок подходит не только для привлечения внимания, но и для сезонных рассылок или просто, чтобы разнообразить белый фон. Для снижения внимания к фону можете уменьшить прозрачность паттерна или снизить его яркость.
4. Фон градиент
Фоновые градиенты могут сделать ваше письмо более динамичными и даже стимулировать подписчиков дочитать до конца.
5. Фон текстура
Попробуйте добавить на место фонового рисунка любую текстуру, подходящую под тематику письма. Этот необычный подход делает письмо более объёмным, а если ваша деятельность связана с подобными материалами, то ещё и поможет запомниться как ассоциация с вашей продукцией.
Здесь не нужно специальных знаний, чтобы добавить фон в письма: в редакторе письма сервиса Sendsay зайдите в раздел «Общие настройки» и загрузите фон для письма в формате png или jpg.
Так, письмо будет выглядеть более привлекательно и покажет, что вы явно заботитесь о том, чтобы отправлять подписчикам яркие и интересные выпуски. Скачать бесплатные фоновые изображения можно на любом стоке или генерировать через искусственный интеллект.
Правила добавления фото и изображений в письмо
При добавлении фоновых изображений важно учитывать размер файла. Чем длиннее электронное письмо, тем больше места оно занимает и тем выше опасность, что не все его элементы могут загрузиться. Лучше, чтобы изображения были не больше 1МБ. Размер для фонового изображения должен быть 1200 пикселей для полной ширины, но иногда достаточно и 640 пикселей.
Учитывайте количество изображений в письме. Фоновая картинка тоже считается как отдельная единица. На одну картинку должно быть не менее 500 символов текста. Несмотря на особенности редактирования писем с фоновыми изображениями, такая рассылка точно выделится среди прочих в почтовых ящиках ваших клиентов. Даже цветной фон будет куда лучше привычного скучного белого оформления. Интересные решения в оформлении фона заставят почаще открывать ваши письма, чтобы посмотреть на новое оформление. Тем более, электронные письма с красивым фоном выглядят гораздо более профессионально, чем письма без него.
