consta.gazprom-neft.ru Open in urlscan Pro
84.201.177.84  Public Scan

Form analysis
0 forms found in the DOM

Text Content

You need to enable JavaScript to run this app.
 * Компоненты
 * Figma
 * GitHub
 * Новости в Telegram

 * Компоненты
 * Figma
 * GitHub
 * Новости в Telegram


ДИЗАЙН‑СИСТЕМА ДЛЯ БЫСТРОЙ РАЗРАБОТКИ ИНТЕРФЕЙСОВ

Компоненты


ЧТО ТАКОЕ ДИЗАЙН‑СИСТЕМА?

Это библиотеки компонентов и понятные правила их взаимодействия — всё, что нужно
дизайнерам и разработчикам для создания интерфейсов.

Cмотреть видео


БИБЛИОТЕКА

Кнопки, иконки, списки, таблицы — основные элементы, из которых собирается
интерфейс.


ВСЕМ-ВСЕМ

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

Смотреть


ДИЗАЙНЕРАМ

Правила использования и библиотека компонентов в Figma Community.

Смотреть


РАЗРАБОТЧИКАМ

Библиотека основных компонентов в виде NPM-пакета.

v3.15.1
Смотреть


БИБЛИОТЕКА

Разные виды диаграмм — линейные, столбчатые, круговые. Всё, чтобы красиво
показывать и сравнивать данные.


ВСЕМ-ВСЕМ

Витрина диаграмм с подробной документацией и правилами использования.

Смотреть


ДИЗАЙНЕРАМ

Диаграммы в Figma Community: библиотека и правила использования.

Смотреть


РАЗРАБОТЧИКАМ

Библиотека диаграмм в виде NPM-пакета.

v0.5.0
Смотреть

Дизайн-систему можно использовать бесплатно, она распространяется ПАО «Газпром
нефть» на условиях открытой лицензии MIT.


ЗАЧЕМ ВАМ ДИЗАЙН‑СИСТЕМА?

Запускать продукты быстрее и дешевле. Часть работы по созданию интерфейса уже
сделана — в рамках нашей дизайн‑системы.

Просто проверять гипотезы. Вы сможете собрать прототип интерфейса, показать
пользователям и проверить, что в интерфейсе всё понятно — до начала разработки.

Только лучшие практики. Мы проверяем работу компонентов в реальных продуктах
нашей компании и выбираем наилучшие варианты. Постоянно добавляем в библиотеку
новые компоненты и улучшаем то, что есть.

Довольные пользователи. Проще осваивать новое, когда продукты компании выглядят
похоже и построены по сходным принципам. А вам — меньше доработок и затрат
на поддержку продукта.


ГИБКАЯ ТЕМАТИЗАЦИЯ

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

Статус


ЗАГОЛОВОК

Эта карточка — просто абстрактный пример интерфейса

Выбери меняНет, меня
м
кг
Нажми на кнопку

Пресеты

Газпром нефтьВа-банкАлюмикель


Цветовая тема



Шрифт

ПромоСистемный

Размер текста

КрупныйСредний

Пространство

ПросторнееТеснее


ИСПОЛЬЗУЙТЕ ГОТОВЫЕ КОМПОНЕНТЫ

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

СкачатьРедактировать
ЛюдиАктивыЭкология
Читать далееЗапустить расчётПродолжить
Выберите город
КомментарииСкачатьРедактировать
ЛюдиАктивыЭкология
Читать далееЗапустить расчётПродолжить
Выберите город
КомментарииСкачатьРедактировать
ЛюдиАктивыЭкология
Читать далееЗапустить расчётПродолжить
Выберите город
Комментарии
Выпустить кракена

СУ
+23%
-15%
Задержка
Принять изменения
ЭК
Эдуард Когнитивченко
Геоинженер
Выберите напиток
АлюминийЖелезоМедь
об/мин
ПроверитьВыпустить кракена

СУ
+23%
-15%
Задержка
Принять изменения
ЭК
Эдуард Когнитивченко
Геоинженер
Выберите напиток
АлюминийЖелезоМедь
об/мин
ПроверитьВыпустить кракена

СУ
+23%
-15%
Задержка
Принять изменения
ЭК
Эдуард Когнитивченко
Геоинженер
Выберите напиток
АлюминийЖелезоМедь
об/мин
Проверить
Выберите город
СегодняВчераНеделяМесяц
НефтьГаз


ВойтиПолучать уведомленияВыбрать
Выберите город
СегодняВчераНеделяМесяц
НефтьГаз


ВойтиПолучать уведомленияВыбрать
Выберите город
СегодняВчераНеделяМесяц
НефтьГаз


ВойтиПолучать уведомленияВыбрать
Выберите город
Показывать статистику
СП
Серж Послоян
Старший эксперт
NetbackCAPEXOPEX
В проектВ группу
Согласовано
ОК

Оценить
Выберите город
Показывать статистику
СП
Серж Послоян
Старший эксперт
NetbackCAPEXOPEX
В проектВ группу
Согласовано
ОК

Оценить
Выберите город
Показывать статистику
СП
Серж Послоян
Старший эксперт
NetbackCAPEXOPEX
В проектВ группу
Согласовано
ОК

Оценить
XSSMLXL



ГС
Ошибка
Отказать

