Дизайн-система (design system) — единая база знаний о дизайне какой-либо IT-системы (платформы, веб-сайта, приложения и т. п.), соединяющая UX/UI-дизайнеров (которые её формируют и в ней работают) и разработчиков (которые по ней ориентируются в своей работе). Призвана систематизировать, стандартизировать и автоматизировать разработку интерфейса, ускоряя и облегчая тем самым этот процесс и стабилизируя качество продукта.
Содержит:
- все элементы визуального языка, применяемого в интерфейсе системы, начиная от мельчайших «атомов» (кнопки, строки поиска, пиктограммы и т. п.) и заканчивая группами шаблонов и общим фирменным стилем;
- правила поведения этих артефактов и взаимодействия с ними;
- принципы работы с дизайном, текстом, архитектурой интерфейсов и с самой дизайн-системой;
- описание общего семантического поля.
Сочетает в себе содержимое более упрощённых баз знаний UX/UI-проектирования:
- UI kit — визуальные элементы интерфейса;
- фреймворк — если элементы хранятся в виде кода, позволяя разработчикам пользоваться библиотекой готовых компонентов;
- гайдлайн — правила и рекомендации по работе с элементами, шаблонами и макетами (работа с сеткой, цветами, иконками, как и когда заданные параметры можно модифицировать).
Готовые элементы интерфейса чаще всего хранятся в виде кода (что усиливает эффект автоматизации).
По сути, дизайн-система для проектировщиков интерфейса — это энциклопедия, а для остальных разработчиков— инструкция. Чем масштабнее проектируемая система или многочисленнее команда разработчиков, тем острее стоит потребность в наличии дизайн-системы. Дизайн-система чаще всего создаётся в единственном варианте для всей компании, чтобы унифицировать производство всех цифровых продуктов организации.
