Как проработка UI-kit для интернет-магазина помогла сэкономить деньги клиента

Что такое UI-kit?

Если говорить простым языком, UI-kit — это набор элементов, из которых строится интерфейс сайта. В него входят не только визуальные компоненты, но и техническая информация: стили шрифтов, цветовые коды, размеры отступов, настройки модульной сетки.

Важно не путать UI-kit и дизайн-систему. Дизайн-система является более широким понятием, поскольку в неё входят правила использования элементов интерфейса, стиль общения между интерфейсом и пользователем (tone of voice), редакционная политика и так далее. UI-kit — часть дизайн-системы, которая определяет внешний вид компонентов интерфейса.

Зачем и всегда ли нужен UI-kit?

Чтобы ответить на вопрос, рассмотрим какие преимущества даёт использование UI-kit с трёх сторон.

• Для дизайнера

  Дизайнеру UI-kit позволяет систематизировать компоненты и упростить их дальнейшее переиспользование. Это экономит время, которое тратится на дизайн. Если в проект придет новый дизайнер, то он легко разберётся с хорошо оформленным UI-kit и сможет пользоваться им для создания новых макетов. Переиспользование компонентов обеспечивает согласованность страниц, а значит улучшает юзабилити-составляющую проекта.

• Для фронтенд-разработчика

  Имея на руках систематизированный UI-kit, фронтендер получает возможность на старте сверстать компоненты и переиспользовать их при вёрстке проекта. Использование UI-kit упрощает взаимодействие между дизайнером и фронтендером. Если в UI-kit отражены все виды элементов интерфейса и их состояния, то верстальщику не придется задавать дизайнеру лишние вопросы. В больших проектах UI-kit становится дизайн-библиотекой, которая помогает дизайнерам и фронтендерам не выходить за рамки унифицированного набора компонентов. На этапе фронтенда UI-kit также экономит значительное количество человеко-часов.

• Для заказчика

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

Как мы создаём UI-kit

В конце 2022 года наша команда сделала редизайн интернет-магазина «Балтоптторг». Компания базируется в Санкт-Петербурге и занимается продажей ручного и электрического инструмента по всей России. Основной процент клиентов магазина составляют постоянные клиенты имеющие собственный бизнес: строительные компании, прорабы-частники, небольшие магазины стройтоваров.

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

Нулевой этап, подготовительный

Бросаться делать UI-kit с самого начала проекта нет смысла, поскольку визуальные элементы многократно меняются при разработке концепции, а потом при согласовании первых макетов с клиентом. На нулевом этапе мы познакомились с проектом: провели UX/UI-аудит, изучили метрики, проанализировали конкурентов. Дальше перешли к созданию прототипа и собрали мудборд.

В мудборде могут быть отражены будущие компоненты UI-kit: шрифты, цветовые палитры. Но собирать элементы вместе и пытаться систематизировать пока что рано, ведь наша цель сэкономить время и средства клиента. Материалы в мудборде — это референсы, которые впоследствии трансформируются в стили проекта.

Первый этап, первые компоненты

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

При работе над редизайном интернет-магазина «Балтоптторг» мы приступили к созданию UI-kit сразу после согласования главной страницы. Так в UI-kit попали:

• настройки модульной сетки

• акцентные и второстепенные цвета

• стили заголовков и основного текста

• иконки

• разные виды кнопок и ссылок

• пункты бокового меню

• карточки категорий, товаров и новостей

На первом этапе не стоит переживать о том, что впоследствии элементы дизайна будут меняться. До того, как дизайнер передаёт UI-kit фронтендеру, он может вносить туда любые изменения. После передачи на вёрстку, изменения нужно согласовывать с фронтендером. В противном случае UI-kit дизайнера и разработчика рассинхронизируется, следовательно появятся различия в макетах и вёрстке.

Второй этап, заполнение UI-kit

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

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

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

Третий этап, «причесывание» UI-kit

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

Над редизайном «Балтоптторга» работали два дизайнера нашей студии. Ui-kit постоянно был в использовании, поэтому 90% недочётов устранялись по ходу проекта. После быстрого «причесывания» UI-kit стал готов к передаче в разработку.

Чётвертый этап, передача фронтендеру

Когда UI-kit завершен и компоненты отполированы, он становится готов к передаче верстальщику. Перед началом работы, фронтенд-разработчик знакомится не только с макетами, но и с UI-kit. Хорошей практикой является прояснение всех непонятных моментов с дизайнером до начала вёрстки.

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

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

Вывод

Благодаря правильно выстроенной работе с UI-kit, нашей команде удалось оптимизировать разработку масштабного e-commerce проекта. Работы по дизайну заняли на 36 часов меньше, чем было согласовано с клиентом на этапе составления сметы. Этап фронтенда также занял меньше времени, чем планировалось. Сэкономленные 20 часов пошли на вёрстку дополнительных пожеланий заказчика.

Каждый час работы — это деньги клиента. Нам удалось снизить расходы заказчика и презентовать сайт с новым дизайном до установленного дедлайна. Клиент получил не только готовый проект, но и систематизированный UI-kit в двух видах: набор задизайненных компонентов в Figma и набор аналогичных компонентов в виде кода. Поддерживать и развивать сайт будет удобно, главное актуализировать UI-kit при внесении изменений и поддерживать его в порядке.