Что такое дизайн-система
Дизайн-система — это набор правил и элементов интерфейса, которые являются базовыми шаблонами для оформления интерфейса. Проще говоря: создаем шаблоны и повторяем их в макете (инпуты, состояния кнопок, создание наведения на элемент (ховер), хлебные крошки, шапка сайта, подвал (футер) и т.д.).
Преимущества ДС
- Скорость разработки возрастает в разы
- Единая стилистика проекта
- Если работаем на фрилансе, то клиент в будущем сможет сам создавать дизайны
- Упрощение работы верстальщика и программиста
Принципы создания ДС
- Целостность и последовательность. Разрабатываем ДС параллельно с проектом, но не забывая при добавлении элемента в ДС отрисовать все состояния, даже если они пока не нужны
- Повторное использование. Любой элемент (кроме состояний) должен быть использован в ДС
- Кроссплатформенность. Если из сайта нужно будет сделать dashboard или интерфейс, то ДС должна позволить это сделать с минимальным количество затрат (Или из сайта нужно будет сделать мобильное приложение)
Структура ДС (стартовая точка)
Элементы ниже реализуются с помощью стилей:
- Цвета
- Шрифты
Элементы ниже реализуются с помощью компонентов:
- Основные элементы сайта (таблицы, карточки товара, инфографика и т.д.)
- UI-элементы
- Состояния элементов
- Иконки, иллюстрации
- Эффекты (тень, градиент, обводка, скругление углов)
Это основа. Но вы можете сюда добавлять любые правила и стандартизации, которые бы упростили развитие дизайн-системы и создание новых страниц, экранов и т.д. (Работа с фото, работа с пространством, работа с отступами и т.д.).
