Один рабочий кейс рассказывает о процессе создания email-дизайна больше, чем любая теория. Именно так появилась эта статья: разобрать конкретную задачу шаг за шагом, показать, какие методы используются, откуда берутся идеи и как нейросети вписываются в реальный рабочий процесс. За каждым письмом стоит поиск визуальных решений, эксперименты с анимацией и непрекращающаяся борьба с техническими ограничениями рассылок.
Результат
Сервис подписок «Пакет» обратился с задачей: создать рассылку ко дню основания Санкт-Петербурга. Инфоповод располагал к чему-то яркому и атмосферному, но при этом нельзя было потерять фирменный стиль бренда. Город с трёхсотлетней историей задал настрой это дизайн должен был выглядеть торжественно и сдержанно одновременно.
Финальное письмо можно посмотреть в веб-версии.
Процесс: от идеи до готового письма
Определяем визуальное направление
Историческая тема сразу натолкнула на идею «состарить» визуал: добавить текстуры, зернистость, шум. Вдохновение нашлось на Pinterest. Там искала изображения с отголосками конца XIX века: музейная графика, театральные программки, выставочные каталоги. По стилю понравился коллажный подход с многослойностью, вырезками, обрывками бумаги и сочетанием фотографии с иллюстрацией.
На этапе поиска референсов цветовая палитра бренда намеренно не учитывалась. Сначала нужно было нащупать образ, а уже потом адаптировать его под фирменные цвета «Пакета».
Дополнительный источник вдохновения для работ такого рода: 52 бесплатных сервиса для дизайнеров.
Выбираем шрифт
Чтобы шрифт поддерживал винтажный характер визуала, стандартный современный шрифт бренда для заголовков заменили на что-то более классическое, с засечками. Поиск вёлся на Google Fonts: лицензия свободная, никаких лишних согласований. В итоге выбрали Prata это тонкий и контрастный, хорошо считывающийся как в крупных заголовках, так и в акцентных подписях.
Параллельно тестировали несколько вариантов, в том числе декоративные стилизованные шрифты под старину. Эксперименты помогли лучше понять, какой именно характер нужен письму, даже если эти варианты не попали в финал.
Работаем с изображениями
Первоначально планировали использовать рисованные иллюстрации: они создают нужную атмосферу и легко управляются по стилю. Но в процессе стало ясно, что фотографии точнее передают ощущение настоящей прогулки по Петербургу. Реальный город, живые улицы, узнаваемые виды.
Для исторической части задействовали архив Эрмитажа. Коллекцию картин можно просматривать и искать здесь. Архив большой, можно легко потеряться: перебирали много работ в поисках подходящей.
Пробовали и Midjourney: просили генерировать изображения в стиле отобранных картин. Оживлять оригиналы оказалось некомфортно, не хотелось трогать признанные шедевры мировой живописи. В итоге остановились на одной из ранних работ Караваджо это «Лютнист» из собрания Эрмитажа. Картина достаточно узнаваемая и даёт очевидную культурную привязку к Петербургу.
Оживляем коллаж: анимация через нейросети
Задача была анимировать два главных изображения: разводной мост и Медного всадника. Это стало первым опытом работы с генерацией видео через нейросети.
Перед тем как запускать генерацию, нужно было подготовить исходники. С мостом и всадником проблем не возникло, их скачали с фотостоков. Сложнее оказалось с картиной из Эрмитажа: оживлять оригинал напрямую не хотелось, поэтому сначала попросили Midjourney создать похожее изображение, и только потом передавали его в видеогенератор.
Перепробовали десятки ИИ-сервисов. На начальном этапе большинство выдавали нечто хаотичное и непригодное для использования. Ещё одна сложность: у многих сервисов ограниченный бесплатный лимит, несколько секунд видео на аккаунт, что приходилось регулярно регистрировать новые учётки.
Лучшими инструментами оказались Runway и Hailuoai.
Для анимации коллажа удобнее оказался Hailuoai: быстрее выдавал результат и давал больше кредитов, поэтому основные итерации проходили там. Runway тоже давал качественный результат, но работал заметно медленнее, его использовали параллельно, чтобы набрать больше вариантов для выбора.
Сложнее всего давался всадник. Генерации делали его движение слишком резким, неестественным. Чтобы добиться плавности, видео дорабатывали в Photoshop: отбирали стабильные кадры, правили детали, зацикливали и замедляли нужные фрагменты. Только после такой ручной доработки движение коня стало выглядеть органично.
Адаптируем визуал под формат email
После того как анимации были готовы, предстояло подогнать всё к техническим требованиям рассылок. Нельзя просто взять тяжёлые гифки и изображения и вставить их в письмо: файлы большого размера блокируются почтовыми провайдерами или вызывают долгую загрузку, которая убивает вовлечённость.
Оптимизация велась через ImageOptim. Каждая гифка в итоге получилась не тяжелее 2 МБ это хороший показатель для рассылок.
Отдельный вопрос это тёмная тема. Многие почтовые клиенты инвертируют цвета HTML-элементов, из-за чего фон, сделанный кодом, может не совпасть с цельными гиф-изображениями. Чтобы избежать этой проблемы, большую часть элементов письма нарезали картинками. Те блоки, которые не влияли на цветовую целостность, верстали кодом: часть текстовых блоков, кнопки, шапку и футер.
Подробнее о специфике email-вёрстки можно прочитать в материале «Да, но». Чем дизайн писем отличается от веб-дизайна.
Что стоит за каждым письмом
За финальным письмом скрываются сотни маленьких решений: десятки отклонённых вариантов шрифтов, перебор референсов, неиспользованные генерации Midjourney, ручная доработка видео кадр за кадром. Это не значит, что каждая рассылка требует такого же объёма работы. Но когда задача позволяет идти дальше стандартного шаблона, именно этот уровень проработки отличает письмо, которое замечают, от письма, которое просто открыли.
Несколько принципов, которые работают в таких проектах:
Референсы важнее первой идеи. Поиск на Pinterest или в музейных архивах часто даёт более точный образ, чем любая концепция «из головы».
Шрифт задаёт характер, а не только оформление. Замена современного бренд-шрифта на что-то с историей способна полностью изменить ощущение от письма.
Нейросети: метод, а не готовое решение. Runway и Hailuoai дают сырой материал, который почти всегда требует ручной доработки в Photoshop.
Технические ограничения решаются заранее. Тёмная тема, вес гифок, совместимость с почтовыми клиентами, всё это нужно учитывать до финального экспорта, а не после.
Подход, при котором дизайнер работает с конкретным инфоповодом глубоко, а не «по шаблону», позволяет создавать письма, которые выглядят не как рекламный блок, а как часть культурного события. Именно это и было нужно «Пакету»: письмо, достойное дня рождения Петербурга.
