Прогуляться улочками Vienna: как мы создали свою дизайн-систему

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

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

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

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

Итак, с помощью дизайн-системы мы рассчитывали:

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

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

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

Улицы, районы и дома — это структурные элементы мегаполиса. А самый маленький элемент этой структуры — кирпич, который используется при строительстве зданий.

Архитектура — это наше видение более масштабных объектов. Основой в ней выступают технологические элементы, необходимые для создания новых форм, например, домов. Добавляя кирпичи к технологической составляющей, мы определяем внешний вид зданий.

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

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

Несколько домов формируют улицу. В нашей дизайн-системе ей соответствуют навигационное меню, тулбары (панели с группой кнопок), панель с фильтром, сортировкой и так далее.

Улицы объединяются в район. В контексте дизайн-системы это шаблоны — макеты страниц, представляющие собой набор компонентов, связанных вместе определенной логикой, как улицы — перекрестками.

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

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

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

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

Возьмем, к примеру, поле для ввода текста. Чтобы создать такой компонент с нуля, нужно потратить примерно девять часов — это время уйдет на анализ, дизайн, разработку и тестирование. А чтобы использовать этот элемент из библиотеки компонентов, нужен всего час. То есть даже в случае с таким простым элементом время работы сокращается в девять раз. А при использовании более сложных компонентов экономия времени еще заметнее.

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

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

Для стилизации наших компонентов мы используем библиотеку Styled Components. С ее помощью мы также решаем проблему использования токенов.

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

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

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

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

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

Параллельно с разработкой дизайн-системы в России в центральном офисе Райффайзенбанка в Вене был запущен проект по обновлению бренда и визуального стиля для цифровых каналов. Необходимо было разработать общие правила, стилистику и принципы построения элементов дизайн-системы, единые для всей Группы Райффайзен, и обновить подход к построению продуктов и сервисов.

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

Осенью 2018 года был запущен тендер, который выиграло крупное международное агентство. За год исполнитель разработал диджитал-гайд, описывающий обновленный визуальный стиль, новую палитру, типографику, элементы интерфейса и так далее. Сейчас мы начали обновление компонентов нашей дизайн-системы в соответствии с новым дизайном, созданным в сотрудничестве с венским офисом. В начале 2020 года мы рассчитываем выпустить обновление системы Vienna 2.0, которое будет использоваться во всех наших продуктах.