Задача
На основе существующих макетов собрать UI-kit и внести правки в дизайн. Заказчик предоставил разнообразные варианты макетов, благодаря этому мы собрали достаточно полный кит с большим количеством компонентов и свойств.
Цвет
Цветовую композицию предоставил заказчик. Проект выполнен в светло и темно серых тонах с акцентным красным и графитовым цветами.
#1F1F24
#333337
#797979
#ECECEC
#CE242A
#B01C21
#B8C1CC
#F1F3FA
В процессе разработки крупной системы были добавлены дополнительный цвета, например, для отображения состояний тех или иных элементов, тегов в канбан системе и т.п.
Шрифт
В качестве основной типографики для заголовков использовали RussianRail G Pro, фирменный шрифт компании.
Для остальных элементов - IBM Plex Sans.
Для остальных элементов - IBM Plex Sans.
Панграмма
Панграмма
Компоненты
В качестве основных компонентов выделяли те элементы, которые наиболее часто повторяются в дизайне системы, например: сайдбары, модальные окна, чекбоксы, свитчи, карточки пользователей и т.п.
Редизайн
В процессе работы сделали акцент на простоту и удобство для пользователя.
В исходных макетах интерфейс системы выглядел перегруженным, за счет активного использования ярких/акцентных цветов на каждом активном системы. Привели в порядок иерархию в макетах, дали больше воздуха компонентам, за счет чего улучшили «юзер-врендли» составляющую, где пользователю не придется концентрироваться для поиска кнопки сортировки или смены режима отображения контента.
Before
After
Макеты
Часть страниц с использованием компонентов дизайн системы для демонстрации.
Спасибо за внимание
Свяжитесь с нами!
Санкт-Петербург, ул. Львовская 27, стр. 1, офис 1401
Свяжитесь по номеру
+7 (812) 604-50-20
+7 (812) 604-50-20
Напишите на почту
hello@bero.pro
hello@bero.pro