Что такое дизайн-система
Дизайн-система - набор правил, компонентов и стандартов, по которым делается дизайн всех страниц сайта или нескольких продуктов компании. Включает типографику, цветовую палитру, готовые компоненты (кнопки, формы, карточки), правила их использования.
Дизайн-система простыми словами
Это "конструктор Lego" для дизайнера. Вместо того чтобы каждый раз рисовать кнопку с нуля, есть готовая кнопка в трёх вариантах (основная, второстепенная, отмена). Применяешь нужную - и всё одинаково по всему сайту. Никаких отличающихся кнопок на разных страницах.
Что включает дизайн-система
- Типографика. Иерархия заголовков (H1-H6), размеры основного текста, межстрочные интервалы.
- Цветовая палитра. Основной цвет, дополнительный, акцентный, цвета для статусов (успех, ошибка, предупреждение).
- Кнопки. Основная, второстепенная, отмена, со ссылкой - со всеми состояниями (обычное, наведение, нажатое, неактивное).
- Формы. Поля ввода, чекбоксы, радиокнопки, селекты - с валидацией и подсказками.
- Карточки. Шаблоны для товаров, услуг, статей.
- Иконки. Единый стиль и набор иконок для всех страниц.
- Сетка раскладки. Колонки, отступы, контейнеры.
- Правила использования. Когда какой компонент применять, чего нельзя делать.
Зачем нужна
- Скорость разработки. Не нужно каждый раз рисовать с нуля.
- Консистентность. Все элементы сайта выглядят одинаково.
- Лёгкость поддержки. Изменить кнопку в одном месте - меняется на всём сайте.
- Командная работа. Разные дизайнеры и разработчики делают единообразно.
- Масштабирование. Легко добавлять новые страницы без потери стиля.
Известные дизайн-системы
- Material Design (Google) - для веба и Android
- Human Interface Guidelines (Apple) - для iOS и macOS
- Fluent Design (Microsoft) - для Windows
- Carbon (IBM) - корпоративная дизайн-система
Когда нужна дизайн-система
- Крупный сайт от 30 страниц
- Несколько продуктов с общим брендом
- Команда дизайнеров и разработчиков от 3-5 человек
- Долгосрочное развитие проекта