Дизайн-система для сайта — это набор правил и готовых компонентов, из которых собираются все страницы: цвета, шрифты, отступы, кнопки, формы, карточки, таблицы, блоки с отзывами. Когда она есть, новая страница собирается из проверенных деталей, а не рисуется с нуля, и сайт через год выглядит так же цельно, как в день запуска. В клубе ВИПМИ мы передаём UI-кит вместе с макетами, это часть услуги разработка дизайна сайта и лендинга под ключ.
Разберём, из чего состоит дизайн-система, чем она отличается от UI-кита и брендбука, кому она действительно нужна, а кому хватит минимального набора, и как поддерживать её после запуска.
Дизайн-система для сайта, UI-кит и брендбук: в чём разница
Эти понятия часто путают, хотя они решают разные задачи.
| Понятие | Что включает | Для кого |
|---|---|---|
| Брендбук | Логотип, фирменные цвета, шрифты, тон коммуникации | Для всех, кто работает с брендом: от печати до соцсетей |
| UI-кит | Готовые элементы интерфейса: кнопки, поля, карточки, иконки | Для дизайнеров и разработчиков сайта |
| Дизайн-система | UI-кит, правила применения, шаблоны блоков и страниц, документация | Для команды, которая постоянно развивает сайт |
Проще говоря, брендбук задаёт стиль компании, UI-кит превращает его в детали интерфейса, а дизайн-система объясняет, как из этих деталей собирать страницы и не нарушать логику.
Из чего состоит дизайн-система сайта
Основы
Палитра с основными и вспомогательными цветами, шкала шрифтов для заголовков и текста, сетка, система отступов, радиусы скругления, тени. Это фундамент, на который опираются все остальные элементы.
Базовые компоненты
Кнопки разных типов и состояний, поля ввода, чекбоксы, переключатели, выпадающие списки, ссылки, иконки, бейджи, уведомления. У каждого компонента описаны состояния: обычное, при наведении, нажатое, неактивное, с ошибкой.
Составные блоки
Карточка услуги, карточка товара, блок преимуществ, отзыв, таблица тарифов, блок частых вопросов, форма заявки, призыв к действию. Это кирпичи, из которых собираются страницы.
Шаблоны страниц
Главная, страница услуги, категория, карточка, статья блога, контакты. Шаблоны показывают, как блоки сочетаются между собой.
Правила и документация
Когда использовать каждый компонент, какие тексты допустимы на кнопках, как вести себя блокам на мобильных устройствах, требования к контрасту и доступности.
Важно знать. Дизайн-система должна существовать не только в макетах, но и в коде. Если в графическом редакторе кнопки одинаковые, а на сайте каждая свёрстана по-своему, единый стиль быстро разрушится.
Кому нужна дизайн-система, а кому хватит UI-кита
Полноценная дизайн-система окупается там, где сайт постоянно растёт и над ним работают несколько человек:
- корпоративные сайты с большим количеством разделов и регулярными новыми страницами;
- интернет-магазины и каталоги с разными типами карточек и промостраниц;
- веб-сервисы и личные кабинеты с множеством экранов;
- компании, у которых несколько сайтов или поддоменов в одном стиле.
Для сайта-визитки или небольшого лендинга достаточно компактного UI-кита: цвета, шрифты, кнопки, формы и несколько типовых блоков. Это займёт немного времени, но избавит от разнобоя при будущих доработках.
Плюсы и минусы дизайн-системы
| Плюсы | Минусы |
|---|---|
| Новые страницы собираются быстрее из готовых блоков | Создание системы требует времени на старте проекта |
| Сайт сохраняет единый стиль при любых доработках | Систему нужно поддерживать и обновлять |
| Проще передать проект другому дизайнеру или разработчику | Слишком строгие правила могут ограничивать творческие решения |
| Меньше ошибок в вёрстке и интерфейсе | Для маленького сайта полная система избыточна |
Как дизайн-система ускоряет развитие сайта
Главная выгода проявляется не в день запуска, а через несколько месяцев. Допустим, нужно добавить новую услугу. Без системы дизайнер рисует страницу заново, разработчик верстает новые блоки, а в итоге страница всё равно немного отличается от остальных. С системой страница собирается из существующих блоков, меняются только тексты и изображения. То же касается акций, лендингов под рекламу, новых разделов каталога.
Это особенно важно для продвижения через продающие страницы, когда под каждую услугу и каждый запрос создаётся отдельная посадочная. Чем быстрее собирается страница, тем быстрее вы закрываете новый спрос.
Осторожно. Не превращайте дизайн-систему в бесконечный проект. Начинайте с компонентов, которые нужны прямо сейчас, и расширяйте систему по мере появления новых задач. Система ради системы не приносит пользы бизнесу.
Как создаётся дизайн-система
- Аудит. Если сайт уже есть, собираем все используемые элементы и находим расхождения: пять оттенков синего, три вида кнопок, разные отступы.
- Основы. Фиксируем палитру, шрифты, сетку и отступы, опираясь на брендбук.
- Компоненты. Рисуем базовые элементы со всеми состояниями.
- Блоки и шаблоны. Собираем из компонентов типовые блоки и страницы.
- Документация. Описываем правила применения простым языком.
- Перенос в код. Разработчик создаёт компоненты в теме WordPress или в библиотеке блоков, чтобы редакторы собирали страницы из готовых частей.
Если вы только начинаете проект, дизайн-система формируется после согласования прототипа: сначала логика страниц, потом визуальный язык. Почему прототип важен как отдельный этап, мы объясняем в статье прототипирование перед дизайном сайта.
Мнение эксперта
«Лучшая проверка дизайн-системы — дать редактору собрать новую страницу без дизайнера. Если у него получилось аккуратно и в стиле сайта, система работает. Если пришлось звать дизайнера и рисовать новый блок, значит, в системе не хватает компонентов или правил.»
Эксперт клуба ВИПМИ, арт-директор клуба
Дизайн-система при редизайне
Редизайн — хороший повод навести порядок. Вместо того чтобы перерисовать каждую страницу, можно сначала создать систему, а затем постепенно перевести на неё весь сайт. Такой подход снижает риски: обновление идёт по частям, и вы можете контролировать влияние изменений на заявки и позиции в поиске. Подробнее о поэтапном обновлении читайте в материале когда пора обновлять дизайн сайта.
А общую логику работы над дизайном страниц, от брифа до передачи в разработку, мы описали в обзоре разработка дизайна страниц сайта и лендинга.
Совет. Храните UI-кит в общем доступе для всех, кто работает с сайтом: маркетологов, контент-менеджеров, подрядчиков. Даже если человек не дизайнер, он сможет проверить, соответствует ли новый баннер или страница принятому стилю.
Дизайн-система и доступность
Хорошая система учитывает не только внешний вид, но и удобство для всех посетителей. В неё стоит заложить контрастные сочетания цветов для текста и фона, достаточный размер кликабельных элементов на телефоне, видимый фокус при навигации с клавиатуры, понятные подписи полей в формах и сообщения об ошибках. Если эти требования заложены в базовые компоненты, каждая новая страница автоматически получается доступной, и не нужно проверять каждую отдельно.
Как поддерживать систему после запуска
Назначьте ответственного за дизайн-систему, даже если это не отдельная должность. Новые компоненты добавляются в систему только после проверки: нет ли уже похожего элемента, соответствует ли он правилам. Раз в несколько месяцев полезно сверять макеты с сайтом и убирать расхождения. Такая регулярная гигиена занимает мало времени и предотвращает постепенное расползание стиля, которое потом требует полноценного редизайна.
Отдельная тема — именование компонентов. Договоритесь, как называются блоки, и используйте одни и те же названия в макетах, коде и задачах. Когда маркетолог пишет «добавьте блок преимуществ с иконками», а дизайнер и разработчик понимают одно и то же, доработки идут быстрее и без лишних уточнений.
Это же правило помогает при работе с новыми подрядчиками: им не нужно разбираться в устоявшихся внутренних терминах команды.
Частые вопросы
Нужна ли дизайн-система для небольшого сайта?
Полная система обычно избыточна. Но компактный UI-кит с цветами, шрифтами, кнопками и формами стоит сделать даже для сайта из нескольких страниц.
Можно ли создать дизайн-систему для уже существующего сайта?
Да. Начинают с аудита текущих элементов, затем унифицируют их и постепенно переводят страницы на новые компоненты.
Как дизайн-система работает в WordPress?
Компоненты переносятся в тему или библиотеку блоков. Редактор собирает страницы из готовых блоков и не может случайно нарушить стиль.
Кто должен поддерживать дизайн-систему?
Обычно дизайнер или ведущий разработчик проекта. Важно, чтобы новые компоненты добавлялись по согласованным правилам.
Чем UI-кит отличается от шаблона темы?
Шаблон темы — готовое решение под многие сайты. UI-кит создаётся под ваш бренд и задачи и описывает именно ваши компоненты.
Соберём UI-кит для вашего сайта
Расскажите, как развивается ваш сайт и кто с ним работает. Мы предложим объём дизайн-системы, который окупится, а не будет лежать без дела.
