Дизайн-систему принято считать игрушкой больших продуктовых компаний. На деле даже сайту на 30–50 страниц она экономит недели работы и не даёт интерфейсу развалиться. Объясняем, что в неё входит и сколько это стоит.
Что такое дизайн-система простыми словами
Дизайн-система — это набор договорённостей о том, из каких деталей собран сайт и как эти детали сочетаются. В неё входят базовые параметры (цвета, шрифты, отступы, скругления, тени), готовые компоненты (кнопки, поля, карточки, таблицы, модальные окна) и правила их применения. Всё это существует в двух синхронизированных версиях: в макетах дизайнера и в коде разработчика.
Важно не путать дизайн-систему с брендбуком и с UI-китом. Брендбук описывает айдентику компании в целом — логотип, фирменные цвета, стиль фотографий — и обычно ничего не говорит о том, как выглядит поле ввода с ошибкой. UI-кит — это просто страница в макете с нарисованными элементами. Дизайн-система идёт дальше: она объясняет, когда использовать какой элемент, какие у него состояния и почему он устроен именно так.
Зачем она небольшому сайту
Самое частое возражение: «У нас не приложение с сотней экранов, а корпоративный сайт. Зачем нам система?» Ответ лежит не в моменте разработки, а в жизни сайта после неё. Небольшой сайт через два года почти всегда выглядит хуже, чем в день запуска. Происходит это постепенно: новая страница акции свёрстана «похоже», в разделе вакансий появилась кнопка другого размера, подрядчик по рекламе добавил лендинг со своими отступами. Каждое отклонение незаметно, но через сотню таких мелочей сайт выглядит лоскутным одеялом.
Дизайн-система решает четыре практические задачи:
- Скорость. Новую страницу собирают из готовых блоков, а не рисуют с нуля. По нашему опыту, после создания системы макет типовой внутренней страницы занимает не 2–3 дня, а 3–5 часов.
- Предсказуемость. Разработчик не угадывает отступы по макету, а берёт готовый компонент. Количество правок на этапе приёмки вёрстки снижается в разы.
- Преемственность. Если через год сменится подрядчик или внутренний дизайнер, новый человек за день поймёт, как устроен сайт.
- Экономия на доработках. Изменить цвет кнопок или скругление карточек на всём сайте — задача на час, а не на неделю поиска по шаблонам.
Из чего состоит минимальная система для сайта
Для корпоративного сайта или каталога не нужна система уровня крупного банка с сотнями страниц документации. Мы выделяем три уровня, и первые два обязательны почти для любого проекта.
Уровень 1. Токены — базовые параметры
Токены — это именованные значения, из которых собирается всё остальное. Цвета (акцент, фон, текст, границы, системные состояния), типографическая шкала (обычно 6–8 размеров с заданным межстрочным интервалом), шкала отступов (например, 4, 8, 12, 16, 24, 32, 48, 64, 96 пикселей), радиусы скруглений, тени, длительности анимаций. Главное правило: в макетах и коде не бывает «случайных» значений. Если отступ 22 пикселя не входит в шкалу, его нет нигде.
Уровень 2. Компоненты
Минимальный набор для B2B-сайта — 20–30 компонентов. Кнопки трёх-четырёх видов, поля ввода, выпадающие списки, чекбоксы и переключатели, карточка товара или услуги, карточка новости, хлебные крошки, пагинация, табы, аккордеон, таблица, уведомление, модальное окно, блок с формой, шапка и подвал. Для каждого компонента описываются все состояния: обычное, наведение, фокус с клавиатуры, нажатие, неактивное, ошибка, загрузка.
Уровень 3. Шаблоны и правила
Это типовые сочетания компонентов: «страница услуги», «раздел каталога», «статья блога», «лендинг акции». Плюс короткие правила: сколько кнопок-акцентов допустимо на экране, как оформлять таблицы характеристик, какие пропорции у изображений в карточках. Этот уровень особенно ценен, если сайт будут развивать собственными силами.
Сколько времени и денег это добавляет
Честный ответ: на старте дизайн-система увеличивает объём работ. Но меньше, чем кажется, и окупается уже в рамках первого проекта.
| Тип проекта | Дополнительное время на систему | Когда окупается |
|---|---|---|
| Лендинг | 1–2 дня (только токены) | При создании второй посадочной страницы |
| Корпоративный сайт, 20–40 шаблонов | 1–1,5 недели | На этапе вёрстки: меньше правок и согласований |
| Сайт-каталог или интернет-магазин | 2–3 недели | При запуске новых разделов и фильтров |
| B2B-портал, личные кабинеты | 3–5 недель | Практически сразу: без системы такой объём интерфейсов не собрать единообразно |
В бюджете проекта это обычно 8–15% от стоимости дизайна. Для сравнения: разовая «зачистка» разнородного интерфейса у сайта, который два-три года развивали без правил, часто обходится дороже, чем система, заложенная с самого начала.
Пример из практики: сайт, который развивали без системы
К нам обратился производитель упаковочного оборудования. Сайт был запущен четыре года назад, с тех пор его дорабатывали три разных исполнителя. При аудите вёрстки мы насчитали 14 вариантов основной кнопки (отличались высотой, скруглением, шрифтом и оттенком), 9 размеров заголовков второго уровня и 6 разных оформлений формы заявки. В CSS было больше 40 уникальных значений серого цвета.
Внешне сайт выглядел «нормально», но посетители это чувствовали: время на странице было ниже среднего по нише, а форма обратной связи на разных страницах работала с разной конверсией — от 0,4% до 1,9%. Вместо полного редизайна мы собрали дизайн-систему из существующих элементов: выбрали лучшие варианты, свели цвета к 22 токенам, заменили компоненты во всех шаблонах. Работа заняла около шести недель. Визуально сайт почти не изменился, но стал аккуратнее, а разброс конверсии формы сократился — она стала одинаковой на всех страницах и приблизилась к лучшему из прежних значений.
Совет студии: если бюджет не позволяет полноценную систему, сделайте хотя бы токены — цвета, шрифты и шкалу отступов, оформленные переменными в коде. Это полдня работы для разработчика, а через год именно они спасут сайт от лоскутности.
Как внедрить систему, чтобы ей реально пользовались
Система, которая живёт только в файле дизайнера, бесполезна. Мы придерживаемся нескольких правил, чтобы она работала на всех участников процесса.
- Один источник правды. Токены хранятся в одном месте и выгружаются и в библиотеку макетов, и в код. Ручная синхронизация рано или поздно расходится.
- Одинаковые имена. Компонент «Карточка товара / компактная» называется одинаково в макете, в коде и в документации. Это кажется мелочью, пока менеджер не пытается объяснить разработчику, какую именно карточку надо поправить.
- Живые примеры. Для разработчиков и контент-менеджеров полезна страница-витрина со всеми компонентами прямо на сайте (закрытая от индексации). На ней видно, как элемент выглядит в реальном браузере, а не на картинке.
- Связь с CMS. Визуальный редактор настраивается так, чтобы собирать страницы из компонентов системы, а не из произвольного HTML. Тогда даже человек без дизайнерского опыта не нарушит правила.
- Владелец. У системы должен быть ответственный — дизайнер в студии или сотрудник на стороне клиента. Новые компоненты добавляются через него, а не «по месту».
Мы закладываем эти принципы в каждый проект дизайна сайта, а при передаче на поддержку продолжаем развивать систему вместе с сайтом, чтобы новые разделы не выбивались из общего стиля.
Когда система избыточна
Бывают случаи, когда полноценная дизайн-система не нужна. Это разовые промо-сайты под конкретное событие со сроком жизни в несколько месяцев, экспериментальные посадочные страницы для проверки спроса и проекты, которые планируется полностью переделать в течение года. В этих ситуациях достаточно аккуратного UI-кита и базовых токенов. Но если сайт должен жить три года и больше, развиваться и наполняться разными людьми — система себя оправдает.
Чек-лист: есть ли у вашего сайта дизайн-система
- Все цвета интерфейса можно перечислить списком из 20–30 именованных значений.
- Размеры шрифтов подчиняются шкале, а не подобраны для каждой страницы отдельно.
- Отступы кратны базовому шагу (4 или 8 пикселей).
- У кнопок, полей и ссылок описаны все состояния, включая фокус с клавиатуры и ошибку.
- Компоненты в макете и в коде называются одинаково.
- Новую типовую страницу можно собрать из готовых блоков без привлечения дизайнера.
- Изменение цвета акцента делается в одном месте и применяется ко всему сайту.
- Есть человек, который отвечает за добавление новых элементов.
Если галочек меньше половины, сайт уже начал терять единообразие — даже если пока этого не видно. Начните с токенов: это самый дешёвый шаг с самым долгим эффектом.
