Сначала разработали содержание, затем превратили его в полноценный визуальный email
В этом проекте отправной точкой был не готовый дизайн и не прототип, а сам текст письма. Сначала выстроили коммерческую логику сообщения, затем создали визуальную подачу и подготовили HTML-email.
В этом проекте работа началась со смысла, а не с оформления
Для компании по наливным полам сначала нужно было определить, что именно сообщить потенциальному клиенту: какое предложение вынести на первый план, какие аргументы использовать, как построить последовательность сообщения и к какому действию привести получателя.
И только после того, как коммерческая логика была собрана, начался второй этап – визуальная упаковка текста и подготовка готового email-письма.
Сначала выстроили смысловую основу будущей рассылки
До появления цветовой схемы, изображений и блоков нужно было решить более важную задачу – что человек должен понять после прочтения письма и почему ему стоит продолжить взаимодействие с компанией.
Текстовая основа email-письма до разработки финального дизайна. Нажмите на изображение, чтобы открыть оригинал.
Почему здесь было важно не начинать сразу с дизайна
Если содержание ещё не определено, визуальный макет начинает диктовать структуру случайным образом: заранее появляются три карточки, один баннер и одна кнопка, а потом выясняется, что реальное предложение требует другого порядка и другого объёма.
Сначала смысл → затем визуальная форма. Поэтому дизайн строился вокруг содержания, а не наоборот.
Даже до оформления письмо должно иметь собственный маршрут
О чём сообщение и почему оно актуально.
Что именно предлагает компания.
Почему предложение заслуживает внимания.
Что получателю предлагается сделать дальше.
Когда содержание готово, становится понятно, что именно нужно выделять
Готовый текст дал основу для визуального проектирования. Стало понятно, какой смысл должен быть самым заметным, какие аргументы можно показать спокойнее, где нужен отдельный блок и где должен появиться CTA.
Это ключевой принцип кейса: дизайн не создавал предложение с нуля – он делал уже разработанное предложение удобнее для восприятия.
Затем текст получил собственный визуальный сценарий
После смысловой проработки письмо получило композицию, цветовую систему, отдельные смысловые зоны, визуальные акценты и законченный коммерческий вид.
Финальный дизайн email-письма после визуальной проработки исходного текста. Нажмите на изображение, чтобы открыть оригинал.
Между первым и вторым этапом изменился способ восприятия информации
Коммерческая логика уже существует
Есть смысл, аргументы, последовательность и CTA.
Логика получила визуальную форму
Появились иерархия, цвет, изображения, отдельные зоны и более быстрый способ просмотра.
Текст и дизайн решают разные задачи
Слабое содержание нельзя полностью компенсировать красивой картинкой. Но и сильный текст, отправленный одним тяжёлым полотном, может быть неудобен для просмотра.
Содержание + структура + визуальная подача + техническая реализация.
Для услуги важно переводить характеристики в практическую ценность
Само название «наливные полы» ещё не объясняет человеку, почему предложение может быть ему полезно. Поэтому текст должен связывать особенности услуги с понятным результатом для клиента.
Характеристика → значение → польза → действие.
Этот принцип особенно хорошо работает в строительстве, ремонте, технических услугах, B2B и других нишах, где продукт нужно не только показать, но и объяснить.
В услугах дизайн чаще строится вокруг аргументов, а не вокруг одной фотографии
В товарном email визуальным центром нередко становится сам продукт. В услуге логика обычно сложнее: нужно показать проблему, решение, выгоды, условия и следующий шаг.
Поэтому визуальная иерархия должна поддерживать именно эту последовательность, а не просто украшать каждый блок одинаково.
CTA появляется тогда, когда человеку уже понятно, зачем на него нажимать
Кнопка сама по себе не исправляет слабое предложение. Она завершает уже построенную смысловую цепочку и должна соответствовать реальному следующему шагу.
После текста и дизайна появляется технический уровень – HTML
Финальный макет должен стать не картинкой письма, а рабочим email. На этом этапе появляются адаптивность, HTML-текст, изображения, ссылки, кнопки и проверка отображения в почтовых клиентах.
Поэтому визуальный макет и готовое HTML-письмо – это связанные, но разные этапы проекта.
Скриншот кейса и настоящее письмо – не одно и то же
На этой странице работа представлена изображением, потому что так её удобно показывать в портфолио. Но реальное email-письмо не должно состоять из одного длинного JPG.
Что получил заказчик в результате
Коммерческая логика была сформирована до дизайна.
Отдельные смыслы распределены по визуальным зонам.
Письмо перестало выглядеть как обычный текстовый email.
Получатель видит предложение, аргументы и следующий шаг.
Такой проект можно начать с разной точки
Текст → структура → дизайн → HTML.
Email-адаптация → дизайн → HTML.
Проверка → адаптивная верстка → тестирование.
Если текст уже готов, не нужно заказывать его второй раз
Если клиент приходит с утверждённым содержанием, материалом собственного маркетолога, коммерческим предложением или текстом копирайтера, можно сразу работать с имеющейся основой.
При необходимости текст только адаптируется под формат email: сокращаются перегруженные абзацы, уточняется порядок аргументов, первый экран и CTA.
Если содержания ещё нет, это отдельная задача
Когда отсутствуют тема, preheader, оффер, аргументы или CTA, сначала нужно разработать саму смысловую основу письма.
Для этого есть отдельная услуга: разработка текста email-письма →.
Этот кейс отличается от проекта, где сначала делался прототип
Здесь отправной точкой был разработанный текст. В другом кейсе работа начиналась иначе: сначала создавалась схема будущего письма, а затем на её основе появлялся финальный дизайн.
Что делает готовый HTML-email удобнее для получателя
После разработки содержания и дизайна остаются UX-задачи: мобильное отображение, заметность CTA, работа изображений, dark mode и проверка в разных почтовых клиентах.
Эти вопросы подробно вынесены в отдельный материал: как сделать HTML-письмо эффективнее →.
Что показывает этот кейс
Есть текст, который нужно превратить в полноценное email-письмо?
Можно передать готовый текст, черновик, коммерческое предложение, материал из презентации или уже утверждённое содержание. Дальше можно выполнить email-адаптацию, дизайн и HTML-верстку.