Коммуникационная дизайн-система Газпромбанка

Главное о кейсе

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

Как проект изменил жизнь пользователей

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

Это позволило разгрузить дизайнеров от рутинных операций и сосредоточить их усилия на креативных задачах и развитии визуальных решений.

Бизнес-задача и ее решение

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

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

Решение:
1. Единая система со всеми элементами айдентики каждого направления, основанная на стилях и компонентах, которая автоматически обновляется через библиотеки.
2. Интерактивные (настраиваемые) шаблоны, позволяющие готовить коммуникационные материалы быстро и без ошибок.
3. Внутренние инструменты, оптимизирующие процессы и значительно упрощающие ежедневную работу дизайнеров.

Крафт (мастерство), реализация, технические детали

Библиотека стилей и компонентов.

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

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

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


Универсальный шаблон.

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

Шаблон предоставляет максимальную гибкость: в каждом ресайзе доступны точечные настройки. Текст можно форматировать как централизованно (размер шрифта, межстрочные расстояния и т. д.), так и индивидуально для конкретного формата. То же самое относится к графике — её размер и положение можно менять локально, без влияния на остальные ресайзы.

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


Констуктор для мерча.

Кроме универсального шаблона, для специфических форматов разработан набор дополнительных шаблонов. Один из таких шаблонов — «Конструктор для мерча», который так же распространяется на все 13 направлений. Он позволяет быстро готовить превью для мерча по 21 носителю. Дизайнер загружает изображение в специальные области на разверстке, выбирает цвет носителя — и система автоматически формирует все мокапы во множестве видов и ракурсов.

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


Собственные разработки.

Для максимальной автоматизации процессов и устранения рутины разработан набор специализированных плагинов для Figma. Каждый из них решает конкретные задачи дизайнеров и заметно ускоряет работу.

E-Isometric — инструмент для изменения изометрии
и создания псевдотрехмерных проекций объектов.

E-ImageCompression — специализированное решение для оптимизации изображений без потери качества.

E-MailSlice — комплексное решение для подготовки email-рассылок. Плагин объединяет функционал нарезки изображений на части, их сжатия и создания готовых MSG-файлов для Outlook.

E-PropertiesUI — инструмент визуализации свойств, который автоматически создаёт интерфейс настроек на основе выбранного компонента.

Все плагины бесплатны и общедоступны для дизайнерского сообщества в Figma (figma.com/@timur_etc).

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

Качество решений подтверждается профессиональным сообществом: плагины E-Isometric и E-ImageCompression были отмечены в медиа о дизайне «Журналус».

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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


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

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

В итоге проект превратился не просто в дизайн-систему, а в полноценную экосистему инструментов, которая живёт и развивается вместе с брендом.

Скриншоты