Дизайн-система для Х5 Банк

Х5 — это банк, связанный с российской розничной компанией «Х5 Group», которая управляет сетями магазинов, такими как «Пятёрочка», «Перекрёсток», «Чижик». Он создан для предоставления финансовых услуг клиентам и партнёрам X5 Group. Для компании мы продумали гибкую дизайн-систему, с которой можно собирать KV из готовых элементов в 6 раз быстрее, чем по обычным шаблонам.

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

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

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

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

X5 Банк, дочерний продукт Альфа-Банка, обратился к нам за разработкой визуальной системы. Основной задачей было создать стиль, который позволил бы банку органично интегрировать свои коммуникации в экосистему приложений ритейлеров «Перекресток» и «Пятерочка», а также поддерживать собственные каналы взаимодействия с аудиторией.

При этом стояла дополнительная задача: объединить яркую, дерзкую стилистику Альфа-Банка с новой идентикой, которая бы выделялась среди конкурентов, таких как Сбер, Тинькофф, Озон Банк, ВТБ и Совкомбанк. Результатом должно было стать решение, которое сохраняет связь с общими принципами визуальной коммуникации Альфа-Банка, но при этом обладает своей уникальностью.

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

В основе визуальной системы — контрастная комбинация:

- Основные цвета: голубой, зеленый, темно-синий с фиолетовым акцентом.

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

Мы сделали акцент на вариативности и материальности элементов, чтобы создать ощущение динамики и уникальности каждого визуального решения. Например, графика включала ленточные и объемные элементы, которые рефлексировали светом и цветом. Это дало ощущение богатства и премиальности, несмотря на универсальность системы.

В рамках концепции мы разработали универсальный банк элементов, включающий:

1) 3D-графику:

- Карты, монеты, банкноты, знаки рубля и валют, символы процентов, стрелки для обозначения процессов (например, переводы, возвраты).

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

2) Продуктовый банк:

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

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

3) Сценарные элементы:

- Фоны и платформы, на которых размещаются объекты.

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

4) Инструкции и гайдлайны:

Хотя полноценный гайдлайн не разрабатывался, мы структурировали материалы в Figma, где каждая композиция сопровождалась инструкциями по работе с элементами.

Проект стал ярким примером интеграции сложной графики и универсальности. В результате:

- Мы разработали банк из сотен готовых 3D-элементов, которые легко адаптируются под любые задачи — от акций до имейл-рассылок.

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

- Визуальный стиль X5 Банка стал выделяться на фоне других игроков рынка, сохранив связь с основными принципами Альфа-Банка.

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