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

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

MegaFon UX/UI Team
Nov 27, 2017 · 6 min read
Image for post
Image for post

Привет! Это дизайн-команда МегаФона. Мы запустили наш канал на Медиуме и хотим рассказать о нашем опыте создания дизайн-системы в крупной компании. Статья рассчитана на тех, кто в своей работе сталкивается с необходимостью системного подхода к дизайну 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 — библиотека компонентов в коде, превью компонентов и документация к ним.
Image for post
Image for post

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

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

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

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

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

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

Image for post
Image for post

Унификация

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

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

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

Image for post
Image for post

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

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

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

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

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

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

  • Typography
  • Colors
  • Icons
  • Logotype

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

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

  • alert
  • button
  • checkbox
  • top bar

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

Image for post
Image for post

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

  • Baseline grid
  • Layout grid

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

Image for post
Image for post

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

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

Image for post
Image for post

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

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

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

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

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

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

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

Image for post
Image for post

Будущее

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

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

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

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store