Email-маркетинг
Дизайн

Дизайн email-рассылки: макеты, шаблоны, мобильная проверка и примеры (2026)

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

Set Noa
Set Noa
Обновлено
0 посещения · 7 дн.
email newsletter
Дизайн email-рассылки?

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

Узнать больше

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

Это руководство сохраняет исходную структуру: визуальная иерархия, единство бренда, типы макетов, оптимизация для мобильных, типографика, цвет, доступность, дизайн призыва к действию, примеры, инструменты, ошибки, контекст Tajo и Brevo, ответы на частые вопросы и связанные статьи. Обновление убирает необоснованные заявления о бенчмарках и превращает страницу в практическое руководство по дизайну рассылок на 2026 год.

Почему дизайн email-рассылки имеет значение

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

Проверка первого экрана

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

Хороший первый экран быстро отвечает на четыре вопроса:

  • Кто это прислал?
  • Почему я это получаю?
  • В чём основная ценность?
  • Какое следующее действие?

На что дизайн действительно влияет

Избегайте необоснованных заявлений вроде «это изменение дизайна даёт двузначный прирост кликов», если у вас нет собственного контролируемого теста. Дизайн рассылки влияет на результаты через практические механизмы:

Фактор дизайнаЧто улучшаетЧто проверить
Понятная иерархияСкорость просмотра и пониманияМожет ли читатель определить главное сообщение с одного взгляда?
Мобильный макетУдобство на малых экранахПерестраивается ли макет аккуратно, без горизонтальной прокрутки?
Стратегия изображенийКонтекст и визуальный интересОстаётся ли письмо понятным при заблокированных изображениях?
Доступный контрастЧитаемость для большего числа подписчиковСоответствуют ли текст и кнопки требованиям к контрасту?
Ясность призыва к действиюУверенность в действииЕсть ли одно главное действие и описательный текст кнопки?
Единство брендаУзнаваемость и довериеСовпадает ли дизайн с сайтом, продуктом и другими каналами?
Проверка отображенияНадёжность в разных клиентахБыло ли письмо протестировано до запуска?

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

Шаблоны Tajo

Четыре макета в работе

Каждая панель ниже — это настоящий HTML письма в рамке реальной ширины. Уменьшите ширину до 375 px и посмотрите, как колонки складываются друг под друга.

Следует вашей теме — переключите её в шапке, чтобы увидеть другую.

Посмотреть HTML шаблона The Letter 6 КБ, без сборки 
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Цитата, которую вы храните в заметках, работает усерднее вашего контент-плана.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Шапка Meridian Press: концентрические синие дуги, пересечённые диагональной полосой" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Выпуск 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Архив и есть продукт</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Три недели назад я искал текст, написанный в 2019 году, и не нашёл его. Ни на сайте, ни в выгрузке, ни в поиске самой платформы. Тысяча двести выпусков, и единственным работающим указателем была моя память.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Вот о чём не рассказывают, когда речь о шести годах рассылки. Отправлять легко. Хранить — нет.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Всё, что вы публикуете, — это вклад. Почти никто не строит снятие.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Поэтому на этой неделе я пересобрал старые выпуски в настоящий архив: с тегами, полнотекстовым поиском и постоянными адресами. Ушло девять дней. Число подписчиков не сдвинулось. Время на сайте выросло втрое.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Всё ниже, включая то, что не сработало.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Читать весь выпуск &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Пишется от руки каждый четверг. Ответьте — я прочту.</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Отписаться</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Основные принципы дизайна email-рассылок

1. Визуальная иерархия

Визуальная иерархия ведёт читателя по контенту в задуманном вами порядке. Без неё подписчики просматривают письмо хаотично и упускают ключевые сообщения.

Как создать эффективную визуальную иерархию

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

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

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

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

Пример визуальной иерархии

[ЛОГОТИП]                              [ОТКРЫТЬ В БРАУЗЕРЕ]




          КРУПНЫЙ ЗАГОЛОВОК (ПЕРВОЕ ВНИМАНИЕ)
    Поддерживающий подзаголовок с уточнением


              [ГЛАВНОЕ ИЗОБРАЖЕНИЕ]


