Что такое дизайн-система и когда она окупается
Пять слоёв дизайн-системы, что у неё внутри, одно решение, которое меняет всё сразу, когда она окупается, сайт с системой и без неё и готовые системы — с живыми примерами.
Коротко
Дизайн-система — общий язык продукта: принципы, токены, компоненты и шаблоны с правилами применения, которые живут и в макете, и в коде. Вместо того чтобы проектировать каждую страницу с нуля, команда собирает её из проверенных частей — кнопки, поля, карточки, — чей вид и поведение уже согласованы. Система окупается, когда страниц и экранов много, над продуктом работают несколько человек, он развивается годами или несколько продуктов должны выглядеть как один бренд. Для одного лендинга полная система избыточна — хватает короткого набора токенов.
Из чего состоит дизайн-система: пять слоёв
Каждый слой опирается на нижний. Продукты собираются из шаблонов, шаблоны — из компонентов, компоненты — из токенов, токены следуют из принципов.
- Продуктысайт, приложение, рассылки, презентации
- Шаблоныстраница товара, оформление заказа, личный кабинет
- Компонентыкнопки, поля, карточки, навигация, таблицы
- Токеныцвета, шрифты, отступы, радиусы, движение
- Принципыдля кого мы, каким голосом говорим, что важнее
Многие команды начинают с середины — рисуют набор кнопок — и удивляются, почему система не держится. Без принципов нечем решать споры, а без токенов компоненты не могут меняться вместе.
Что внутри и зачем
Шесть частей работающей системы. Система без документации и владельца превращается в папку с картинками.
| Часть | Что содержит | Что даёт |
|---|---|---|
| Принципы | аудитория, тон, приоритеты | способ решать споры |
| Токены | цвета, шрифты, отступы, радиусы, движение | один источник значений |
| Компоненты | кнопки, поля, карточки со всеми состояниями | одинаковое поведение везде |
| Шаблоны | типовые страницы и экраны | новые страницы за часы, а не недели |
| Документация | когда что применять, примеры, код | новые люди работают без вопросов |
| Владелец и процесс | кто и как меняет систему | система остаётся живой |
Одно решение — сразу везде
Смените акцент: метка, прогресс, кнопка, график, ссылка и письмо меняются вместе, потому что все они ссылаются на один токен.
Кухня, Петровых
Готово на 68% · сборка 14 октября
Открыть проектВаш проект готов
Посмотрите визуализацию и подтвердите размеры.
ПосмотретьБез системы та же правка — поиск по всем файлам и экранам, и что-то всегда пропускают. С системой это одно значение — и проверка, что ничего не стало нечитаемым.
Когда дизайн-система окупается
Восемь типичных ситуаций с честным вердиктом.
-
Один лендинг под акцию
Не нужнаХватает нескольких CSS-переменных.
-
Корпоративный сайт на 10–20 страниц
Токены и немного компонентовТокены, шкала шрифтов и основные компоненты.
-
Интернет-магазин
Токены и немного компонентовКарточки, фильтры, формы и оформление заказа повторяются на сотнях страниц.
-
SaaS-продукт
Полная системаДесятки экранов и команда, которая добавляет новые каждую неделю.
-
Несколько продуктов одной компании
Полная системаОдин бренд должен ощущаться одинаково во всех.
-
Сайт, кабинет и мобильное приложение
Полная системаТокены связывают веб, iOS и Android.
-
Прототип для проверки идеи
Не нужнаВажнее скорость; подойдёт готовая библиотека.
-
Редизайн большого сайта
Полная системаЛучший момент навести порядок, а не повторить хаос.
Один сайт без системы и с системой
Шесть кнопок с разных страниц. Слева каждую рисовали отдельно, справа это один компонент в трёх вариантах.
Готовая система или своя
На открытых системах хорошо учиться и начинать прототип; бренду нужна своя.
| Система | Чья | Хороша для |
|---|---|---|
| Material Design | Android-приложений, изучения принципов | |
| Human Interface Guidelines | Apple | приложений для iOS и macOS |
| Carbon | IBM | сложных деловых интерфейсов |
| Fluent | Microsoft | продуктов рядом с экосистемой Microsoft |
| shadcn/ui | открытый код | интерфейсов на React со своими стилями |
| Своя | ваша команда | узнаваемого бренда |
Почему дизайн-системы не приживаются
-
Система только в макете
Код живёт своей жизнью, и через несколько месяцев они уже не совпадают.
-
Слишком большая с самого начала
Сотня компонентов до первой страницы — и ни один не проверен в работе.
-
Нет владельца
Каждый добавляет свои варианты, и система снова превращается в хаос.
-
Нет документации
Люди не знают, когда какую кнопку применять, и рисуют новую.
-
Копия чужой системы
Продукт выглядит как тысячи других на той же библиотеке.
-
Система как проект, а не продукт
Её один раз сдают, а потом она медленно устаревает.
Вопросы о дизайн-системах
Что такое дизайн-система простыми словами?
Набор правил и готовых частей, из которых собираются все страницы и экраны продукта.
Чем она отличается от UI-кита?
UI-кит — набор картинок компонентов; система добавляет токены, код, состояния, документацию и правила.
Чем она отличается от брендбука?
Брендбук описывает фирменный стиль; дизайн-система превращает его в работающие части интерфейса.
Нужна ли дизайн-система небольшому сайту?
Полная — нет; набор токенов и шкала шрифтов — да, это почти ничего не стоит и держит порядок.
Кто должен отвечать за систему?
Дизайнер и разработчик вместе, с простым порядком предложения изменений.
Можно ли взять Material Design вместо своей?
Для внутреннего инструмента или прототипа — да; бренд будет выглядеть как у всех.
Форма
Дизайн-система
для продукта
Собираю дизайн-системы того масштаба, который нужен продукту: от набора токенов для сайта до библиотеки компонентов для нескольких продуктов. Расскажите о проекте — отвечу в течение рабочего дня.