Редизайн макетов
и сборка UI-kit для «РЖД» АСУ-БИМ
РЕДИЗАЙН
UI-kit
Задача
На основе существующих макетов собрать UI-kit и внести правки в дизайн. Заказчик предоставил разнообразные варианты макетов, благодаря этому мы собрали достаточно полный кит с большим количеством компонентов и свойств.
Цвет
Цветовую композицию предоставил заказчик. Проект выполнен в светло и темно серых тонах с акцентным красным и графитовым цветами.
  • #1F1F24
  • #333337
  • #797979
  • #ECECEC
  • #CE242A
  • #B01C21
  • #B8C1CC
  • #F1F3FA
В процессе разработки крупной системы были добавлены дополнительный цвета, например, для отображения состояний тех или иных элементов, тегов в канбан системе и т.п.
Шрифт
В качестве основной типографики для заголовков использовали RussianRail G Pro, фирменный шрифт компании.
Для остальных элементов - IBM Plex Sans.
Панграмма
Панграмма
Компоненты
В качестве основных компонентов выделяли те элементы, которые наиболее часто повторяются в дизайне системы, например: сайдбары, модальные окна, чекбоксы, свитчи, карточки пользователе и т.п.
Редизайн
В процессе работы сделали акцент на простоту и удобство для пользователя.
В исходных макетах интерфейс системы выглядел перегруженным, за счет активного использования ярких/акцентных цветов на каждом активном системы. Привели в порядок иерархию в макетах, дали больше воздуха компонентам, за счет чего улучшили «юзер-врендли» составляющую, где пользователю не придется концентрироваться для поиска кнопки сортировки или смены режима отображения контента.
Before
After
Реорганизовали внутреннюю страницу задачи тасктрекера.
Контент из правого сайдбара расположили в первом блоке страницы, который отвечает на такие вопросы, как: "Кто поставил задачу? Когда дедлайн? К какому проекту прикреплена задача?" и так далее.

Добавили фиксированные цвета для тегов задач. Предполагалось, что пользователь может создавать цвета с помощью цветового круга, что скажется в будущем на системе - большое количество тегов с однородными цветовыми решениями.
Before
After
Макеты
Часть страниц с использованием компонентов дизайн системы для демонстрации.
Спасибо за внимание
Как с нами связаться
  • ОГРН: 1197847164910
  • ИНН: 7805754684
  • Юридический адрес:
  • Санкт-Петербург, ул. Марата д. 1/71, лит. А. БЦ Невский Атриум, 5 этаж