Сервис Mailigen прошел проверку в Роскомнадзоре и полностью соответствует требованиям 152-ФЗ «О персональных данных»

Как сделать дизайн рассылки, если ты не дизайнер

Дизайн В офисе у коллег есть игра “Доведи дизайнера до слёз”. Нет, они не критикуют мои работы и не ругаются за пропущенную ошибку в тексте. Они присылают скриншоты всевозможных email-рассылок, которые приходят на их почтовые ящики. И, к сожалению, тест в этих письмах не прочитать, кнопка с призывом к действию не видна, и письмо настолько "вырви-глаз", что его хочется не то, что закрыть и забыть, но заодно и отписаться, чтобы больше никогда такого ужаса в своей почте не видеть. Дизайн — это не только про картинки и цвета. Это про грамотное расположение всех элементов письма, чтобы помочь подписчику понять, что от него хотят и что ему предлагают сделать. В 2018 году существует множество бесплатных онлайн-инструментов, которые сделают подготовку рассылки не только быстрее, но и качественнее. Вначале вы потратите не один час на подготовку, но это хорошая инвестиция, т.к. на выходе получится письмо, которое подписчику захочется открыть и прочитать снова.

Выбор шаблона

Определитесь с типом будущей рассылки: короткое информационное письмо, продающее с товарными подборками, длинное контентное и т.д. Посмотрите таблицу и найдите тот тип шаблона, который вам необходим:

Посмотрите как создатели рассылок придерживаются этих правил:

Пример писем Если всё ещё сомневаетесь, то загляните в галерею шаблонов Mailigen, там достаточно примеров шаблонов для каждого типа писем: Галерея шаблонов mailigen

Текст

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

  • Самые основные правила, без них никуда (в оригинале на английском).
  • Несколько комментариев из Ководства Артемия Лебедева.
  • Эта из ильяховской рассылки Главреда, там рассказывается о важности работы с заголовками.
  • Здесь можно увидеть конкретный пример письма с конкретными комментариями от дизайнера (спойлер: в том письме есть ещё что дорабатывать)

Есть несколько видов писем, где работа с текстом крайне важна:

  • письма-подтверждения (заказ, бронирование, доставка), т.к подписчик должен быстро прочитать информацию и подтвердить её или отклонить. Хороший пример — подтверждение бронирования на сайте airbnb.com

Пример письма бронирование

  • контентные письма — вдохновение можете найти на новостных порталах (meduza.io, lenta.ru)

Пример письма

  • plain-text — даже простое выделение абзацев помогает при чтении текста, а если вы еще сделаете длину строки 10-13 слов и пронумеруете списки (поставите буллиты) где необходимо, а на ссылки поставите нижнее подчеркивание, то читатель точно будет благодарен.

Цвет

Идеально подобрать цвета на глаз дано не каждому, но, хвала программистам, мы живем в век, когда многое за нас могут делать роботы. В том числе и подбирать цвет. Из более чем двадцати ресурсов по подбору цвета я выбрала 3 наиболее интересных:

  • Adobe Color CC (color.adobe.com)

Полезен при подборе палитры к конкретному цвету: вводите значение цвета и кулер подберет подходящие цвета.

Если стоит вопрос о выборе цветовой палитры, то в этом сервисе почти бесконечное число сочетаний разнообразных цветов. Самая главная проблема — это остановиться на чем-то одном 🙂

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

Примеры хороших рассылок, где каждый цвет на своем месте:

Примеры писем

Фотографии

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

Здесь можно найти векторную графику, использование точно такое же, как и в фотостоках — свободное использование при упоминании автора:

Не стоит забывать про иконки:

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

Нужно найти подборки графики начиная от макетов визиток, заканчивая журнальными разворотами и плакатами? Есть отличный сервис с шаблонами. Что полезно — там есть картинки специально для email рассылок! Большинство макетов можно бесплатно загружать после редактирования:

Сервис для создания разной графики. Не так давно там появились и анимации, что, конечно, радует. Есть бесплатные картинки, есть платные, но цена символическая — 0,99$:

Нужно обрезать фотографию? Изменить её контрастность, а фотошоп так и не успели освоить? Этот сервис на порядок проще фотошопа, но набора базовых инструментов должно хватить:

Вдохновение

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

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

Пользуйтесь! И не заставляйте дизайнеров плакать, при виде ваших рассылок. Если время не позволяет учиться или просто нет желания “дизайнить”, то наймите человека, который знает своё дело. Цена за готовый шаблон с версткой стоит в среднем 8-12 тысяч (в нем можно менять текст и фотографии в зависимости от целей письма). Вы избавитесь от необходимости каждую рассылку делать не свою работу, а клиенты почувствуют, что вам не всё равно.

Как сделать дизайн рассылки, если ты не дизайнер