Дизайн-система — это набор руководств, принципов, компонентов и инструментов, который помогает создавать последовательный и согласованный дизайн для продуктов и услуг компании. Главная цель дизайн-системы — обеспечить единообразие и эффективность разработки, ускоряя процесс создания новых функций и улучшая пользовательский опыт.
Основные элементы дизайн-системы
При построении дизайн-системы обычно используются эти элементы:
Руководство по стилю. Определяют основные принципы дизайна: цветовую палитру, типографику, использование пропорций и отступов, а другие визуальные аспекты.
Компоненты — повторно используемые элементы интерфейса: кнопки, поля ввода, навигационные меню, окна для сообщений. Компоненты в дизайн-системе обычно имеют унифицированный внешний вид.
Шаблоны и паттерны. Описывают, каким образом компоненты должны взаимодействовать между собой и с пользователем. Включают анимации, переходы, реакции на действия пользователя.
Руководство по обеспечению доступности. Определяют стандарты доступности веб-контента для пользователей: крупный шрифт, контрастные цвета, голосовое управление. Они должны соответствовать WCAG-нормативам.
Руководство по брендинг. Если дизайн-система разрабатывается для конкретного бренда, в ней могут быть указания по использованию логотипов, корпоративных цветов и других элементов, характерных для бренд-идентичности.
Техническая документация. Подробно описывает, как использовать компоненты и другие элементы дизайн-системы в разработке. Включает кодовые примеры, инструкции по установке и настройке.
Инструменты и ресурсы. Включают файлы с исходными кодами компонентов, библиотеки, генераторы кода, а также шаблоны для редакторов дизайна.
Комбинируя эти элементы, дизайн-система помогает обеспечить консистентность и эффективность в разработке, улучшая пользовательский опыт и упрощая процесс масштабирования продукта или сервиса.
Примеры дизайн-системы
Atlassian — разработчик систем для управления проектами и совместной работы Jira, Confluence, Trello. Сервисами Atlassian пользуются больше 300 000 команд по всему миру.
Принципы дизайна Atlassian:
-
Устанавливать доверительные отношения с пользователем при каждом взаимодействии.
-
Объединять сотрудников для более эффективного сотрудничества.
-
Делать так, чтобы пользователи достигали своих целей, и легко разбирались в том, как устроены продукты.
-
Помогать командам решать задачи непрерывно.
-
Учить аудиторию работать с нашими сервисами эффективно, рассказывать обо всех функциях.
Артефакты дизайн-системы:
-
бренд-платформа с миссией и ценностями;
-
цветовая палитра:
-
библиотека Figma, которая содержит компоненты и шаблоны для проектирования и создания продуктов Atlassian;
-
принципы доступности дизайн и кода;
-
использование логотипов, шрифтов, иллюстраций;
-
контент-гайд.
Госуслуги — портал для взаимодействия граждан РФ с ведомствами и государством. Ежедневно сайтом пользуются 11 млн человек.
Принципы дизайна Госуслуг:
-
Минимализм. Если элемент можно исключить без потери смысла и функционала, это следует сделать.
-
Единообразие. Одна сущность выглядит и называется везде одинаково.
-
Ориентир на среднего пользователя. Используются сценарии и формулировки, которые привычны людям.
-
Экономия времени пользователя.
-
Забота об эмоциях клиента и его поддержка.
Артефакты дизайн-системы:
-
редполитика;
-
визуальный язык: логотип, иллюстрации, инфографика, шрифты;
-
принципы доступности;
-
интерфейсные правила и паттерны;
-
гайды для мобильного приложения.
МТС granat — дизайн-система МТС. Помогает создавать привычную среду для пользователя в 250 продуктах экосистемы.
Для создания и поддержки дизайн-системы МТС используется атомарный подход. Его суть заключается в аналогии с химическими элементами для организации и структурирования компонентов пользовательского интерфейса.
Суть подхода такова: атомы (цвета и шрифты) →молекулы (кнопки и элементы форм) → организмы (модальные окна) и шаблоны (форма оплаты). Шаблоны затем могут быть повторно использованы внутри компании для создания конечных пользовательских страниц.
Артефакты дизайн-системы:
-
Базовые компоненты: цвета, тени, типографика, базовый модуль, сетки, отступы.
-
Иконки и правила их использования и разработки.
-
Компоненты для создания мобильных и веб-приложений.