Статья
Дизайн-система: что это и нужна ли она сайту
Дизайн-система — набор готовых элементов и правил, из которых собирается интерфейс: кнопки, поля, карточки, цвета, отступы. Большие компании строят их годами, а небольшому сайту обычно хватает компактной версии. Разбираем, из чего состоит дизайн-система и когда она действительно нужна.
Что это такое
Дизайн-система — это:
- основа — цвета, шрифты, размеры, отступы, скругления, тени, записанные как правила;
- компоненты — готовые элементы интерфейса: кнопки, поля ввода, карточки, меню, всплывающие окна, — каждый в нескольких состояниях;
- правила — когда какой элемент использовать и как сочетать;
- код — те же компоненты, уже запрограммированные, чтобы разработчики собирали страницы, а не рисовали каждую кнопку заново.
Всё это хранится в одном месте: в Figma для дизайнеров и в библиотеке компонентов для разработчиков.
Чем отличается от фирменного стиля
Фирменный стиль говорит, как выглядит бренд везде: на сайте, визитках, упаковке, вывеске. Дизайн-система — как устроен цифровой интерфейс: из каких деталей собраны экраны и как они себя ведут. Дизайн-система опирается на фирменный стиль, но идёт дальше — до каждого состояния кнопки. О фирменном стиле — статья «Фирменный стиль».
Зачем она нужна
- Единообразие. Кнопки на всех страницах одинаковые, отступы ровные, ничего не «поехало».
- Скорость. Новая страница собирается из готовых блоков за часы, а не дни.
- Меньше ошибок. Состояния, ошибки форм, мобильные версии продуманы один раз для всех.
- Проще передавать. Новый дизайнер или разработчик быстро понимает, как всё устроено.
Открытые дизайн-системы
Крупные компании публикуют свои дизайн-системы: Material Design у Google, Human Interface Guidelines у Apple, Gravity UI у Яндекса и многие другие. Их полезно изучить, чтобы понять, как продуманы компоненты и состояния, — даже если сайт делается в своём стиле.
Нужна ли она вашему сайту
- Большой продукт или сервис с десятками экранов и несколькими дизайнерами — нужна полноценная.
- Сайт компании или интернет-магазин, который будет расти, — хватит компактной: палитра, шрифты, кнопки, формы, карточки, сетка и отступы. Она делается вместе с дизайном сайта.
- Лендинг на одну задачу — отдельная дизайн-система не нужна, но правила всё равно есть: одни и те же цвета, шрифты и размеры по всей странице.
Как это устроено у нас
На нашем сайте цвета и шрифты заданы общими переменными в коде: фон, основной и приглушённый текст, цвета для светлых глав, гарнитуры для текста, заголовков и подписей. Поменять оттенок — значит поменять одну строку, и он изменится по всему сайту. Такую основу мы закладываем и в сайты клиентов: элементы рисуем в макете один раз, а потом собираем из них все страницы. О макете — статья «Макет сайта».
В корпоративном сайте это главная и шаблоны внутренних страниц — услуги, кейса, статьи, контактов, — собранные из одних элементов.