Дизайн-система МегаФона. Эпизод 1: Процессы и инструменты

Авторы: Надежда Терехова, Артём Володин, Станислав Петров

Привет! Это дизайн-команда МегаФона. Мы запустили наш канал на Медиуме и хотим рассказать о нашем опыте создания дизайн-системы в крупной компании. Статья рассчитана на тех, кто в своей работе сталкивается с необходимостью системного подхода к дизайну digital-продуктов как на уровне дизайна интерфейсов, так и на уровне технической разработки.

Небольшая предыстория

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

Сейчас наша команда состоит из нескольких дизайнеров, которые занимаются ключевыми продуктами МегаФона — порталом megafon.ru, интернет-магазином и Личным кабинетом (веб и мобильное приложение), а также отвечают за digital-гайды МегаФона.

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

Зачем нам дизайн-система и что мы под этим понимаем?

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

1. Сокращать время на создание дизайн-макетов и прототипов;
2. Делать интерфейсы консистентными и узнаваемыми, а пользовательский опыт предсказуемым;
3. Ускорять тестирование — чем меньше разнородных интерфейсных паттернов, тем лучше.

Наша дизайн-система состоит из трёх основных частей:

1. Визуальный язык — стилеобразующие принципы дизайна, которые отражают связь с брендом;
2. UI-Kit в Sketch — библиотека интерфейсных компонентов для дизайнеров;
3. React-библиотека — библиотека интерфейсных компонентов для разработчиков.

Визуальный язык

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

UI-библиотека

UI-библиотека — это набор интерфейсных компонентов, которые мы храним и поддерживаем на двух ресурсах:

• UI-Kit (Sketch) — библиотека для дизайна, делается в Sketch.
• ui.megafon.ru — библиотека компонентов в коде, превью компонентов и документация к ним.

Немного истории. Создание первого UI-Kit

Первый UI-Kit мы создавали для веб-приложения Личного кабинета. На старте работ у нас было множество макетов в .ai, дизайн в которых, как это обычно бывает, значительно отличался от того, что разработали в итоге. К моменту начала создания кита мы уже начали переход на Sketch как наиболее удобный инструмент для работы с символьными библиотеками, поэтому решили отказаться от попытки систематизировать имеющиеся макеты и отрисовали всё с чистого листа.

Работа проходила в несколько простых по смыслу, но трудоемких этапов:

1. Инвентаризация интерфейса
2. Унификация компонентов
3. Создание базы стилей
4. Отрисовка компонентов

Инвентаризация

Скриншотим все компоненты в интерфейсе (кнопки, формы, таблицы, тексты и т. д). Группируем их и на выходе получаем файл с категоризированным набором компонентов.

Унификация

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

Создание базы стилей

Мы нашли все цвета, которые использовались в Личном кабинете, текстовые стили, а также отрисовали сетку. На этом этапе цвета и стили также могут претерпеть унификацию. В нашем случае не повезло оттенкам серого. Их количество уменьшилось втрое.

Отрисовка компонентов

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

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

Структура UI-кита

UI-кит хранится в одном мастер файле (если быть точным, то мастер библиотеке, так как мы используем Sketch libraries) и состоит из трёх блоков:

Style — здесь находятся стилеобразующие элементы:

• Typography
• Colors
• Icons
• Logotype

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

Components — элементы нашего «конструктора»

• alert
• button
• checkbox
• …
• top bar

Компоненты делятся на базовые и уникальные. Базовые — это компоненты, которые используются практически во всех проектах. Сюда входят как довольно простые компоненты — кнопки, элементы форм, аккордеоны, так и более сложные — меню, футер, плитки. Уникальные компоненты — это компоненты, которые используются только в конкретном сервисе.

Layout — каркас вёрстки и правила построения.

• Baseline grid
• Layout grid

Базовая сетка (baseline) представляет собой классический вариант с микромодулем в 4px. Интерлиньяж, высота элементов и отступов кратны четырем. Layout grid — вертикальная сетка, внутри которой создаются блоки интерфейса.

Подключение библиотеки

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

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

• major — кардинальное изменение элементов
• minor — добавление и/или удаление новых элементов
• patch — исправление либо багов, либо каких-то мелочей (например, цвет рамки поля)

Мы также загружаем актуальную версию UI-Kita в Zeplin для удобства превью и как промежуточный этап передачи в разработку.

Библиотека в коде

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

• Разработка и поддержка от Facebook, которые используют React на своих проектах;
• Множество библиотек;
• Очень хорошая документация;
• Огромное коммьюнити;
• Минимальные затраты на обновление до новой версии;
• Много open-source примеров UI-китов;
• У наших разработчиков уже был опыт разработки на React.

При публикации новой minor-версии UI-кита происходит синхронизация компонентов между китом и библиотекой React.

Будущее

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

• Продолжить наполнение библиотеки более сложными компонентами;
• Добавить разделы по бренду, иллюстрациям и анимации в интерфейсе;
• Добавить аннотации про то, в каком контексте и как следует использовать компоненты, а также описать высокоуровневые принципы дизайна;
• Распространить подход на другие продукты компании;
• Открыть доступ к ui.megafon.ru во внешний мир.

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

Следите за обновлениями и переходите в МегаФон.

P.S. Спасибо Dana Keylsonate и Nikita Safonov за помощь в написании статьи.