Редизайн макетов и сборка UI-kit для «РЖД» АСУ-БИМ

РЕДИЗАЙН

UI-kit

Задача

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

Цвет

Цветовую композицию предоставил заказчик. Проект выполнен в светло и темно серых тонах с акцентным красным и графитовым цветами.

#1F1F24

#333337

#797979

#ECECEC

#CE242A

#B01C21

#B8C1CC

#F1F3FA

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

Шрифт

В качестве основной типографики для заголовков использовали RussianRail G Pro, фирменный шрифт компании.
Для остальных элементов - IBM Plex Sans.

Панграмма

Компоненты

В качестве основных компонентов выделяли те элементы, которые наиболее часто повторяются в дизайне системы, например: сайдбары, модальные окна, чекбоксы, свитчи, карточки пользователей и т.п.

Редизайн

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

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

Before

After