Основной текст, который даёт читателю контекст и ценность.
Держите абзацы короткими и удобными для просмотра.


            [ГЛАВНАЯ КНОПКА ДЕЙСТВИЯ]




   [ВТОРИЧНЫЙ БЛОК]      [ВТОРИЧНЫЙ БЛОК]


                 [ФУТЕР]

2. Единство бренда

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

Элементы бренда, которые нужно сохранять

  • Расположение логотипа - одна и та же позиция в каждом письме (обычно вверху слева или по центру)
  • Цветовая палитра - последовательно используйте 2-3 фирменных цвета
  • Типографика - придерживайтесь 1-2 семейств шрифтов
  • Стиль изображений - единый подход к фотографии или иллюстрациям
  • Голос и тональность - соответствие сайту и другим коммуникациям

Чек-лист единства бренда

ЭлементПравило
Основной цветИспользовать для призывов к действию и акцентов
Дополнительный цветИспользовать для секций и разделителей
ЛоготипОбязателен в шапке, опционально в футере
ШрифтыМаксимум 2 семейства (заголовки плюс текст)
Стиль изображенийЕдиные фильтры, кадрирование, композиция

3. Модель перевёрнутой пирамиды

Стройте содержание рассылки как перевёрнутую пирамиду: самая важная информация сверху, поддерживающие детали ниже.

                 САМОЕ ВАЖНОЕ
        (Заголовок, ключевое сообщение, главный визуал)


            ПОДДЕРЖИВАЮЩАЯ ИНФОРМАЦИЯ
          (Контекст, выгоды, детали)


                ПРИЗЫВ К ДЕЙСТВИЮ
              (Понятный следующий шаг)

Такая структура гарантирует, что даже подписчики, не прокручивающие письмо, получат ваше основное сообщение.

4. Правило третей

Заимствованное из фотографии и графического дизайна правило третей создаёт сбалансированные и визуально приятные макеты.

Разделите письмо на сетку три на три и разместите ключевые элементы вдоль линий сетки или в точках их пересечения. Это создаёт естественный баланс и притягивает внимание к стратегически важным местам.

5. Свободное пространство работает на вас

Свободное пространство, то есть пустота между элементами, является одним из самых мощных инструментов дизайна. Оно:

  • Улучшает читаемость, не позволяя тексту скучиваться
  • Создаёт фокус, изолируя важные элементы
  • Передаёт качество (премиальные бренды используют щедрые отступы)
  • Снижает когнитивную нагрузку на читателя

Рекомендация: используйте не менее 20px отступа между крупными секциями и 10-15px между элементами внутри секции.

Типы макетов email-рассылок

Разные задачи рассылки требуют разных макетов. Ниже приведены самые эффективные структуры.

1. Одноколоночный макет

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

             [ШАПКА]


      [ГЛАВНОЕ ИЗОБРАЖЕНИЕ]


           [ЗАГОЛОВОК]
         [ОСНОВНОЙ ТЕКСТ]
      [ПРИЗЫВ К ДЕЙСТВИЮ]


        [ВТОРИЧНЫЙ КОНТЕНТ]


             [ФУТЕР]

Преимущества:

  • Идеальная адаптивность на мобильных
  • Легко просматривать и читать
  • Просто спроектировать и свёрстать
  • Естественный поток контента

Лучшие практики:

  • Максимальная ширина: 600px
  • Длина строки: 50-75 символов
  • Один главный призыв к действию на секцию

2. Двухколоночный макет

Лучше всего подходит: витринам интернет-магазинов, подборкам контента, сравнениям бок о бок

             [ШАПКА]


          [ГЛАВНАЯ СЕКЦИЯ]


   [ТОВАР 1]         [ТОВАР 2]
  [ИЗОБРАЖЕНИЕ]    [ИЗОБРАЖЕНИЕ]
     [ТЕКСТ]           [ТЕКСТ]
   [ДЕЙСТВИЕ]       [ДЕЙСТВИЕ]


             [ФУТЕР]

Преимущества:

  • Эффективно показывает несколько позиций
  • Создаёт визуальный интерес
  • Хорошо подходит для сравнений

Лучшие практики:

  • Перестраивать в одну колонку на мобильных
  • Равная ширина колонок для баланса
  • Минимальная ширина колонки: 280px

3. Гибридный (модульный) макет

