UI-kit — это набор всех элементов, на которых строится UI вашего сайта (UI elements). По сути, это визуализация каждого из элементов на любом этапе соприкосновения пользователя с интерфейсом.

• Унификация. UI Kit помогает создать интерфейс в едином стиле, что делает все элементы визуально согласованными.

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

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

• Согласованность. В дизайн-системе UI Kit играет ключевую роль, обеспечивая общую экосистему для проекта. Это позволяет всей команде работать синхронно, используя готовые элементы.

• Ускорение и упрощение работы. При необходимости компонент можно быстро взять из UI Kit, не создавая его с нуля и не копируя из других частей макета.

• Облегчение командной работы. UI Kit особенно полезен при работе над проектом несколькими дизайнерами или разработчиками, позволяя любому участнику легко найти и использовать нужный элемент без необходимости создания его заново.

Основа

• Цвета

• Типографика (для всех разрешений).

• Сетки (для всех разрешений).

• Система отступов

Атомы

• Иконки

• Кнопки (со всеми состояниями: default, active, hover, disabled).

• Теги

• Тултипы (с состояниями default, active, hover).

• Дропдауны (со всеми состояниями: default, active, hover, disabled).

• Инпуты (со всеми состояниями: default, active, hover, disabled).

• Поиск (со всеми состояниями: default, active, hover, disabled).

Молекулы (различные составные блоки из атомов)

• Баннеры

• Слайдеры

• Аккордеоны

• Фильтры (со всеми состояниями: default, active, hover, disabled)

• Табы (с состояниями default, active, hover)

Огранизмы

• Хедер (с состояниями ссылок: default, active, hover)

• Футер (с состояниями ссылок: default, active, hover)

• Меню (с состояниями hover на пункты)

• Модалки

• Используем компоненты и автолейауты. Все элементы собираем на основе компонентов и автолейаутов, чтобы обеспечить гибкость и единообразие.

• Структурируем по секциям. Элементы группируем и размещаем в соответствующих секциях для удобства навигации и работы.

• Создаем библиотеку при необходимости. Если проект большой и не помещается в один файл, выносим UI Kit в отдельный файл и превращаем его в библиотеку. Из этой библиотеки можно будет подтягивать компоненты в другие файлы.

• Учитываем состояния компонентов. Не забываем про разные состояния компонентов (активные, неактивные и т. д.) и отображаем их.

• Показываем компоненты для всех разрешений. Отрисовываем компоненты для разных разрешений экрана. Если нужно показать промежуточные состояния, создаем отдельный фрейм с ними и добавляем комментарии для разработчика.