Публикация системы IA List и UI Guide
После присоединения к NexTree и участия в корпоративном проекте, принимая задачи по верстке, первой мыслью было: «Компонентов уже создано много — почему же команда разработки не может эффективно их использовать?» Имея опыт работы над различными проектами в агентстве, я хорошо понимал важность интуитивного управления UI-ресурсами, поэтому существующая рабочая среда показалась мне недостаточно удобной.
Хотя в проекте существовал репозиторий, для просмотра реализованных экранов необходимо было вручную переходить по отдельным URL-адресам страниц. Более серьёзной проблемой было отсутствие страницы-гайда, где можно было бы просматривать общие компоненты (например, SCSS). В результате даже мне, принимающему проект, приходилось заново разбираться в коде. Разработчики, несмотря на наличие готовых компонентов, часто спрашивали у верстальщиков названия классов или способы их использования, либо создавали дублирующий код — что приводило к неэффективному расходованию ресурсов.
Я пришёл к выводу, что это не просто неудобство, а фактор, снижающий общую продуктивность проекта.
Чтобы сократить затраты на коммуникацию и создать среду, в которой команда разработки сможет самостоятельно собирать UI, я реализовал два ключевых решения.
1. Создание страницы IA (Information Architecture) List для повышения прозрачности работы
Сначала я сформировал список на основе структуры меню первого и второго уровней и связал его с реальными страницами. С помощью верхних вкладок были разделены категории (общие, морские, наземные и т.д.), чтобы разработчики могли легко находить нужные экраны.
Наиболее эффективным решением стало добавление колонки статуса верстки (завершено / в процессе). Это обеспечило прозрачность прогресса и значительно сократило лишние коммуникации, такие как: «Верстка этой страницы уже завершена?»
Кроме того, до начала разработки появилась возможность проводить предварительный просмотр экранов вместе с бизнес-командой через IA список, что позволило разработчикам чётко понимать требования и сосредоточиться исключительно на реализации.
2. Проектирование SCSS-архитектуры на основе Design Token и создание Style Guide
Далее я визуализировал дизайн-токены, реализованные с использованием SCSS map и @each, и построил интуитивную систему стайлгайда.
Ранее такие утилиты, как цвета ($colors) и размеры шрифтов ($fontSize), существовали только на уровне кода, из-за чего разработчикам было сложно быстро их применять. Для решения этой проблемы я визуализировал автоматически генерируемые классы на отдельной странице дизайн-гайда.
Помимо дизайн-токенов, в гайд были включены ключевые UI-компоненты: кнопки, элементы форм (Input, Select, DatePicker), чекбоксы и радиокнопки. Все они были представлены в различных состояниях (Default, Hover, Disabled, Error) с чётко описанными классами и структурой разметки.
В результате разработчики смогли реализовывать UI без необходимости разбираться в сложных CSS-файлах, используя визуальный гайд.
Итоги внедрения IA List и Style Guide
Эффект от внедрения IA List и Style Guide не ограничился только улучшением взаимодействия с разработчиками. Данная система была признана эффективной и впоследствии внедрена во всех крупных проектах компании.
Кроме того, гайд активно использовался в процессе передачи задач между верстальщиками, что позволило существенно сократить время адаптации новых участников.
Заключение
Этот опыт показал, что роль верстальщика заключается не только в создании интерфейсов, но и в построении удобной и стандартизированной UI-экосистемы.
В дальнейшем я планирую продолжать систематизировать разрозненные ресурсы, чтобы личный рост напрямую влиял на эффективность проектов и всей организации.
URL гайда
https://edgewise-dev.vizend.io/publishing/publishing-guide
sangsooni