Лучше всего подходит: насыщенным контентом рассылкам, новостным дайджестам, письмам на несколько тем

             [ШАПКА]


        [ГЛАВНЫЙ МАТЕРИАЛ]


  [МАТЕРИАЛ 2]      [МАТЕРИАЛ 3]


    [ДЕЙСТВИЕ ВО ВСЮ ШИРИНУ]


 [БЛОК 1]  [БЛОК 2]   [БЛОК 3]


             [ФУТЕР]

Преимущества:

  • Высокая гибкость
  • Вмещает разные типы контента
  • Создаёт визуальный ритм

Лучшие практики:

  • Сохраняйте чёткое разделение секций
  • Используйте визуальные подсказки для показа иерархии контента
  • Внимательно тестируйте отображение на мобильных

4. Макет по Z-образной схеме

Лучше всего подходит: промо-письмам, рассылкам-анонсам

Z-образная схема повторяет естественное движение взгляда по странице: слева направо, затем по диагонали вниз, затем снова слева направо.

  [ЛОГОТИП]  [МЕНЮ]      Первый горизонтальный просмотр


                                Диагональное движение


  [КОНТЕНТ]  [ДЕЙСТВИЕ]  Второй горизонтальный просмотр

Лучшие практики:

  • Размещайте логотип и меню на первой горизонтальной линии
  • Ставьте ключевые визуальные элементы на центральной диагонали
  • Ставьте призывы к действию в конце горизонтальных линий просмотра

5. Макет по F-образной схеме

Лучше всего подходит: рассылкам с большим объёмом текста, обучающему контенту

Читатели просматривают насыщенный текстом контент по F-образной схеме: два горизонтальных прохода, затем вертикальный просмотр вдоль левого края.

        Первый горизонтальный просмотр
        Второй горизонтальный просмотр


                                Вертикальный просмотр

Лучшие практики:

  • Помещайте важную информацию в первые две строки
  • Начинайте абзацы с важных слов
  • Используйте выравнивание текста по левому краю для удобства просмотра

Дизайн писем с приоритетом мобильных устройств

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

Требования к мобильному дизайну

Области нажатия, удобные для пальца

  • Минимальный размер кнопки: 44x44 пикселя
  • Расстояние между областями нажатия: не менее 10px между кликабельными элементами
  • Расположение призыва к действию: по центру и в зоне досягаемости большого пальца

Типографика для мобильных

ЭлементРазмер на десктопеРазмер на мобильном
Заголовки28-36px22-28px
Подзаголовки20-24px18-22px
Основной текст16-18pxминимум 16px
Призывы к действию16-18px16-18px

Приоритет одной колонки

Двухколоночные макеты должны аккуратно перестраиваться на мобильных:

Десктоп:                    Мобильный:


 КОЛ. 1   КОЛ. 2            КОЛ. 1


                                КОЛ. 2

Чек-лист оптимизации для мобильных

  • Одноколоночный или адаптивный многоколоночный макет
  • Размеры шрифта читаются без увеличения (основной текст от 16px)
  • Кнопки достаточно крупные для нажатия (минимум 44px)
  • Изображения корректно масштабируются
  • Горизонтальная прокрутка не требуется
  • Важный контент виден без прокрутки
  • Текст предпросмотра оптимизирован для мобильных почтовых ящиков
  • Изображения и общий вес письма достаточно малы для мобильных соединений

Приёмы адаптивной вёрстки

Используйте медиазапросы CSS для адаптации дизайна:

/* Desktop styles */
.content-wrapper {
  width: 600px;
}


/* Mobile styles */
@media only screen and (max-width: 480px) {
  .content-wrapper {
    width: 100% !important;
  }


  .column {
    display: block !important;
    width: 100% !important;
  }


  .mobile-center {
    text-align: center !important;
  }
}

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

Лучшие практики типографики

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

Выбор шрифта

Веб-безопасные шрифты

Эти шрифты отображаются одинаково во всех почтовых клиентах:

  • Без засечек: Arial, Helvetica, Verdana, Trebuchet MS
  • С засечками: Georgia, Times New Roman, Palatino

Веб-шрифты в письмах

Современные почтовые клиенты поддерживают веб-шрифты через @font-face или Google Fonts. Всегда указывайте запасные варианты:

font-family: 'Open Sans', Arial, sans-serif;

Совет: тестируйте веб-шрифты в разных клиентах. Gmail, Apple Mail и iOS Mail их поддерживают, Outlook нет.

