Логотип
Обсудить
Бесплатный аудит бренда. Заказать ›
HTML-письмо в окне почтового клиента на ноутбукеHTML-письмо онлайн-школы на ноутбукеСайт онлайн-школы, на который ведёт письмоСайт финансового сервиса на ноутбукеСайт сервиса выпускных на ноутбукеСайт business-registr.ru на ноутбукеСайт бум-открытки на ноутбуке

HTML-письмо

Письмо, которое доходит до клика.

БрифКому письмо и что должен сделать получатель.

От 600 BYN, от 1 недели.1
Серия из 5 писем — 2 400 BYN.2

Обсудить

Коротко о главном.

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

Читается с телефона.
И в почте на компьютере.

Все нужные файлы.
Макет, код и картинки.

Всё остаётся у вас.
Файлы и права передаются вам.

Письма и сайты в разных нишах.
Финансы, образование, медицина, производство.

18проектов с веб-дизайном в портфолио

Избранное

Шесть работ,
которые показываю первыми.

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

1 из 6 · нажмите, чтобы листать кадры во весь экран

Портфолио

18 проектов с веб-дизайном
с 2014 года.

Ниже — сайты, страницы и письма, которые работают прямо сейчас: в рекламе, в рассылках и в поиске. Часть из них разобрана выше.

Лендинг Евроломбард — вопросы и ответы Лендинг Relax.by — сервисы для ресторанов Relax.by — QR-меню на экране телефона Страница Loveng — корпоративный английский HTML-письмо Loveng Сайт Vypusknoy.by на ноутбуке и телефоне Vypusknoy.by — экраны сервиса Сайт ChmokiBoom Сайт Par Woodwork на ноутбуке и телефоне PharmBonus — экран приложения PharmBonus — возможности приложения Промо-сайт: реклама в Минске Одностраничный сайт на ноутбуке и телефоне Интернет-магазин на ноутбуке и телефоне Сайт-каталог на ноутбуке и телефоне Сайт business-registr.ru после редизайна

Конструкция

Собрано по сетке,
а не на глаз.

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

Сетка. Одна колонка 600 px: модули встают по порядку.

Система письма

Одно письмо.
Четыре места.

Письмо открывают в разных местах — и в каждом оно должно читаться.

До

15

шаблонов
в тарифе «Визионер»

От

10

почтовых клиентов
проверяю в тарифе «Бизнес»

Компьютер

Основная версия: тема, предложение и кнопка видны без прокрутки.

Телефон

Одна колонка и крупная кнопка — рассылку открывают на ходу.

Планшет

Колонка стоит по центру и не растягивается: текст читается, кнопка не теряется.

Проверьте сами.

Переключите устройство — и посмотрите, какая версия письма за него отвечает.

Компьютер

Компьютер. Почта в браузере и приложении: всё главное сразу.

Мелочи, из-за которых письмо работает или уходит в корзину.

Одно письмо — одна мысль. Две мысли в одном письме — и человек не нажмёт ни на одну.

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

Контраст кнопки. Бледная кнопка на телефоне под солнцем превращается в пустое место.

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

В жизни

Письмо проверяется
там, где его откроют.

Не в макете у дизайнера, а в почте на компьютере, на телефоне и в браузере.

HTML-письмо в окне почтового клиента
Почтовый клиентТема, предложение и кнопка видны без прокрутки.
HTML-письмо на экране телефона
ТелефонКнопка под большим пальцем, текст читается без увеличения.
Сайт, на который ведёт письмо
Письмо и сайтКнопка ведёт на страницу с тем же предложением и в тех же цветах.

Срок жизни

Шаблон должен пережить
десятки рассылок.3

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

Сколько живёт каждая часть

Тема и предложение каждая рассылка

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

Шаблон и сетка годы

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

Тексты и акции по акциям

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

Проверка в почте годы

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

Сроки — по частям. Общий ориентир по шаблону: годы шаблон живёт, пока не сменится фирменный стиль3, а не сделан под одну рассылку.

Дело не в том, что письмо «устарело».

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

Когда модули и правила есть —

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

Зачем система

Письмо, собранное
под одну акцию, переделывается.

Каждая новая акция — новая копия письма: через полгода их десять, и ни одно не похоже на другое.

ПО ЧАСТЯМ

В теме одно, в письме другое

Тема обещает одно, кнопка ведёт на другое, а страница — третье. Получатель закрывает письмо.

четыре места — и письмо в каждом своё

СИСТЕМОЙ

От почты до мессенджера — письмо одно

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

четыре места — письмо одно и то же

Процесс

Семь этапов.

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

3 неделиот брифа до шаблонов и файлов
0из 7 этапов закрыто
Дни 1–3Дни 4–10Дни 11–21
01 · Бриф1 день
Созвон и вопросы

Созваниваемся на 30–60 минут. Спрашиваю про рассылку и получателя: кому письмо, что должно произойти после клика — покупка, заявка, запись. Анкету заполнять не нужно: вопросы задаю я.

02 · Структура письма2 дня
Предложение и модули

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

03 · Дизайн в Figma5 дней
Письмо целиком

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

