Через год-два после запуска многие сайты выглядят как лоскутное одеяло: кнопки пяти разных оттенков, отступы «на глаз», три варианта карточки товара и формы, свёрстанные каждая по-своему. Так происходит не из-за плохих дизайнеров, а из-за отсутствия общих правил. Дизайн-система — это набор таких правил и готовых компонентов, общий для дизайнеров, разработчиков и контент-менеджеров. Она делает сайт цельным и ускоряет любую доработку.
Что входит в дизайн-систему
Дизайн-систему часто путают с UI-китом — файлом с нарисованными кнопками и полями. UI-кит — лишь одна из её частей. Полноценная система состоит из нескольких уровней, которые связаны между собой.
- Дизайн-токены — базовые значения: цвета, размеры шрифтов, интерлиньяж, отступы, радиусы скруглений, тени, скорость анимаций. Это словарь, на котором строится всё остальное.
- Базовые компоненты — кнопки, поля ввода, чекбоксы, переключатели, бейджи, ссылки, иконки. Каждый — со всеми состояниями: обычное, наведение, фокус, нажатие, неактивное, ошибка, загрузка.
- Составные блоки — карточка товара, форма заявки, шапка, подвал, модальное окно, блок отзывов, таблица тарифов. Они собираются из базовых компонентов.
- Шаблоны страниц — типовые раскладки: категория каталога, статья блога, страница услуги, контакты.
- Правила и документация — когда какой компонент использовать, как писать тексты интерфейса, как работать с изображениями, примеры правильного и неправильного применения.
- Код — библиотека компонентов во фронтенде, которая точно соответствует макетам.
Ключевой момент — синхронизация между дизайном и кодом. Если в макетах кнопка имеет скругление 8 пикселей, а в коде где-то 6, а где-то 10, системы нет. Работает она только тогда, когда изменение токена в одном месте автоматически применяется везде: и в макетах, и на сайте.
Кому она нужна, а кому пока нет
Дизайн-система — это вложение. Она требует времени на создание и дисциплины на поддержку, поэтому окупается не везде. Простой ориентир: чем больше страниц, людей и изменений, тем выгоднее система.
| Проект | Нужна ли система | Что достаточно |
|---|---|---|
| Сайт-визитка на 5–7 страниц | Нет | Страница стилей в макете: цвета, шрифты, кнопки |
| Лендинг | Нет | Аккуратный макет с едиными отступами |
| Корпоративный сайт на 30–100 страниц | Упрощённая | Токены, базовые компоненты, 5–10 составных блоков |
| Интернет-магазин | Да | Полная система с компонентами каталога и оформления заказа |
| Несколько сайтов одной компании | Обязательно | Общая система с темами для каждого бренда или направления |
| Продукт с личным кабинетом | Обязательно | Полная система с документацией и библиотекой в коде |
Для небольших проектов мы всё равно закладываем зачатки системы: единую сетку отступов, ограниченную палитру и шкалу шрифтов. Это ничего не стоит на этапе дизайна, но избавляет от хаоса, когда сайт начнёт расти.
Что даёт дизайн-система бизнесу
Аргумент «будет красиво и единообразно» мало кого убеждает выделить бюджет. Поэтому важно понимать, какие конкретные выгоды система приносит.
Цифры выше — наш усреднённый опыт на проектах, где система внедрялась при редизайне. Самый заметный эффект — в скорости. Когда маркетинг просит посадочную страницу под акцию, дизайнер не рисует её с нуля, а собирает из готовых блоков за полдня, а разработчик верстает за день, потому что все компоненты уже есть в коде. Без системы та же задача занимает неделю.
Второй эффект — качество. Кнопка, поле или карточка, вынесенные в систему, уже проверены на доступность, адаптивность, работу с длинными текстами и пустыми данными. Новые страницы автоматически наследуют эти проверки. Ошибки вроде «на iPhone SE заголовок карточки обрезается» исправляются один раз во всём сайте.
Третий — независимость от конкретных людей. Если дизайнер или подрядчик меняется, новый человек открывает документацию и сразу работает в правилах, а не пытается по сотне макетов восстановить логику предшественника.
Токены: фундамент системы
Начинать построение системы нужно не с кнопок, а с токенов. Это небольшой набор переменных, на который опираются все компоненты. Хорошо продуманные токены делают систему гибкой: например, тёмная тема или вторая цветовая схема для дочернего бренда добавляются заменой значений, а не перерисовкой интерфейса.
Цвет
Токены цвета лучше называть по назначению, а не по оттенку: «фон основной», «текст второстепенный», «акцент», «ошибка», «граница», а не «синий-500» или «серый светлый». Тогда при смене палитры не нужно искать по всему коду, где использовался «синий». Обычно хватает 15–25 смысловых токенов цвета.
Типографика и отступы
Шкала шрифтов — 6–8 размеров с заданным интерлиньяжем и начертанием для каждого: заголовки трёх-четырёх уровней, основной текст, мелкий текст, подписи. Отступы строятся на базовом шаге, обычно 4 или 8 пикселей: 4, 8, 12, 16, 24, 32, 48, 64. Любой отступ на сайте берётся из этой шкалы. Это кажется ограничением, но именно оно создаёт ощущение порядка, даже если пользователь не может объяснить, откуда оно.
Остальное
Радиусы скругления (2–3 значения), тени (2–3 уровня глубины), длительности и кривые анимаций, ширина контейнера и точки перестройки для адаптивности. Всё, что повторяется больше двух раз, стоит превратить в токен.
Как построить систему: порядок работ
Строить систему можно с нуля для нового сайта или извлекать её из существующего. Второй вариант встречается чаще и требует аудита.
Инвентаризация
Собираем все уникальные элементы текущего сайта: цвета, размеры шрифтов, кнопки, карточки, формы. Обычно обнаруживается 30–40 оттенков серого и 8–12 видов кнопок. Это наглядно показывает масштаб проблемы.
Токены
Сводим найденное к ограниченной шкале. 40 серых превращаются в 6–8, 12 размеров шрифта — в 7.
Базовые компоненты
Проектируем кнопки, поля, переключатели и другие примитивы со всеми состояниями и вариантами размеров.
Составные блоки
Собираем из примитивов карточки, формы, навигацию и другие повторяющиеся блоки сайта.
Реализация в коде
Переносим токены и компоненты во фронтенд, добавляем витрину компонентов, где можно посмотреть каждый в разных состояниях.
Документация и внедрение
Описываем правила использования и постепенно переводим страницы сайта на новые компоненты.
Для корпоративного сайта весь цикл занимает 3–6 недель, для крупного магазина — 2–3 месяца. Не обязательно делать всё сразу: разумно начать с токенов и десятка самых частых компонентов, а остальное наращивать по мере доработок. Если сайт и так нуждается в обновлении, систему удобно строить в рамках редизайна.
Документация, которой будут пользоваться
Документация дизайн-системы нужна не для отчёта, а для ежедневной работы, поэтому она должна отвечать на практические вопросы быстрее, чем коллега в мессенджере. Для каждого компонента достаточно короткой страницы: назначение в одном предложении, варианты и состояния с картинками, правила использования, пара примеров «так делаем» и «так не делаем», ссылка на компонент в коде.
Отдельный раздел стоит посвятить текстам интерфейса: как формулировать кнопки, ошибки, пустые состояния, уведомления. Например: кнопки начинаются с глагола, сообщения об ошибке объясняют, как исправить, а не что сломалось, числа пишутся цифрами. Эти правила особенно полезны контент-менеджерам, которые добавляют страницы без участия дизайнера.
Хороший признак живой документации — ей пользуются при постановке задач. Когда менеджер пишет «нужна страница акции: первый экран вариант B, блок преимуществ из трёх карточек, форма короткая», а разработчик сразу понимает, о чём речь, система работает. Если же задачи по-прежнему ставятся скриншотами конкурентов с пометками «примерно так», документацию нужно упрощать и приближать к реальным сценариям.
Типичные ошибки
Самая частая ошибка — система только в макетах. Дизайнер создаёт красивую библиотеку компонентов, но разработчики продолжают верстать каждую страницу отдельно. Через полгода макеты и сайт расходятся, и система становится бесполезной. Компоненты в коде так же важны, как и в макетах.
Вторая ошибка — избыточность. Попытка предусмотреть всё: 14 вариантов кнопок, 6 видов карточек, десятки исключений. Такую систему никто не может запомнить, и люди начинают выбирать компоненты наугад. Каждый новый вариант должен появляться в ответ на реальную задачу, а не «на всякий случай».
Третья — отсутствие владельца. Система живёт, только если кто-то отвечает за её развитие: принимает решения о новых компонентах, обновляет документацию, следит, чтобы в макетах не появлялись «самодельные» элементы. Без владельца она постепенно размывается. В небольших командах эту роль может совмещать ведущий дизайнер или фронтенд-разработчик, а на поддерживаемых проектах — команда технической поддержки.
Можно ли взять готовую дизайн-систему из открытых источников?
Можно взять за основу открытую библиотеку компонентов, особенно для личных кабинетов и административных интерфейсов. Но для публичного сайта её придётся серьёзно адаптировать под фирменный стиль, иначе он будет похож на сотни других.
Замедлит ли система работу дизайнера?
Первые недели — немного, пока команда привыкает к ограничениям. Затем работа ускоряется, потому что большинство решений уже принято и не нужно каждый раз придумывать отступы и состояния.
Как поступать с уникальными промо-страницами?
Их можно делать за рамками системы, но на её токенах: те же цвета, шрифты и шкала отступов. Если уникальный блок начинает повторяться, его стоит перенести в систему.
Итого
Дизайн-система — это общий язык команды, а не красивый файл с кнопками. Она состоит из токенов, компонентов, шаблонов, правил и кода, синхронизированных между собой. Для визиток и лендингов достаточно аккуратной страницы стилей, а для магазинов, крупных корпоративных сайтов и нескольких связанных проектов система окупается за счёт скорости доработок и стабильного качества.
Начинайте с инвентаризации и токенов, переносите компоненты в код, назначьте ответственного за систему и не плодите варианты без необходимости. Тогда сайт сохранит цельность даже через годы активного развития.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
