Зачем бизнесу дизайн-система
Дизайн-система нужна, когда у компании несколько продуктов или сотни экранов: сайт, личный кабинет, мобильное приложение, промо-страницы. Без общих правил каждый дизайнер рисует кнопку по-своему, разработчики пишут похожие элементы заново, а клиент видит разные интерфейсы у одного бренда. Единая библиотека убирает этот разнобой и сокращает время на каждый следующий экран.
Вторая причина — передача работы. Когда в команду приходит новый дизайнер или вы меняете подрядчика, система служит инструкцией: какие цвета допустимы, как ведёт себя поле с ошибкой, где кончается сетка. Решения не теряются вместе с уходом конкретного человека.
Из чего состоит дизайн-система
- Токены — именованные значения цвета, шрифтов, отступов, радиусов и теней, которые одинаково читают дизайнер и программист.
- Библиотека компонентов UI (пользовательского интерфейса): кнопки, поля, выпадающие списки, таблицы, карточки, модальные окна со всеми состояниями — обычное, наведение, ошибка, неактивно.
- Сетка и правила адаптива: как экран перестраивается на телефоне, планшете и широком мониторе.
- Шаблоны типовых страниц: каталог, карточка товара, форма заявки, личный кабинет.
- Документация: когда какой компонент использовать, примеры правильного и неправильного применения, правила текстов в интерфейсе.
- Порядок обновления: кто вносит изменения, как их согласовать и сообщить команде.
Как идёт разработка по неделям
| Недели | Что делаем | Что получаете |
|---|---|---|
| 1–2 | Собираем все действующие экраны, ищем повторы и расхождения, говорим с дизайнерами и разработчиками | Карту интерфейса и список элементов к унификации |
| 2–3 | Утверждаем токены: палитру, шрифтовую шкалу, отступы, сетку | Базовый слой системы, привязанный к фирменному стилю |
| 3–6 | Рисуем компоненты со всеми состояниями и вариантами размеров | Библиотеку компонентов в рабочем файле |
| 6–8 | Собираем шаблоны страниц, проверяем на реальных сценариях | Набор шаблонов и исправленные компоненты |
| 8–10 | Пишем документацию, передаём файлы и проводим встречу с командой | Руководство, исходники и договор о передаче прав |
Что влияет на стоимость дизайн-системы
Разработка дизайн-системы стоит от 250 000 ₽ разово. Цену двигают четыре вещи: сколько продуктов покрывает система (только сайт или ещё приложение и кабинет), сколько компонентов нужно, есть ли светлая и тёмная тема, нужна ли подробная документация для внешних подрядчиков. Если фирменного стиля ещё нет, сначала делаем фирменный стиль — без него токенам не на что опереться.
Когда интерфейс ещё не спроектирован, начинаем с прототипа сайта или полноценного UX/UI-дизайна, а систему вытаскиваем из готовых экранов. Обратный порядок — сначала абстрактная библиотека, потом продукт — обычно даёт лишние компоненты, которыми никто не пользуется.
Права на компоненты и файлы
Компоненты, иконки и шаблоны — результат творческого труда дизайнеров, поэтому права на них передаются только по договору. По статье 1234 ГК РФ договор об отчуждении исключительного права заключается письменно, иначе он недействителен. Мы прописываем передачу прав в договоре, и вы свободно используете систему в любых своих продуктах, в том числе с другими подрядчиками.
Кому дизайн-система пока не нужна
Если у вас один лендинг или сайт-визитка на десяток страниц, полноценная система окупится нескоро. Здесь хватит аккуратного дизайна сайта с небольшим набором правил внутри макета. Не нужна она и тогда, когда продукт меняется каждую неделю и интерфейс ещё ищет свою форму: систему разумно фиксировать после того, как основные сценарии устоялись.