Дизайн-система Consta

Заказчик
ПАО "Газпром нефть"
Руководитель проекта со стороны заказчика
ИТ-поставщик
«Газпромнефть – Цифровые решения»
Год завершения проекта
2021
Сроки выполнения проекта
Январь, 2020 - Ноябрь, 2021
Масштаб проекта
15700 человеко-часов
Цели

1. Создать удобный инструмент для разработки интерфейсов с самого начала и до конца: от прототипов до программной реализации.

2. Сделать разработку интерфейсов цифровых продуктов проще и дешевле со стороны дизайна и фронтенд-разработки.

3. Превратить цифровые продукты компании в единое пространство для пользователей, с уникальными, но одинаково удобными и привычными продуктами.

4. Унифицировать технологии фронтенд-разработки и упростить поддержку созданных решений и сервисов.

Уникальность проекта

1. Компоненты и в макетах, и в коде. Дизайн-система существует в двух форматах: в виде макетов Figma (для дизайнеров) и в коде (для разработчиков). Компоненты для дизайнеров и разработчиков синхронизированы и представляют собой одни и те же сущности, реализованные разными способами. Это важно для совместной работы над продуктом.

2. Гибкая тематизация. Вид интерфейса, построенного на дизайн-системе, определяет тема — шрифты, цвета, отступы, размеры элементов, форма компонентов. Тему можно поменять в любой момент и для любой части проекта. В Consta есть три готовые цветовые схемы (светлая, тёмная и акцентная). Можно использовать их или создать свою.

3. Доступность и востребованность. Дизайн-система доступна внутри компании и за её пределами. У основной библиотеки в Figma 203 000 просмотров и 4 300 установок, в основном репозитории на GitHub 36 контрибьюторов и 1184 коммита. Работа над дизайн-системой продолжается, можно оставить запрос на доработку и принять участие в разработке
Проект решает задачи импортозамещения
Нет
Использованное ПО

Figma, React JS, TypeScript, PostCSS, GitHub, Storybook

Сложность реализации

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

2. Гибкость vs консистентность. Мы стараемся сделать все компоненты максимально гибкими и одновременно сохранить консистентность. Собираем все модификации и предоставляем удобные способы взаимодействия с компонентами средствами Figma (для дизайнеров) и гибко настроенного API (для разработчиков).

3. Уникальные специалисты. Для разработки дизайн-системы одновременно в двух реализациях нужны fullstack-дизайнеры — специалисты по UX/UI-дизайну, которые умеют писать код.

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

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

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

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

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

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

Дизайн-система регулярно обновляется, выпускаются еженедельные релизы.

Подробнее на consta.gazprom-neft.ru

За 2021 год основная библиотека дизайн-системы Consta UI-Kit значительно расширилась, появилось 14 новых компонентов. Добавилась библиотека графиков Consta Charts с разными видами диаграмм — линейными, столбчатыми, круговыми. Добавлены UI-киты для разработки макетов мобильных приложений под IOS и Android. Значительно доработана документация, как в целом по дизайн-системе, так и по каждому компоненту. Созданы гайдлайны по UX/UI дизайну для использования внутри компании. В них рассказываем о лучших практиках, как работать с дизайн-системой и как встроить дизайн-систему во внутренние процессы. Всё это — по просьбам дизайнеров и разработчиков, использующих дизайн-систему, часто — с их активным участием.

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

География проекта

Все регионы присутствия «Газпром нефти», подрядчики, создающие продукты для «Газпром нефти», а также вся мировая индустрия по разработке цифровых интерфейсов: дизайн-система в открытом доступе, её может использовать кто угодно по лицензии MIT (со ссылкой на разработчиков).

Коментарии: 4
  • Михаил Петров
    Рейтинг: 806
    Счетная палата Российской Федерации
    Директор департамента цифровой трансформации
    15.11.2021 23:27

    в другом месте про этот продукт спрашивал - а оказывается про него отдельно есть. замечательно.

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

    • Андрей Белевцев Михаил
      Рейтинг: 753
      Газпром нефть, ПАО
      Директор дирекции по цифровой трансформации
      22.11.2021 19:23

      Михаил,

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

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

  • Дмитрий Фёдоров
    Рейтинг: 678
    Российский Футбольный Союз
    Руководитель департамента цифровых технологий
    15.11.2021 23:40

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

    • Михаил Петров Дмитрий
      Рейтинг: 806
      Счетная палата Российской Федерации
      Директор департамента цифровой трансформации
      15.11.2021 23:52

      спасибо))

Год
Предметная область
Отрасль
Управление