Дизайн-система — мастхэв, чтобы сделать ваши рассылки узнаваемыми

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

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

Что такое дизайн-система

Дизайн-система — это инструмент, который сохраняет единый визуальный стиль в разных каналах коммуникации, делает бренд узнаваемым. В «классической» дизайн-системе, ориентированной не только на рассылки, обычно есть:

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

Фреймворк — библиотека кода, написанного под каждый из визуальных элементов.

Гайдлайны — инструкции по внедрению и значению каждого элемента. Также в гайдлайнах могут быть специфические пункты в зависимости от нужд компании. Например, раздел по Tone of Voice или чек-листы для проверок перед отправкой материала.

У нас в Bonfire дизайн-система ориентирована именно на рассылки, поэтому она состоит из двух больших разделов:

Мастер-шаблон — «конструктор» с блоками, из которых строятся все типы рассылок компании: триггерные, массовые, транзакционные и другие.

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

Гайд — документ, который облегчает работу над рассылками. В нем прописываются правила коммуникации, структура писем, особенности дизайна и все, что пригодится для успешного email-маркетинга.

Что может быть в гайде:

• ToV и редполитика;
• типографские правила: висячие предлоги, тире и дефис, кавычки-”лапки” и «елочки», «е» или «ё» и пр.;
• правила обращения к читателям (на «вы» или «ты»);
• рекомендации по использованию блоков мастер-шаблона;
• чек-листы — как проверить рассылку перед отправкой, как проверить верстку, перечень сервисов для проверки читаемости текста и пр.;
• тактика общения с читателем рассылки в радостных или конфликтных ситуациях.

Кому нужна дизайн-система

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

Крупному бизнесу. У больших компаний тоже есть «нестыковки» коммуникаций. Правда, возникают они не из-за нехватки ресурсов, а потому что специалисты соседних департаментов плохо взаимодействуют при работе над рассылками. Хороший способ исправить проблему в менеджменте — дизайн-система, которая задаст единый стандарт для всех писем.

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

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

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

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

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

Где не нужна дизайн-система

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

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

7 шагов, как сделать дизайн-систему для своей компании

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

2. Сбор пожеланий команды. Пообщайтесь со стейкхолдерами и расспросите, что им нравится или не нравится в текущих рассылках. Часто у людей нет сформулированного понимания, что хочется видеть в письмах, но есть референсы по другим проектам.
Сформулируйте 5–7 принципов, которых будете придерживаться при написании рассылок. Ориентируйтесь на прошлые рассылки и другой контент компании, на ToV и редполитику. При описании визуала в дизайн-системе используйте что уже есть — референсы, которые прислала команда, брендбук и прочее.

3. Определение блоков мастер-шаблона. Вы с командой уже проанализировали рассылки за последний год и собрали пожелания — время приступать к аналитике.
Письма вашей компании наверняка имеют что-то общее — списки преимуществ продукта, карточки товаров, блоки «товар + скидка», «баннер + список» и подобные. Проанализируйте, какие элементы встречаются в ваших письмах, и подготовьте для каждого такого элемента блок мастер-шаблона.

4. Дизайн каждого блока. Отрисуйте каждый блок мастер-шаблона, чтобы в дальнейшем быстро собирать письма и не заниматься визуалом с нуля.
Важно: делайте дизайн с реальным контентом, а не с lorem ipsum (текстом-рыбой) и случайными иллюстрациями или фотографиями. Каждый блок мастер-шаблона должен выглядеть как блок из настоящей рассылки.

5. Выбор платформы для верстки блоков мастер-шаблона. Есть разные варианты — решение зависит от того, кто в команде и какие платформы вы используете для рассылок.
Верстать можно в блочном редакторе ESP (например, в Unisender). Можно на сторонней платформе типа Stripo, а можно в HTML-коде — при наличии верстальщика. Верстка в ESP не подойдет, если вы отправляете рассылки с нескольких платформ.

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

6. Написание гайдлайна. Создайте инструкцию по использованию мастер-шаблона. Пропишите названия блоков и ситуации, в которых их необходимо использовать.
Также в гайдлайне могут быть любые другие инструкции, которые помогут сотрудникам делать рассылки: ToV, чек-листы для проверки писем в ESP или для тестирования, типографские правила и многое другое.

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

Подытожим

Дизайн-система — это инструмент, который сохраняет единый визуальный стиль в разных каналах коммуникации, делает бренд узнаваемым. В email-маркетинге состоит из двух частей: мастер-шаблона (конструктора писем с блоками) и гайда (документа с правилами и инструкциями).

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

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

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