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