Разработка дизайн-системы и UI-kit

Собираем дизайн-систему: цвета, типографику, сетку, компоненты со всеми состояниями и правила их использования. Новые страницы и экраны собираются из готовых деталей, а сайт и личный кабинет выглядят как один продукт.

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

Она нужна компаниям с несколькими цифровыми продуктами, командам с несколькими дизайнерами и проектам, где каждый месяц появляются новые страницы, роли и функции.

UI-kit и дизайн-система: в чём разница

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

Палитра, компоненты, состояния и документация

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

Работа идёт так: интервью с командой и сбор текущих интерфейсов, инвентаризация элементов и поиск дублей, базовые решения, компоненты с проверкой на реальных экранах, документация и переменные для вёрстки, пробная сборка новых экранов из системы. На выходе библиотека компонентов в редакторе макетов вашей команды, переменные цветов, шрифтов и отступов для разработчиков, несколько экранов продукта как образец и исходные файлы с правами на них.

Техснабэкспорт, Медюнион, Лемма: три масштаба

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

У медцентра «Медюнион» больше 1 000 страниц, и чтобы они выглядели одинаково, собрали UI-кит с полями ввода и поиска, кнопками, палитрой, переключателями, карточками врачей и акций, у каждого элемента версия для десктопа и для мобильного. Для интегратора «Лемма» хватило руководства по стилю: тёмно-синяя палитра, розовый для кнопок отправки форм, шрифт Graphik LC TT и правило без скруглённых углов, по которому нарисованы и иконки.

Ещё раньше были кабинет Jet на три роли с адаптивной версией и портал «Спецресурс», где показали варианты оформления от светлого до тёмного и проработали таблицы с большим объёмом данных.

Разработка дизайн-системы стоит от 168 000 ₽ и занимает 1,5–3 месяца. Цена зависит от числа продуктов и платформ, количества компонентов и ролей, тёмной темы, мобильного приложения и подробности документации. Перевёрстка готового сайта под новую систему и библиотека компонентов в коде оцениваются отдельно, поддержка после сдачи идёт по ставке 4 200 ₽ в час. Удобство компонентов на людях проверяет юзабилити-тестирование, на основе системы собираем личные кабинеты и веб-приложения. Остальные дизайн-услуги собраны в разделе дизайна сайтов.