Что такое дизайн-система и зачем она сайту

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

Что это на самом деле

Дизайн-система — это набор готовых элементов и правил их использования.

Что в неё входит:

• типографика — размеры и начертания заголовков, текста, подписей;
• цветовая палитра с назначением: основной, акцентный, для ошибок, для фона;
• сетка и отступы — единая шкала, а не произвольные значения;
• компоненты — кнопки, поля, карточки, таблицы, модальные окна;
• состояния каждого компонента: обычное, при наведении, нажатое, неактивное, с ошибкой;
• правила — когда какую кнопку использовать, как оформлять пустые списки.

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

Зачем это заказчику

Разработчику она удобна, но платит-то заказчик, поэтому аргументы должны быть про деньги.

Новые страницы дешевеют. Без системы каждая новая страница — задача для дизайнера. С системой она собирается из готовых блоков за часы. На проекте, который живёт годами, разница накапливается в сотни тысяч.

Сайт не расползается. Через год без системы на сайте обнаруживается семь оттенков синего, кнопки пяти размеров и четыре стиля заголовков — потому что каждую страницу делали в разное время и по-разному.

Быстрее разработка. Компонент верстается один раз и переиспользуется. Это напрямую сокращает часы во фронтенде.

Проще сменить исполнителя. Новый подрядчик получает правила, а не только картинки, и не начинает изобретать заново.

Когда она нужна

Обязательно: магазины и каталоги, веб-приложения и личные кабинеты, сайты с регулярно появляющимися страницами, проекты, где работают несколько человек.

Желательно: корпоративные сайты от десяти страниц, проекты с планами роста.

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

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

Своя или готовая

Развилка, которая заметно влияет на бюджет.

Готовая система — это существующий набор компонентов, который адаптируется под ваш бренд: меняются цвета, шрифты, скругления. Экономит 30–50% дизайнерских часов, то есть обычно 15–25% всей сметы проекта.

Подходит: B2B-каталогам, внутренним сервисам, проектам, где сайт — инструмент, а не витрина.

Своя система — разрабатывается с нуля под задачу. Дороже, дольше, но даёт визуальную отличимость.

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

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

Как понять, что система есть

Дизайн-систему легко перепутать с набором аккуратных макетов. Проверьте по трём признакам:

Есть отдельная страница с компонентами. Не макеты страниц, а именно библиотека: все кнопки, все поля, все карточки в одном месте.

Есть состояния. Не только обычная кнопка, но и при наведении, нажатая, заблокированная, в состоянии загрузки. Если их нет — разработчик додумает сам, и получится разнобой.

Есть правила. Хотя бы короткие: какая кнопка основная, а какая второстепенная; какой отступ между блоками; что показывать при пустом списке.

Без третьего пункта у вас не система, а набор элементов, который через полгода начнёт применяться кто во что горазд.

Что это меняет в процессе

С дизайн-системой меняется порядок работы: сначала собираются компоненты, потом из них — страницы. Это выглядит медленнее на старте и заметно быстрее дальше.

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

Место дизайн-системы в общем процессе — между прототипированием и вёрсткой: подробно в статье этапы разработки сайта.

Итог

Дизайн-система — это не про красоту, а про стоимость изменений. Она делает дороже старт и дешевле всё последующее.

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