Дизайн-система или отдельные макеты: что выгоднее на 5–20 экранах

До восьми экранов дешевле отдельные макеты: библиотека повторяемых компонентов с состояниями, правилами отступов и версий за 30–60 тыс. не успевает окупиться. С восьми экранов она возвращает надбавку на правках после релиза и поднимает пропускную способность команды.

Четыре оси и шкала

Сравнение идёт по четырём осям, и каждая измеряется числом. Ставка экрана — 8–12 тыс., дизайн-система — 30–60 тыс. Базовые 60 тыс. на структуру и концепцию одинаковы в обоих вариантах, поэтому в сравнение не входят; пять экранов считаются отдельно, по 8–12 тыс.

Смета на пяти экранах. Нижняя граница шкалы: до 60 тыс. Верхняя: 150 тыс. и выше.

Смета на двадцати экранах. Нижняя граница: до 160 тыс. Верхняя: 400 тыс. и выше.

Правок на одно изменение после релиза. Нижняя граница: одна правка. Верхняя: двадцать, по числу экранов, где стоит компонент.

Вариантов компонента к двадцатому экрану. Нижняя граница: один компонент с состояниями. Верхняя: сорок, по два варианта на экран.

Ось	Отдельные макеты	Дизайн-система
Смета на 5 экранах	1 · 40–60 тыс.	4 · 70–120 тыс.
Смета на 20 экранах	2 · 160–240 тыс.	4 · 190–300 тыс.
Правок на одно изменение после релиза	4 · до 12	1 · одна
Вариантов компонента к 20-му экрану	4 · до 20	1 · один с состояниями

Оценка в ячейке — положение в полосе оси, точный диапазон стоит рядом. Таблица не различает два случая, которые решают исход. Первый: экраны не делят компоненты, у каждого своя компоновка, и библиотеке нечего собирать. Второй: продукт живёт на одной таблице с десятью режимами, а общий у него только заголовок.

Отдельные макеты: где выигрывают

Начальная смета — сильная сторона этого варианта. Пять экранов стоят 40–60 тыс. по ставке 8–12 тыс., два сводных раунда правок приходятся на конкретные экраны, передача идёт комплектом по каждому экрану.

Вариант подходит продукту с одной ролью и одним релизом: команда собирает интерфейс, выпускает и замораживает работу. На пяти-семи экранах библиотека не успевает окупиться, потому что общих компонентов мало: шапка, кнопка, поле, модальное окно. Четыре компонента на семи экранах — это двадцать восемь точек правки, и в первой версии они ещё не мешают.

Граница видна на втором релизе. Правка шапки, которая стоит на двенадцати экранах, превращается в двенадцать правок, и каждая может разойтись по-своему. К двадцатому экрану в файле лежит до двадцати вариантов одной кнопки, если каждый экран рисует её заново.

Дизайн-система: где выигрывает

Система продаёт стоимость изменения. Библиотека стоит 30–60 тыс. — это 2,5–7,5 экрана по маржинальной ставке. На пятёрке она добавляет 50–150 % к работе по экранам, на двадцати — 13–38 %. Надбавку возвращают правки после релиза.

Механика простая. Общий компонент правится в одном месте и приезжает на все экраны сразу: шапка на двенадцати экранах — одна правка вместо двенадцати. Если после релиза вы трижды меняете компонент, который стоит на восьми экранах, система отдаёт двадцать четыре правки против трёх.

Передача в разработку меняет состав комплекта. Вместо двадцати макетов команда получает библиотеку с состояниями, правилами отступов, версиями и документацией. Для CTO это пропускная способность: новая страница собирается из готовых элементов, а вопрос «какая кнопка здесь правильная» решается ссылкой на компонент.

У системы есть цена сопровождения. Библиотеке нужен владелец: без него компоненты расходятся с продуктом, и через два релиза появляются локальные исключения. Если сценарии меняются после первой версии, часть компонентов переписывают, и это второй проход по бюджету.

Точка перелома

Отсюда первый вывод: до восьми экранов система остаётся надбавкой, которую закрывают только будущие правки.

Второй вывод касается правок. Порог в правках: 22 сэкономленные правки за релиз. При цене правки 1,4–2,9 тыс. этот объём перекрывает 30–60 тыс. библиотеки за один релиз; половина объёма закрывает порог за два релиза. Одна правка — это одна операция в одном файле, поэтому перелом считаем в правках и экранах.

Третий вывод — про срок. Калькулятор считает 0,15–0,25 недели на экран и 1,75–3,25 недели на структуру: двадцать экранов — 4,75–8,25 недели. Дизайн-система в неделях не оценена, это ограничение расчёта, и в план её ставят отдельной строкой.

Вердикт по задачам

Пять-семь экранов, одна роль, один релиз: отдельные макеты. Работа по экранам — 40–60 тыс., библиотека не окупается на четырёх общих компонентах.

Восемь-четырнадцать экранов, две-три роли, релизы после передачи: гибрид. Система на пять-семь повторяемых элементов — кнопка, поле, строка таблицы, меню, модальное окно, — отдельные макеты на остальное. Пять из семи повторяемых элементов на восьми экранах закрывают 40 из 56 точек правки, а библиотека не превращается в отдельный продукт.

Пятнадцать-двадцать экранов или несколько продуктов с общим интерфейсом: система. 30–60 тыс. окупаются при компоненте на восьми и более экранах и трёх изменениях после релиза; передача отдаёт разработке состояния, отступы и правила версий.

Страницы с разной компоновкой и без общих компонентов: отдельные макеты при любом объёме. Два общих элемента дешевле нарисовать дважды, чем собирать библиотеку за 30 тыс.

Для CTO итог считается в правках на релиз и в числе экранов, которые они задевают; час дизайнера в этот счёт не входит.

Допущения

Расчёт опирается на наши ставки: 8–12 тыс. за экран, 30–60 тыс. за систему, 60 тыс. базы. Это не замер рынка и не обещание срока. Число правок зависит от того, сколько экранов делят компонент, и его считают по вашему файлу до старта.

Что сделать до решения

Соберите перечень экранов и отметьте, сколько из них делят шапку, кнопку, поле, строку таблицы и модальное окно. Перечень — исходный документ для выбора: он показывает, что вообще можно вынести в библиотеку.

Базовая метрика — две величины: число правок на одно изменение после релиза и число вариантов компонента. Обе считают до работы, по текущему файлу или по прошлому релизу.

Проверка через 14 дней после первого релиза: сколько новых вариантов компонента появилось и сколько экранов пришлось править вручную. Это тот же замер, что и на старте, поэтому сравнение честное.

Условие раскатки простое. Компонент на восьми и более экранах и три правки за релиз — выносите систему отдельной строкой. Меньше восьми экранов — оставляйте отдельные макеты и фиксируйте компоненты внутри файла.

Смету на оба варианта считает калькулятор UI/UX-дизайна: он показывает диапазон по числу экранов, сложности, исследованию и системе. Реализацию библиотеки в коде и сборку страниц закрывает разработка ПО. Как читать саму смету по строкам, разбираем в разборе про семь строк.