Правила типографики

Длина строки

  • Оптимально: 50-75 символов в строке
  • Максимум: 80 символов
  • Для ширины 600px: используйте шрифт 16-18px для идеальной длины строки

Межстрочный интервал

  • Основной текст: от 1,5 до 1,7 размера шрифта
  • Заголовки: от 1,2 до 1,3 размера шрифта

Сочетание шрифтов

Используйте контраст для создания иерархии:

СценарийПример пары
КлассикаGeorgia (заголовки) плюс Arial (текст)
СовременныйMontserrat (заголовки) плюс Open Sans (текст)
ДеловойRoboto Slab (заголовки) плюс Roboto (текст)
ЭлегантныйPlayfair Display (заголовки) плюс Lato (текст)

Советы по оформлению текста

  • Используйте полужирное начертание для выделения, а не подчёркивание (оно означает ссылку)
  • Ограничивайте ПРОПИСНЫЕ короткими заголовками или кнопками
  • Выравнивайте основной текст по левому краю для удобства чтения
  • Центрируйте заголовки для визуального баланса
  • Избегайте выключки по формату, которая создаёт неравномерные пробелы

Оптимизация изображений для писем

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

Типы изображений и их применение

Тип изображенияЛучше всего подходитФормат
Главный баннерОсновной визуальный акцентJPEG или WebP
Фотографии товаровВитрины интернет-магазинаJPEG
Иконки и графикаКнопки, маркеры списковPNG или SVG
ЛоготипыИдентификация брендаPNG (прозрачный)
АнимацияПривлечение вниманияGIF

Правила размеров изображений

  • Максимальная ширина: 600px (соответствует ширине письма)
  • Главные изображения: 600px на 300-400px
  • Изображения товаров: ширина 280-300px
  • Миниатюры: ширина 100-150px

Оптимизация размера файлов изображений

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

Целевые размеры файлов:

  • Главные изображения: менее 200 КБ
  • Изображения товаров: менее 100 КБ
  • Иконки: менее 10 КБ
  • Общий размер письма: менее 1 МБ

Приёмы оптимизации:

  • Используйте JPEG для фотографий (качество 80-85%)
  • Используйте PNG для графики с прозрачностью
  • Сжимайте изображения инструментами вроде TinyPNG или ImageOptim
  • Рассмотрите формат WebP для клиентов, которые его поддерживают

Лучшие практики alt-текста

Alt-текст критически важен для доступности и на случай, когда изображения не загружаются:

Хороший alt-текст:

<img src="hero.jpg" alt="Woman wearing our new Spring Collection blue linen dress, standing in a garden">

Плохой alt-текст:

<img src="hero.jpg" alt="image" />
<img src="hero.jpg" alt="" />
<img src="hero.jpg" alt="hero-image-spring-2025-v2-final.jpg" />

Правила alt-текста:

  • Описывайте то, что показано на изображении
  • Естественно включайте релевантные ключевые слова
  • Держитесь в пределах 125 символов
  • Делайте его осмысленным, а не просто «изображение чего-то»

Оптимизация для экранов с высоким разрешением

Ради чёткости на экранах с высокой плотностью пикселей используйте изображения с двукратным размером относительно отображаемого:

  • Размер отображения: ширина 300px
  • Файл изображения: ширина 600px
  • Задавайте явную ширину в HTML
<img src="product-600w.jpg" width="300" style="width: 300px; max-width: 100%;" alt="Product description">

Психология цвета и его использование

Цвет влияет на эмоции, направляет внимание и укрепляет узнаваемость бренда.

Психология цвета в письмах

ЦветАссоциацииЛучше всего подходит
СинийДоверие, стабильность, спокойствиеФинансы, технологии, здравоохранение
КрасныйСрочность, азарт, страстьРаспродажи, призывы к действию, срочность
ЗелёныйРост, здоровье, природаЭкологичность, здоровье, успех
ОранжевыйЭнергия, креативность, теплотаПризывы к действию, молодёжные бренды
ФиолетовыйРоскошь, креативность, мудростьПремиальные бренды, красота
ЖёлтыйОптимизм, ясность, теплотаВыделения, привлечение внимания
ЧёрныйИзысканность, роскошьПремиум, мода
БелыйЧистота, минимализмПространство, фоны