04 · Согласование2 дня
Правки по макету

Вы смотрите макет на телефоне и компьютере и присылаете правки. Макет уходит в вёрстку только после вашего «да».

05 · Вёрстка в HTML6 дней
Адаптивный код

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

06 · Проверка в почте3 дня
Почтовые клиенты

Открываю письмо в почтовых программах и на телефонах, как это делают получатели. Что ломается — чиню до отправки, а не после рассылки.

07 · Подключение и сдача2 дня
Файлы и рассылка

Отдаю HTML, макет Figma и картинки. На тарифе «Бизнес» и выше подключаю письмо к вашему сервису рассылок — сам настраиваю, чтобы вы не разбирались с кодом.

Быстро — это тоже режим.

Рассылка стартует на следующей неделе — сроки жёсткие. На этот случай есть тариф «Старт»: одно письмо, базовая вёрстка, адаптивность. Этого хватает, чтобы отправить рассылку и не краснеть за письмо.

1 неделя от брифа до готового письма в тарифе «Старт»1

Ваша ситуация

Что у вас сейчас
с рассылкой?

Выберите строку, похожую на вашу. Покажу, что это даёт сегодня, что будет после работы и с чего я бы начал.

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

Как сейчас

  • Каждое письмо пишут заново: заголовки, цвета и кнопки разные, получатель не узнаёт отправителя.
  • Картинки без запасного текста: там, где почта их блокирует, остаётся пустое место.
  • Кнопки нет, ссылка спрятана в абзаце — поэтому на неё почти не нажимают.

Как будет

  • Шаблон письма в стиле бренда: тема, предложение, выгоды, кнопка, подвал.
  • Адаптивная вёрстка: с телефона письмо открывается так же удобно, как с компьютера.
  • Макет и модули у вас: следующее письмо соберёте из готовых блоков.

Что рекомендую

Новый шаблон. На тарифе «Старт» — одно письмо без серии. Серия из 5 писем — тариф «Бизнес».

от 600 BYN · серия из 5 писем 2 400 BYNОбсудить

Это входит в любом варианте — и в новый шаблон, и в обновление.

Кроме тарифа «Старт»: там одно письмо и базовая вёрстка, без гайда. Полный состав — ниже, в тарифах.

Что вы получаете

Гайд по рассылке.
Правила, а не картинки.

Код письма, макет и картинки — и 4 файла в одной папке.

0 из 4 файлов · в типовом комплекте

Файлы. Код письма, макет, картинки и PDF — всё, что спросит тот, кто отправляет рассылку.

Что входит

4 вида файлов
и гайд по рассылке.

Файлы для вёрстки, для рассылки и для отчёта — и под каждым написано, куда он идёт. Файлы лежат одним архивом, гайд — отдельным PDF.

HTMLГотовое письмо1–15+ файловРассылкаСервис рассылок
Зачем он нужен

Адаптивный код письма. Его загружают в сервис рассылок и отправляют. Число писем зависит от тарифа: от одного до библиотеки из 15 и больше шаблонов.

FIGМакет в Figma1 файлДизайнерПравкиНовые письма
Зачем он нужен

Макет письма и его блоки. Новый вариант собирается из них, а не рисуется заново.

PNGКартинки для письмапо макетуПисьмоКнопкиШапка
Зачем он нужен

Иконки и графика нужного размера. Письмо открывается быстро и не тянет тяжёлые оригиналы.

PDFМакет для согласования1 файлСогласованиеПочтаМессенджер
Зачем он нужен

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

После сдачи. Письмо не остаётся одно.

Права у вас

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

Вопросы по файлам — без счёта

Нужен другой формат — отдам в тот же день.

Новые письма

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

Хранение архива

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

Продолжение

Лендинг, сайт и реклама строятся в том же стиле.

Связь напрямую

Тот, кто разрабатывает, и есть тот, кто отвечает.

Что дальше

Письмо — часть пути,
а не весь путь.

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

Артём Дементьев, арт-директор
Артём Дементьеварт-директор
10+лет в дизайне B2B и B2C
300+проектов в брендинге и интерфейсах
16отраслей — от HoReCa до медицины
106проектов разобраны на сайте

Почему со мной

Отвечаю лично.

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

Вы говорите с тем, кто разрабатывает

Между вами и письмом нет цепочки «менеджер — арт-директор — исполнитель»: про рассылку вы рассказываете мне, и я же её разрабатываю. Ничего не теряется в пересказе. Когда нужен узкий специалист — копирайтер, настройка рассылки — я его подключаю, но перед вами за результат отвечаю один я.

Показываю логику, а не картинку

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

Проверяю письмо в почте и на телефоне до отправки

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

Цена фиксируется до старта

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

Отдаю исходники

Права и файлы — ваши. Не держу клиента на «а исходники за отдельную плату» и не прячу рабочие слои.

Остаюсь на связи и после сдачи

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

Цены

Выберите глубину.

 

Старт

Одно письмо: адаптивная вёрстка по вашим текстам.

600 BYN1 неделя1

