Холизм: дизайн-система Газпромбанка
В публичный доступ вышла дизайн-система родного Газпромбанка. Теперь доступен промо-сайт и библиотека React-компонентов.
Наконец у всех желающих есть возможность взглянуть за кулисы большой промышленной разработки, а я могу без нарушения NDA рассказать о ней. В Газпромбанке сформировалась сильная продуктовая дизайн-команда и Холизм — великолепный результат двух лет её работы. Успешные российские дизайн-системы можно пересчитать по пальцам и теперь Холизм стал одной из них. Его гайдлайны — открытая книга лучших практик в современном интерфейсном дизайне.
О моей роли в проекте
Над Холизмом я плотно работал в 2018 и до марта 2019. В рамках командной работы я составлял списки нужных компонентов, писал гайдлайны для фронтенд-разработчиков, отрисовывал компоненты, а также занимался организацией инфраструктуры: синхронизации UI-китов, символов и стилей, следил, чтобы ничего не слетало и все пользовались библиотеками. Это был уникальный опыт и огромный пласт работы, который сформировал меня как архитектора крупных систем.
Название
Я помню день, когда мы придумывали это название, собрав со всей команды дизайнеров разные варианты. Мы хотели, чтобы название было монументальным как сам Газпромбанк. Помню варианты «Deus», «Конструктор» и мой вариант «Титан», который теперь кажется излишне помпезным и стремящимся ко дну. Хорошо, что не выбрали мой вариант. Хлёсткое рабочее название проекта — не прихоть. Это важно, потому что его удобно выговаривать и ссылаться.
Большинством голосов победил не сразу понятный, но глубокомысленный вариант, предложенный нашим руководителем— «Холизм». Если нагуглить, можно узнать, что это слово происходит от греческого слова ὅλος, «цельный».
Холизм — это про приоритет целого по отношению к его частям. Холистические системы состоят из составных частей — холонов. Они одновременно являются частями одного большего целого, но и являются целыми сами по себе.
Любая дизайн-система по умолчанию одновременно является холистической. Поэтому, в конце концов я проникся этим названием.
О типографике
Не раз менялся основной шрифт, мы начинали со стандартного Roboto, пробовали Ubuntu, а в итоге остановились на Proxima Nova, который довольно близок к эпловскому San Francisco и особенно хорош как кастомный шрифт для веба. Также пробовали Geometria, он хорош для цифр, которых в онлайн-банке достаточно. А шрифтом для промо-материалов долгое время был Gilroy и благодаря ему я полюбил геометрические шрифты. В итоге, на сайте Холизма мы видим Cera.
Градиент
Особенно трепетно ребята относятся к градиенту от синего до фиолетового. Долгое время основным цветом Газпромбанка был тёмно-синий, который не слишком подходит для современных ярких интерфейсов. Поскольку выгодный для банков ярко-синий занят конкурентом, было принято решение подмешивать в синий фиолетового.
Правила построения и сетка
Мы начинали с гугловской базовой сетки 8px, но позже решили перейти на более управляемую 4px. В качестве модульной сетки используется 12-колонник, похожий на Bootstrap. Он наиболее удобен для реализации адаптивности. Базовая сетка используется внутри компонентов и для оступов, а модульная — в макетах для построения страниц.
Иконки
Интересна впечатляющая библиотека иконок, отрисованная дизайнерами Газпромбанка.
Компоненты
Как любая взрослая дизайн-система, Холизм существует не только в Скетче, но и в коде. В библиотеке компонентов можно ознакомиться с компонентами, необходимыми для дизайна банка. Все они оформлены в простой и удобный демо-сайт. Вот, например, очаровательный мультиселект:
А вот мой персональный предмет для гордости — компонент Calendar, позволяющий выбирать диапазоны дат, в том числе, в разных месяцах:
Холизм помимо всего прочего — это задокументированная библиотека из 27 React-компонентов, доступная в виде NPM-пакета. Теперь её можно использовать для фронтенд-разработки, в том числе, за пределами банка.
Я веду сайт и телеграм-канал /designer о дизайне интерфейсов и инструментах. Написал книгу Руководство по Figma.
