СБЕР «Школа дизайна» — дизайн писем для имейл-курса

Задача: задизайнить 8 рассылок для имейл-курсов «Дизайн-грамотность».

Цель: сделать письма не просто с обучающим контентом, но и с уникальной трендовой визуальной подачей полезного материала.

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

Пример письма из имейл-курса

Разработка идеи

Поиск стиля занятие непростое: без экспериментов и насмотренности тут не обойтись. Перед каждым проектом мы собираем много референсов и формируем основную идею. В данном кейсе мы постарались сделать письма максимально современными и «диджитальными», ведь курс для дизайнеров не может быть визуально скучным. Мы хотели разработать такой стиль рассылок, который одновременно был бы как простым для восприятия, так и узнаваемым для потребителя и заметно отличающимся от других имейл-курсов на рынке.

Поэтому перед стартом разработки мы провели глобальную подготовку: отобрали подходящие референсы и изображения, которые затем соотнесли с фирменным гайдбуком СБЕРа. В итоге на первом этапе поиска было отобрано более 100 референсов и иллюстраций. Вот некоторые примеры:

Затем выделили понравившиеся элементы, на которые ориентировались, чтобы разработать собственный уникальный стиль мастер-шаблона.

Использовали фирменный гайдбук СБЕРа, чтобы стиль бренда оставался узнаваемым. Все цвета имеют свои уникальные названия, такие как «арктический Сбер» или «снежный Сбер».

Проанализировав референсы и иллюстрации, предложили промежуточный шаблон.

На этом этапе письма уже стали получаться интересными, но им не хватало индивидуальности. Хотелось сделать разительно отличавшиеся от других брендов рассылки с курсами.

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

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

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

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

Структура письма и блоки

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

Банеры

Текстовые блоки

Контентные блоки

Кнопки и подвал

Креативные дизайн-решения

Баннерам, иллюстрациям и гифкам уделено особое внимание, так как они метафорически должны отображать суть урока и сопровождать сложный контент. Теперь все заголовки стали сочетаться с иллюстрациями.

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

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

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

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

Гиф «Инновации позволяют опережать рынок, поскольку на момент выхода продукта на рынок ваши конкуренты не сразу поймут то, что поняли вы»:

Тёмная тема

Все письма мы адаптировали по тёмную тему, добавив обводку и прозрачность фона, чтобы фирменные цвета текста не сливались.

Комментарий клиента

«Имейл-курсы очень стильные. Это правда продукт, которым хочется делиться, который не теряет актуальности в части оформления и дизайна. И сам формат — лучший способ донести контент до пользователя в максимально удобном формате».

Дарья Титоренко, менеджер образовательных проектов.