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

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

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

Эти термины часто путают, хотя это разные уровни организации.

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

Дизайн-система — более широкое понятие. Помимо самих элементов она включает принципы (когда и зачем использовать тот или иной компонент), правила сочетания, базовые параметры (цвета, шрифты, отступы), требования к текстам и иногда готовый код. Она отвечает на вопросы «как мы принимаем решения» и «как сделать так, чтобы новая страница выглядела, как будто она всегда была частью сайта».

Для небольшого проекта разумно начинать с UI-kit и постепенно дополнять его правилами. Получается лёгкая дизайн-система без громоздкой документации.

Зачем небольшому проекту единые правила

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

Страницы «разъезжаются» со временем

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

Работа ускоряется

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

Меньше зависимости от конкретного человека

Если все решения живут в голове одного дизайнера, уход этого человека оставляет проект без «памяти». Документированный набор позволяет новому специалисту быстро войти в курс дела и продолжить работу в той же стилистике.

Согласованность между каналами

Те же цвета, шрифты и стиль кнопок удобно использовать в рассылках, презентациях, рекламных баннерах и социальных сетях. Фирменный стиль перестаёт быть «картинкой в логотипе» и становится набором правил, которые можно применять везде.

Из чего состоит компактный набор

Для небольшого проекта не нужно описывать сотни компонентов. Достаточно покрыть то, что реально встречается на сайте. Начните с основ, а затем переходите к более сложным элементам.

Цвета: меньше значит лучше

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

Типографика: шкала вместо случайных размеров

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

Компоненты и их состояния

Недостаточно нарисовать кнопку в одном виде. Нужно показать, как она ведёт себя при наведении курсора, при фокусе с клавиатуры, при нажатии, в неактивном состоянии и в состоянии загрузки. Тот же принцип относится к полям ввода, карточкам, меню. Именно состояния чаще всего забывают, и разработчику приходится придумывать их самостоятельно.

Как собрать UI-kit: пошаговый подход

Не нужно ждать идеального момента и откладывать всё до «большого рефакторинга». Набор удобно создавать вместе с новым дизайном или при редизайне, когда элементы всё равно рисуются.

Единые названия и «токены»

Один из самых практичных приёмов — давать значениям понятные имена и использовать их и в макете, и в коде. Вместо «красный, чуть темнее» — «акцент основной» и «акцент при наведении». Вместо «отступ 24» — «отступ средний». Такие именованные параметры называют токенами дизайна.

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

Как называть, чтобы не запутаться

• Называйте по роли, а не по внешнему виду: «текст основной», а не «тёмно-серый», потому что серый завтра может стать синим.
• Используйте один язык и один стиль названий во всём проекте.
• Не создавайте токены «про запас»: каждое значение должно использоваться хотя бы в одном месте.
• Группируйте по смыслу: цвета, отступы, радиусы скруглений, тени, размеры текста.

Где хранить и как поддерживать

Набор, о котором забыли, быстро устаревает. Чтобы он оставался рабочим, нужны три вещи: понятное место хранения, ответственный и привычка обновлять.

Место хранения

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

Ответственный и процесс изменений

Назначьте человека, который отвечает за актуальность набора. Не обязательно выделять его на полный день — достаточно, чтобы любое изменение компонента проходило через него. Простое правило: нужен новый элемент — сначала проверяем, нельзя ли обойтись существующим; если нельзя, добавляем в набор, а не рисуем «разово» на странице.

Версии и история

Записывайте, что и когда было изменено, хотя бы в виде короткого списка. Это помогает понять, почему сайт выглядит именно так, и откатить неудачное решение.

Частые ошибки

Слишком сложно с первого дня

Попытка описать каждую мелочь и предусмотреть все случаи приводит к тому, что набор не доделывается. Лучше начать с десяти самых востребованных компонентов и пополнять по мере необходимости.

Набор «для галочки»

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

Отрыв от кода

Макет описывает одно, а на сайте реализовано другое. Чтобы этого избежать, названия и значения должны совпадать, а при изменениях в одном месте нужно обновлять второе. Периодически стоит сверять реальный сайт с набором и устранять расхождения.

Игнорирование мобильных устройств

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

Чек-лист для проверки готовности

• Определены основной и акцентный цвета, нейтральная палитра и цвета состояний.
• Заданы шрифты и шкала размеров текста для всех уровней заголовков и основного текста.
• Описана сетка и единая шкала отступов.
• Для кнопок, полей и ссылок нарисованы все состояния, включая фокус с клавиатуры и неактивный вид.
• Типовые блоки собраны в компоненты и подписаны понятными названиями.
• Есть адаптивные варианты для планшета и смартфона.
• Значения названы так, что одинаково понятны дизайнеру и разработчику.
• Назначен ответственный за поддержание набора в актуальном виде.

Итог

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