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