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

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

В закладки

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

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

Виктория Дубровская
UX-дизайнер, Райффайзенбанк

Зачем это нужно

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

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

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

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

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

Что для нас дизайн-система

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

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

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

Философия дизайн-системы

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

За основу мы взяли концепцию атомарного дизайна, а наименования привязали к названию нашей системы — Vienna. Получился город, который из маленького аванпоста превращается в современный мегаполис.

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

Architecture

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

Brick

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

House

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

Street

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

District

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

City

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

Как это работает: инструменты и технологии

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

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

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

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

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

На данный момент наша компонентная база разработана на основе библиотеки React. Это одна из самых популярных библиотек с открытым кодом, которая применяется при создании пользовательских интерфейсов. Она отлично подходит для нашей работы благодаря своей компонентной архитектуре, что упрощает задачу разложения кода на независимые фрагменты, которые легко использовать повторно.

Библиотека вспомогательных методов

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

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

Токены

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

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

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

Кто разрабатывает систему

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

Мейнтейнеры

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

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

Мария Гущина
фронтенд-разработчик, Райффайзенбанк

Контрибьютеры

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

Стейкхолдеры

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

Диджитал-гайд для Группы RBI

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

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

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

Дмитрий Мясников
эксперт по дизайну продуктов и сервисов, Райффайзенбанк

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Райффайзенбанк", "author_type": "editor", "tags": [], "comments": 11, "likes": 15, "favorites": 57, "is_advertisement": false, "subsite_label": "design", "id": 90566, "is_wide": true, "is_ugc": false, "date": "Tue, 05 Nov 2019 17:11:43 +0300", "is_special": false }
0
{ "id": 90566, "author_id": 221392, "diff_limit": 1000, "urls": {"diff":"\/comments\/90566\/get","add":"\/comments\/90566\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/90566"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
11 комментариев
Популярные
По порядку
Написать комментарий...

Комментарий удален

3

Я, конечно, не уверен, но блять, ничего страшного нет, просто метафора пересеклась. И скажу честно, на заре велосипедирования, я свой почти ecs-подход называл  удивитесь, в честь Токио - Tygos (Tokyo game object system), и там точно так же были квартиры, дома, кварталы (flat, house, quarter)

Ответить
6

Как сделать дизайн-систему. Берешь концепцию другой дизайн системы которую делает один человек и делаешь её быстрее https://tokyo-design.ru/

Ответить
2

Ого, прикольно) ну мы начали года полтора назад, так что тоже не очень быстрые 😄

Ответить

Комментарий удален

5

— Дашь домашку списать?

— Дам, но только не списывай точь-в-точь, чтобы не спалили.

— Ок.

Ответить
3

Без ссылок скучно, подобной инфы достаточно в сети и так

Ответить
–1

Дайте ссылку на Фигму

Ответить
0

Есть сайт системы с описанием?

Ответить
3

Сейчас в свободном доступе нет — готовим под обновление компонентов (будет Vienna 2.0). Как только закончим, покажем :)

Ответить
1

Даже без Артемия обошлись 

Ответить
0

Статья про дизайн без изображений? Really?

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }