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