Правила соотношения цветов

Следуйте правилу 60-30-10:

  • 60%: основной цвет или цвет фона
  • 30%: дополнительный цвет
  • 10%: акцентный цвет (кнопки, выделения)

Контраст цвета для доступности

Обеспечьте достаточный контраст между текстом и фоном:

  • Обычный текст: минимальный коэффициент контраста 4,5:1
  • Крупный текст (от 18px): минимальный коэффициент контраста 3:1
  • Используйте инструменты: WebAIM Contrast Checker

Примеры высокого контраста:

  • Чёрный (#000000) на белом (#FFFFFF), 21:1
  • Тёмно-синий (#003366) на белом, 12,6:1
  • Белый на тёмно-фиолетовом (#4A154B), 10,8:1

Цвета кнопок призыва к действию

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

  • Используйте самый контрастный акцентный цвет
  • Сохраняйте единообразие во всех письмах
  • Проводите A/B-тесты разных цветов для оптимизации результата
  • Убедитесь, что цвет отличается от цвета текстовых ссылок

Доступность писем

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

Рекомендации WCAG для писем

Руководство по доступности веб-контента (WCAG) применимо и к письмам:

1. Воспринимаемость

  • Предоставляйте текстовые альтернативы изображениям (alt-текст)
  • Не полагайтесь только на цвет для передачи информации
  • Обеспечивайте достаточный контраст цвета
  • Делайте текст масштабируемым без разрушения макета

2. Управляемость

  • Вся функциональность доступна с клавиатуры
  • Дайте пользователю достаточно времени для чтения контента
  • Не используйте мигающий контент, способный спровоцировать приступ

3. Понятность

  • Используйте ясный и простой язык
  • Сохраняйте последовательную навигацию
  • Показывайте понятные сообщения об ошибках

4. Надёжность

  • Используйте валидный HTML
  • Тестируйте в разных почтовых клиентах
  • Обеспечивайте совместимость со вспомогательными технологиями

Чек-лист доступного письма

  • У всех изображений есть описательный alt-текст
  • Контраст цвета соответствует стандартам WCAG AA (4,5:1)
  • Ссылки описательны («Читать наше руководство», а не «нажмите здесь»)
  • Размер шрифта не менее 14px (предпочтительно 16px)
  • У письма логичный порядок чтения
  • Таблицы используются только для вёрстки, а не для данных (или имеют корректные заголовки)
  • Язык объявлен в HTML
  • Индикаторы фокуса видны для интерактивных элементов

Особенности для программ чтения с экрана

Структурируйте письмо для пользователей программ чтения с экрана:

  • По возможности используйте семантический HTML (h1, h2, p и так далее)
  • Предоставляйте текстовую версию
  • Добавляйте ссылку «Открыть в браузере»
  • Избегайте писем, состоящих только из изображений
  • Тестируйте с VoiceOver, NVDA или JAWS

Эффективный дизайн призыва к действию

Призыв к действию является точкой, где дизайн встречается с конверсией. Здесь важно не ошибиться.

Лучшие практики для кнопок

Размер и форма

  • Минимальный размер: высота 44px, ширина 120px
  • Внутренние отступы: не менее 12-16px по вертикали и 24-32px по горизонтали
  • Форма: используйте форму кнопки, которая соответствует бренду и остаётся легко узнаваемой

Цвет и контраст

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

Правила текста

  • Используйте глаголы действия: «Купить сейчас», «Начать», «Скачать»
  • Создавайте срочность там, где это уместно: «Получить скидку»
  • Держите текст коротким: 2-5 слов
  • Избегайте общих формулировок: «Нажмите здесь», «Отправить», «Узнать больше»

Расположение призыва к действию

  • Главный призыв к действию: в первом экране (виден без прокрутки)
  • Вторичный призыв к действию: после поддерживающего контента
  • Один главный призыв к действию на письмо (чтобы избежать паралича выбора)

Примеры текста для кнопок

ОтрасльЭффективный призыв к действию
E-commerce«Смотреть распродажу»
SaaS«Начать бесплатный период»
Контент«Читать полное руководство»
Мероприятия«Забронировать место»
Рассылка«Получать советы еженедельно»

Кнопка или текстовая ссылка

Используйте кнопки для главных действий и текстовые ссылки для второстепенных:

[КУПИТЬ СЕЙЧАС]   Главная кнопка (высокий визуальный вес)


или посмотрите новинки    Вторичная текстовая ссылка

Примеры email-рассылок по отраслям

Рассмотрим эффективные решения в дизайне рассылок для разных отраслей.

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

Ключевые элементы:

  • Качественная фотография товаров
  • Понятное отображение цен
  • Показ нескольких товаров
  • Сильное промо-сообщение
  • Легко нажимаемые кнопки покупки

Рекомендуемый макет: модульная сетка с карточками товаров

        БАННЕР РАСПРОДАЖИ


        [ГЛАВНЫЙ ТОВАР]
          СКИДКА 30%
       [КУПИТЬ СЕЙЧАС]


  [ТОВАР 1]        [ТОВАР 2]
   $49,99           $79,99


  БЕСПЛАТНАЯ ДОСТАВКА ОТ $75

Дизайн рассылки для SaaS и технологических компаний

Ключевые элементы:

  • Чистая минималистичная эстетика
  • Описание возможностей с иконками
  • Акцент на обучающем контенте
  • Понятные ценностные предложения
  • Профессиональные изображения

Рекомендуемый макет: одна колонка с блоками возможностей

        АНОНС НОВОЙ ВОЗМОЖНОСТИ


        [СКРИНШОТ ВОЗМОЖНОСТИ]


  Выгода первая
  Выгода вторая
  Выгода третья


         [ПОПРОБОВАТЬ]

Дизайн рассылки медиа и издательств

Ключевые элементы:

  • Сильная типографическая иерархия
  • Анонсы материалов с изображениями
  • Разделение по рубрикам
  • Указание авторов
  • Время чтения

Рекомендуемый макет: сетка карточек с контентом

        ГЛАВНЫЙ МАТЕРИАЛ
     [КРУПНОЕ ИЗОБРАЖЕНИЕ]
     Текст заголовка здесь
     Краткий анонс...


  [МАТЕРИАЛ 2]    [МАТЕРИАЛ 3]
    Заголовок       Заголовок


        ДРУГИЕ МАТЕРИАЛЫ

Дизайн рассылки для B2B и профессиональных услуг

Ключевые элементы:

  • Сдержанный деловой дизайн
  • Экспертный контент
  • Кейсы и данные
  • Анонсы мероприятий
  • Материалы для скачивания

Рекомендуемый макет: деловая одна колонка

      [ЛОГОТИП КОМПАНИИ]


     АНАЛИТИКА ЭТОГО МЕСЯЦА


   Отраслевой отчёт
     Ключевые выводы нашего последнего
     анализа рынка...
          [ЧИТАТЬ ДАЛЬШЕ]


   Ближайший вебинар
     15 марта в 14:00
         [ЗАРЕГИСТРИРОВАТЬСЯ]

Инструменты и ресурсы для дизайна писем

Платформы для дизайна

Конструкторы с перетаскиванием блоков:

  • Brevo (ранее Sendinblue), интегрирован с Tajo
  • Mailchimp
  • Klaviyo
  • Campaign Monitor

Профессиональные инструменты дизайна:

  • Figma (дизайн и прототипирование)
  • Adobe XD
  • Sketch

Ресурсы с шаблонами

Бесплатные шаблоны:

  • Библиотека шаблонов Brevo
  • Шаблоны сообщества Litmus
  • Шаблоны Email on Acid

Платные шаблоны:

  • Email-шаблоны ThemeForest
  • Envato Elements
  • Creative Market

Инструменты тестирования

  • Litmus - предпросмотр писем более чем в 90 клиентах
  • Email on Acid - тестирование в разных клиентах
  • Mail Tester - проверка спам-рейтинга
  • Accessible Email - валидация доступности

Частые ошибки в дизайне писем

1. Письма, перегруженные изображениями

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

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

2. Слишком много призывов к действию

Проблема: несколько конкурирующих призывов к действию вызывают паралич выбора.

Решение: один главный призыв к действию на письмо. Для второстепенных действий используйте текстовые ссылки.

3. Игнорирование мобильных

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

Решение: проектируйте с приоритетом мобильных. Тестируйте на нескольких устройствах до отправки.

4. Плохой контраст

Проблема: текст с низким контрастом трудно читать, и он не соответствует стандартам доступности.

Решение: используйте инструменты проверки контраста. Сохраняйте минимальное соотношение 4,5:1.

5. Перегруженные макеты

Проблема: плотная вёрстка утомляет читателей и снижает вовлечённость.

Решение: используйте свободное пространство. Делайте ставку на меньшее количество более качественных материалов.

6. Непоследовательный фирменный стиль

Проблема: письма, не совпадающие с сайтом, сбивают подписчиков с толку.

Решение: создайте гайдлайны бренда для писем. Используйте шаблоны для поддержания единообразия.

7. Медленно загружающиеся письма

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

Решение: сжимайте изображения. Держите общий размер письма менее 1 МБ.

Создание дизайна рассылок с Brevo и Tajo

Brevo закрывает производственный слой рассылки: шаблоны, редактор с перетаскиванием блоков, настройка кампаний, поля контактов, персонализация, автоматизация, SMS, WhatsApp и отчётность в зависимости от тарифа и конфигурации.

Tajo поддерживает слой клиентских данных для команд Shopify, использующих Brevo. Он синхронизирует контекст клиентов, заказов, товаров, согласий, лояльности и вовлечённости, чтобы рассылки могли опираться на более точные сегменты и более безопасный динамический контент.

Практический рабочий процесс

  1. Соберите переиспользуемый шаблон рассылки в Brevo.
  2. Определите поля данных, необходимые для персонализации и сегментации.
  3. Используйте Tajo, чтобы данные о клиентах, заказах, товарах и согласиях из Shopify оставались доступными для рабочих процессов Brevo.
  4. Создайте сегменты, такие как покупатели первого заказа, VIP-клиенты, покупатели определённой категории, неактивные клиенты и недавние покупатели, которых нужно исключить из рассылок со скидками.
  5. Добавляйте динамические блоки только тогда, когда определён запасной контент.
  6. До запуска проверьте отображение на мобильных, поведение в тёмном режиме, ссылки, персонализацию, отписку и данные о товарах.

Правила динамического контента

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

Используйте динамический контент для:

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

Избегайте динамического контента, когда:

  • Исходное поле заполнено не полностью.
  • Наличие товара может оказаться неактуальным.
  • Запасной вариант будет выглядеть сломанным.
  • Данные о согласии или предпочтениях неоднозначны.

Заключение

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

Запомните ключевые выводы:

  1. Проектируйте с приоритетом мобильных - ваша собственная отчётность может отличаться, но удобство на малых экранах должно быть гарантировано
  2. Ставьте ясность на первое место - каждый элемент должен иметь назначение
  3. Сохраняйте единство бренда - выстраивайте узнаваемость с каждой отправкой
  4. Тестируйте постоянно - небольшие улучшения накапливаются со временем
  5. Уделяйте внимание доступности - проектируйте для всех подписчиков, а не для большинства

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

Готовы улучшить рассылки для магазина на Shopify в Brevo? Начните работу с Tajo, чтобы синхронизировать данные о клиентах, заказах, товарах, согласиях, лояльности и вовлечённости в рабочие процессы Brevo, и тогда ваш дизайн сможет опираться на более точные сегменты и более безопасную персонализацию.

Связанные статьи

Часто Задаваемые Вопросы

Как начать выпускать email-рассылку?
Выберите платформу, сформулируйте обещание рассылки, соберите формы подписки с явным согласием, создайте простой шаблон с приоритетом мобильных устройств, отправьте тестовые кампании и оцените вовлечённость, прежде чем добавлять сложные макеты или персонализацию.
Как часто отправлять рассылку?
Универсально лучшей частоты не существует. Начните с темпа, который вы способны поддерживать, например еженедельно, раз в две недели или ежемесячно, а затем корректируйте его исходя из вовлечённости, отписок, жалоб, качества контента и ожиданий подписчиков.
Что включать в рассылку?
Включайте одно чёткое главное сообщение, полезный контент, легко сканируемую структуру, живой текст, доступные изображения с alt-текстом, понятный призыв к действию, данные об отписке и отправителе, а динамический контент о товарах или клиентах добавляйте только тогда, когда данные надёжны.
Какая ширина email-рассылки является оптимальной?
Стандартная и рекомендуемая ширина email-рассылки составляет **600 пикселей**. Эта ширина хорошо работает в большинстве почтовых клиентов и на большинстве устройств и при этом оставляет достаточно места для контента. На мобильных письма должны быть адаптивными и подстраиваться под ширину экрана, обычно с перестроением многоколоночных макетов в одну колонку.
Сколько изображений включать в рассылку?
Фиксированного количества изображений не существует. Используйте столько визуальных материалов, сколько нужно для поддержки сообщения, но письмо должно оставаться понятным при заблокированных изображениях. В большинстве рассылок ключевой текст должен быть живым текстом, значимые изображения должны иметь описательный alt-текст, файлы должны быть сжаты, а текстовая версия должна быть предусмотрена. Избегайте рассылок, состоящих только из изображений.
Какие шрифты лучше всего подходят для email-рассылок?
Веб-безопасные шрифты, такие как **Arial, Helvetica, Georgia и Verdana**, отображаются одинаково во всех почтовых клиентах. Можно использовать веб-шрифты (Google Fonts, Adobe Fonts) с корректными запасными вариантами, но учитывайте, что некоторые клиенты, например Outlook, покажут запасной шрифт. Ограничьтесь максимум 1-2 семействами шрифтов ради чистого и профессионального дизайна.
Как сделать письма доступными?
Ключевые практики доступности включают: **alt-текст** для всех изображений, **контраст цвета 4,5:1** для текста, **описательный текст ссылок** (а не «нажмите здесь»), **размер шрифта не менее 14-16px**, **текстовую версию письма** и структуру контента с **правильной иерархией заголовков**. По возможности тестируйте письма с программами чтения с экрана.
Нужно ли учитывать тёмный режим в дизайне рассылок?
Да, тёмный режим стоит учитывать, потому что крупные почтовые клиенты по-разному изменяют цвета. Рекомендации по дизайну: не полагайтесь только на цвет фона, при необходимости готовьте варианты логотипа, аккуратно используйте прозрачные PNG, проверяйте контраст в обоих режимах и тестируйте важные шаблоны в тех клиентах, которыми действительно пользуется ваша аудитория.
Какой формат изображений лучше всего подходит для писем?
**JPEG** лучше всего подходит для фотографий и сложных изображений с большим количеством цветов. **PNG** оптимален для графики с прозрачностью, логотипов и изображений с текстом. **GIF** подходит для простой анимации. **WebP** обеспечивает лучшее сжатие, но поддерживается почтовыми клиентами ограниченно, поэтому всегда предусматривайте запасной вариант. Держите размер файла основных изображений в пределах 200 КБ и стремитесь к общему размеру письма менее 1 МБ.
Как повысить кликабельность email-рассылки?
Чтобы повысить кликабельность: сделайте главный призыв к действию заметным, используйте описательный текст кнопки, оставляйте достаточно крупные области нажатия для мобильных, сокращайте конкурирующие действия, пишите сообщение, соответствующее намерению подписчика, и тестируйте по одной значимой переменной дизайна или текста за раз. Относитесь к открытиям и кликам как к диагностическим сигналам, а важные рассылки по возможности связывайте с конверсиями или выручкой.
Как часто обновлять дизайн рассылки?
Сохраняйте **последовательный фирменный стиль** ради узнаваемости и одновременно вносите **небольшие улучшения на постоянной основе** на основе данных об эффективности. Рассматривайте **крупное обновление дизайна** каждые 12-18 месяцев, чтобы оставаться современными. Всегда проводите A/B-тест значимых изменений до раскатки на весь список. Сезонные варианты и специальные выпуски добавляют разнообразие, не разрушая единство бренда.
Поделиться этой статьёй:
Назад ко всем статьям

Подайте заявку на ранний доступ

Укажите имя, а также email или номер телефона. Мы отправим Вам информацию о доступе к Tajo.

определим автоматически

Похожие статьи

business-tools

Экспорт и миграция данных Brevo: как перенести данные в систему и из неё

email-marketing

GDPR и email-маркетинг: практическое руководство по соответствию

email-marketing

Страница отписки: как правильно сделать отказ в один клик

email-marketing

Win-back кампания в email: как вернуть ушедших клиентов в 2026 году

email-marketing

CRM с email-маркетингом: зачем нужны оба инструмента (и как их связать)

email-marketing

Email-маркетинг для начинающих: полное пошаговое руководство (2026)

Получить Brevo