Дизайн‑система — это интегрированное решение, объединяющее в себе фирменный стиль, интерфейсный дизайн, проектирование взаимодействия и фронтенд‑разработку.
Практически любая дизайн‑система начинается с UI‑кита, который содержит описание цветовых и шрифтовых решений, типографику, модульную сетку, используемые интервалы, а также визуалиацию основных элементов интерфейса — кнопки, поля ввода, подсказки, предупреждения, хлебные крошки и так далее. Для проекта можно использовать как сторонние готовые UI‑киты, так и разработать собственный UI‑кит, который будет гораздо лучше соответствовать фирменному стилю компании или продукта.
Гайдлайны — это правила и рекомендации, следование которым позволяет дизайнерам и разработчикам создавать новые компоненты системы, которые будут органически вписываться в существующую концепцию. Обычно гайдлайны ориентированы не столько на визуализацию, сколько на пользовательский опыт.
UI-кит — это лишь графическая визуализация компонентов интерфейса. Если разработанный UI‑кит дополнить реализациями элементов на HTML, CSS и JS, то получится фронтенд‑фреймворк. Наличие такого фреймворка сильно ускоряет техническую разработку интерфейсов и их дальнейшее сопровождение.
04
Библиотека компонентов
+
UI-кит со временем может быть расширен библиотекой компонентов. Из отдельных элементов UI‑кита создаются более сложные и комплексные интерфейсные решения — лэйауты для специализированных страниц, различные варианты карточек товаров в интернет‑магазинах, формы работы с документами в корпоративных информационных системах и так далее. Эти компоненты также могут быть реализованы на уровне фронтенд‑фреймворка, это значительно упрощает их повторное использование.
Если объедить UI‑кит с UX‑гайдлайном, собрать на их основе собственный фронтенд‑фреймворк и на его основе разработать повторно используемые компоненты, то получится полноценная дизайн‑система. Использование дизайн‑системы для построения пользовательских интерфейсов гарантирует единообразие интерфейсных решений, снижает количество ошибок на всех этапах работы, а также упрощает поддержку существующих и разработку новых интерфейсов.