Единый стандарт для создания интерфейсов цифровых продуктов «Газпром нефти»
- Заказчик:
- ПАО "Газпром нефть"
- Руководитель проекта со стороны заказчика
-
- Поставщик
- ООО "Газпромнефть - Цифровые решения"
- Год завершения проекта
- 2020
- Сроки выполнения проекта
- Ноябрь, 2019 - Декабрь, 2020
- Масштаб проекта
- 6200 человеко-часов
- Цели
1. Упростить и снизить стоимость разработки интерфейсов цифровых продуктов как со стороны дизайна, так и со стороны фронтенд-разработки.
2. Сделать все продукты одинаково удобными, знакомыми и привычными для пользователей (единообразный пользовательский опыт).
Уникальность проекта
1. Поддержка гибкой тематизации. Наша дизайн-система имеет набор тем из «коробки» (светлая, темная и презентационная) и даёт возможность дизайнеру или разработчику быстро создать свою уникальную тему.
2. Вариативность. Все компоненты в библиотеке обладают большим количеством модификаций, как визуальных, так и функциональных. Это позволяет создавать очень разные по стилю, нагруженности и целям сервисы одним и тем же набором компонент. Библиотека содержит в себе набор компонентов и графиков, достаточных для создания среднего по сложности сервиса.
3. Open source. Дизайн-система Consta лежит в открытом доступе и доступна всем, как для использования, так и для контрибьютинга. Работы по дизайн-системе ведутся непрерывно. Все планы и запросы пользователей также в открытом доступе. Любой может посмотреть статус той или иной фичи или добавить свою.
- Использованное ПО
Figma, React JS, TypeScript.
- Сложность реализации
Разработка дизайн-системы – сложная и большая работа.
Мы стараемся заложить максимальную гибкость каждого компонента, но с сохранением консистентности. Собираем все модификации и предоставляем удобные способы взаимодействия с компонентами средствами Figma (для дизайнеров) и гибко настроенного API (для разработчиков).
- Описание проекта
Компания «Газпром нефть» ежегодно создаёт большое количество цифровых продуктов. Все они делаются разными командами, подрядными организациями и подразделениями. Используются разные технологические стеки. Как следствие, конечному пользователю приходится взаимодействовать с большим количеством инструментов, имеющих разные интерфейсы. Нет единства решений, из-за чего много времени тратится на когнитивное переключение между визуально абсолютно разными интерфейсами.
Дизайн-система позволяет унифицировать технические и дизайн-решения при разработке цифровых продуктов, что даёт возможность переиспользовать наработки между сервисами и экономить время на дизайн и фронтенд-разработку. Конечный пользователь получает предсказуемый интерфейс независимо от сервиса, что экономит время на погружение в новый сервис.
Дизайн-система Consta — это библиотека компонентов, правила их взаимодействия и принципы для создания своих уникальных компонентов.
Компоненты — кнопки, иконки, списки, таблицы и другие элементы, из которых собирается интерфейс, реализованы в двух форматах: для дизайнеров, чтобы собирать макеты в Figma, и для разработчиков – в виде кода на React (в репозитории на GitHub).
На витрине дизайн-системы в Сторибуке можно менять параметры и смотреть, как меняются элементы. У каждого компонента есть вкладка с подробной документацией.
Дизайн-система регулярно обновляется, выпускаются еженедельные релизы.
Подробнее на consta.gazprom-neft.ru
- География проекта
Все регионы присутствия «Газпром нефти», подрядчики, создающие продукты для «Газпром нефти».