ед.
₽
Сделайте выбор
КЦДОПОПоиск
ЛюдиАктивыЭкология
XSSMLXL



ГС
Ошибка
Отказать

ед.
₽
Сделайте выбор
КЦДОПОПоиск
ЛюдиАктивыЭкология
XSSMLXL



ГС
Ошибка
Отказать

ед.
₽
Сделайте выбор
КЦДОПОПоиск
ЛюдиАктивыЭкология


ПРОЕКТЫ

Больше 120 проектов компании создаётся с помощью Consta. С каждым днём их
становится всё больше. Хотите посмотреть?

Посмотреть проекты

Только для сотрудников «Газпром нефти»


ЧАСТЫЕ ВОПРОСЫ И РЕШЕНИЯ

Для каких задач подходит дизайн-система?

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

Это может быть интранет, личный кабинет, инструмент для мониторинга какой-либо
системы, управления оборудованием, совместной работы или что-то ещё.

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

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

Какие технологии использует дизайн-система?

Для разработки

React — JavaScript-библиотека для создания пользовательских интерфейсов

TypeScript — язык программирования для разработки веб-приложений, расширяющий
возможности JavaScript

PostCSS — автоматизирует рутинные операции в CSS с помощью расширений,
написанных на JavaScript

Для дизайна

Figma — инструмент для разработки интерфейсов и прототипирования

Это только для новых продуктов?

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

Можем ли мы использовать Consta, если у нас готовый продукт «из коробки»?

Это зависит от вашего проекта и от решения, которое вы используете. Есть два
варианта: создать свой веб-интерфейс для коробочного продукта или настроить то,
как он выглядит

Создать свой веб-интерфейс

Для некоторых готовых решений можно создать свой веб-интерфейс на дизайн-системе
Consta (например, у 1С, Bitrix и QlikSense есть API, который это позволяет). Это
большая задача, её стоит планировать, если у сервиса много пользователей, вам
очень важно качество пользовательского опыта и удобный интерфейс. Например, если
это дашборд или личный кабинет сотрудника в большой компании.

Настроить внешний вид

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

Как использовать дизайн-систему?

Это зависит от ваших задач и технологий. Есть несколько вариантов.

Посмотреть и сделать так же

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

Использовать все возможности

Если вы запускаете веб-проект и готовы вести разработку на React, разработчики
могут подключить нашу библиотеку с элементами интерфейса. Если нет, дизайнеры
могут собрать макет интерфейса на основе шаблонов в Figma.

Дополнять и дорабатывать

Всё в открытом доступе. Вы можете посмотреть исходный код нашей библиотеки на
GitHub и предложить изменения.

А если мы работаем с подрядчиками?

Отлично, отправьте им ссылку на описание дизайн-системы. Все ресурсы публичные,
можно использовать и «внутри» компании, и «снаружи».

На каких условиях можно использовать дизайн-систему?

Дизайн-система распространяется ПАО «Газпром нефть» бесплатно, на условиях
открытой лицензии MIT. Это значит, что вы можете свободно использовать код и
отдельные элементы дизайн-системы, если сохраните копирайт Gazprom Neft PJSC.

Посмотреть все условия
Как принять участие в разработке?

Очень просто: дизайн-система в публичном репозитории на GitHub, вы можете
прислать заявку на изменения или даже сделать доработку.

Как это сделать
В какой момент её лучше подключать?

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

Как проходит разработка интерфейса с дизайн-системой?

Это зависит от вашего процесса разработки. Вот один из вариантов:

 1. Менеджер или заказчик ставит задачу на создание продукта
 2. Дизайнеры создают макет — из компонентов дизайн-системы, на основе наших
    шаблонов в Figma.
 3. Разработчики собирают интерфейс на основе макета — берут компоненты из npm
    пакета @consta/uikit, встраивают в свой проект, оживляют с помощью скриптов
    и подключают к бэкенду (например, к базе данных).
 4. Тестировщики проверяют, что всё работает (поведение кнопок, списков и других
    элементов из дизайн-системы проверять не нужно).

Готово, можно показывать продукт пользователям.

Кто её разрабатывает и поддерживает?

Центр дизайна и развития продуктов «Газпром нефти». Мы создаём дизайн-систему
внутри компании, поэтому можем общаться с менеджерами продуктов и
разработчиками, получать фидбек о работе системы в реальных условиях и
дорабатывать по результатам.

Если есть вопросы, пишите нам: design@gazprom-neft.ru

Где найти специалистов для работы над проектом?

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


БЕРИТЕ И ПОЛЬЗУЙТЕСЬ

Витрина компонентов и документация

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

Consta KitConsta Charts
Библиотека в Figma

Набор компонентов для создания макетов проекта в Figma Community. Отправьте эту
ссылку дизайнеру — он разберётся.

Consta KitConsta Charts
React-библиотека

NPM-пакет с библиотекой на React, TypeScript и PostCSS. Отправьте эту ссылку
фронтенд разработчику — он знает, что с ней делать.

Consta KitConsta Charts

Следите за обновлениями в Телеграм-канале.


ОСТАЛИСЬ ВОПРОСЫ?

Пишите нам по электронной почте design@gazprom-neft.ru.

Репозиторий этой страницы

© 2020-2021 ПАО «Газпром нефть»