Обсудить
Правки1 итерация
Писем1 письмо
ФорматыHTML
Вёрсткабазовая
Адаптивностьесть
Проверка в почтовых клиентахне входит
Подключение к сервису рассылокне входит
Динамический контентне входит
Цепочки писем по событиямне входит
Дизайн-система для писемне входит

Чаще всего берут

Бизнес

Серия из 5 писем: профессиональная вёрстка и проверка в почтовых клиентах.

2 400 BYN2–3 недели2

Обсудить
Правкидо 3 итераций
Писем5 писем
ФорматыHTML и макет Figma
Вёрсткапрофессиональная
Адаптивностьесть
Проверка в почтовых клиентахв 10+ клиентах
Подключение к сервису рассылокесть
Динамический контентне входит
Цепочки писем по событиямне входит
Дизайн-система для писемне входит

 

Визионер

Библиотека писем: 15+ шаблонов, динамический контент и триггерные цепочки.

6 000 BYN4–6 недель

Обсудить
Правкибез лимита — до результата
Писем15+ шаблонов
ФорматыHTML и макет Figma
Вёрсткапрофессиональная
Адаптивностьесть
Проверка в почтовых клиентахв 10+ клиентах
Подключение к сервису рассылокесть
Динамический контентесть
Цепочки писем по событияместь
Дизайн-система для писемв комплекте

Обсудить проект

Система ART-OS

HTML-письмо — часть четвёртого модуля из девяти.

Система ART-OS: девять модулей бренда в одном чипе
  1. 01СтратегияПозиционирование, ценности и УТП, портреты ЦА
  2. 02АйдентикаЗнак и визуальный язык: логотип, цвет, шрифт, носители
  3. 03Инструменты продажМатериалы для сделки: презентации, КП, тендерный пакет
  4. 04Сайт и интерфейсывы здесьПуть от первого экрана до заявки
  5. 05УпаковкаПолка и маркетплейсы: конструкция, выкладка, этикетка
  6. 06Оформление средыПространство и интерьер: вывеска, навигация, транспорт
  7. 07КонтентСъёмка, движение и визуальный контент, включая анимацию знака
  8. 08Дизайн-системыПравила и масштабирование: макеты, шаблоны, библиотека
  9. 09Сенсорика брендаСвет, материал, запах, тактильность

Письмо — начало.

Вопросы

Что обычно спрашивают.

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

Сколько стоит HTML-письмо в Минске?

От 600 BYN — тариф «Старт»: одно письмо, базовая вёрстка, адаптивность. Серия из 5 писем с профессиональной вёрсткой, проверкой в 10+ почтовых клиентах и интеграцией с сервисом рассылок — 2 400 BYN. Библиотека из 15+ шаблонов с триггерными цепочками — 6 000 BYN. Цена фиксируется до старта и не растёт по ходу работы.

Сколько времени занимает разработка письма?

1 неделя на тарифе «Старт», 2–3 недели на «Бизнесе», 4–6 недель на «Визионере». Срок считается от подтверждённого брифа и предоплаты. Этапы наслаиваются: пока вы читаете структуру, уже собираются сетка и модули.

Какие файлы я получу?

Код письма (HTML), макет в Figma, картинки в PNG и PDF для согласования. Число писем зависит от тарифа.

Кому принадлежат права на письмо?

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

Можно ли потом менять тексты и блоки самим?

Да: шаблон собран из модулей, а гайд объясняет, как добавить блок и не сломать вёрстку. Заголовки, цены и картинки обновляются в сервисе рассылок без перерисовки.

Вы работаете один или с командой?

Задачу веду я: бриф, структура, дизайн, макет. Между вами и письмом нет цепочки «менеджер — арт-директор — исполнитель». Когда нужен узкий специалист — копирайтер, настройка рассылки — подключаю проверенного, но за результат отвечаю я.

У нас уже есть рассылка. Нужно переделывать с нуля?

Скажу на брифе честно. Если идея работает — не переделываю, а привожу в порядок: сетку, шрифты, кнопки и модули. Это тариф «Старт» — от 600 BYN. Если письма склеены из кусков и ломаются в почте, дешевле выстроить шаблон заново.

Что будет после сдачи, если понадобится новая версия?

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

Сколько правок входит?

Смысл правим на структуре, пока она не встанет, — это дешевле, чем переделывать готовый макет. В дизайне — до трёх итераций правок по выбранному направлению. Если ключевые модули не попали в стиль, делаю ещё один заход бесплатно — один раз.

Вы пишете тексты для письма?

На «Старте» работаю с вашими текстами, сокращая их до читаемого объёма. На «Бизнесе» и «Визионере» строю логику письма и пишу заголовки сам: заголовок — это мысль, а не тема. Подробные тексты, если нужны, пишет копирайтер под мою структуру.

Почему не взять тему из сервиса рассылок или нейросеть?

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

Вы работаете один. Что, если заболеете или будете недоступны?

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

Бесплатно и ни к чему не обязывает

Начнём с разбора письма.

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

Артём Дементьев

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

Артём Дементьев · разбираю сам, обычно в тот же день

ваша очередь

Прислать письмо на разбор Позвонить · +375 29 888-08-95