Примеры лучших дизайн-систем

Дизайн-система — это набор руководств, принципов, компонентов и инструментов, который помогает создавать последовательный и согласованный дизайн для продуктов и услуг компании. Главная цель дизайн-системы — обеспечить единообразие и эффективность разработки, ускоряя процесс создания новых функций и улучшая пользовательский опыт.

Основные элементы дизайн-системы

При построении дизайн-системы обычно используются эти элементы:

Руководство по стилю. Определяют основные принципы дизайна: цветовую палитру, типографику, использование пропорций и отступов, а другие визуальные аспекты.

Компоненты — повторно используемые элементы интерфейса: кнопки, поля ввода, навигационные меню, окна для сообщений. Компоненты в дизайн-системе обычно имеют унифицированный внешний вид.

Шаблоны и паттерны. Описывают, каким образом компоненты должны взаимодействовать между собой и с пользователем. Включают анимации, переходы, реакции на действия пользователя.

Руководство по обеспечению доступности. Определяют стандарты доступности веб-контента для пользователей: крупный шрифт, контрастные цвета, голосовое управление. Они должны соответствовать WCAG-нормативам.

Руководство по брендинг. Если дизайн-система разрабатывается для конкретного бренда, в ней могут быть указания по использованию логотипов, корпоративных цветов и других элементов, характерных для бренд-идентичности.

Техническая документация. Подробно описывает, как использовать компоненты и другие элементы дизайн-системы в разработке. Включает кодовые примеры, инструкции по установке и настройке.

Инструменты и ресурсы. Включают файлы с исходными кодами компонентов, библиотеки, генераторы кода, а также шаблоны для редакторов дизайна.

Комбинируя эти элементы, дизайн-система помогает обеспечить консистентность и эффективность в разработке, улучшая пользовательский опыт и упрощая процесс масштабирования продукта или сервиса.

Примеры дизайн-системы 

Atlassian — разработчик систем для управления проектами и совместной работы Jira, Confluence, Trello. Сервисами Atlassian пользуются больше 300 000 команд по всему миру.

Принципы дизайна Atlassian:

• Устанавливать доверительные отношения с пользователем при каждом взаимодействии.

• Объединять сотрудников для более эффективного сотрудничества.

• Делать так, чтобы пользователи достигали своих целей, и легко разбирались в том, как устроены продукты.

• Помогать командам решать задачи непрерывно.

• Учить аудиторию работать с нашими сервисами эффективно, рассказывать обо всех функциях.

Артефакты дизайн-системы:

• бренд-платформа с миссией и ценностями;

• цветовая палитра:

• библиотека Figma, которая содержит компоненты и шаблоны для проектирования и создания продуктов Atlassian;

• принципы доступности дизайн и кода;

• использование логотипов, шрифтов, иллюстраций;

• контент-гайд.

Госуслуги — портал для взаимодействия граждан РФ с ведомствами и государством. Ежедневно сайтом пользуются 11 млн человек.

Принципы дизайна Госуслуг:

• Минимализм. Если элемент можно исключить без потери смысла и функционала, это следует сделать.

• Единообразие. Одна сущность выглядит и называется везде одинаково.

• Ориентир на среднего пользователя. Используются сценарии и формулировки, которые привычны людям.

• Экономия времени пользователя. 

• Забота об эмоциях клиента и его поддержка.

Артефакты дизайн-системы:

• редполитика;

• визуальный язык: логотип, иллюстрации, инфографика, шрифты;

• принципы доступности;

• интерфейсные правила и паттерны;

• гайды для мобильного приложения.

МТС granat — дизайн-система МТС. Помогает создавать привычную среду для пользователя в 250 продуктах экосистемы.

Для создания и поддержки дизайн-системы МТС используется атомарный подход. Его суть заключается в аналогии с химическими элементами для организации и структурирования компонентов пользовательского интерфейса. 

Суть подхода такова: атомы (цвета и шрифты)  →молекулы (кнопки и элементы форм)  → организмы (модальные окна) и шаблоны (форма оплаты). Шаблоны затем могут быть повторно использованы внутри компании для создания конечных пользовательских страниц.

Артефакты дизайн-системы:

• Базовые компоненты: цвета, тени, типографика, базовый модуль, сетки, отступы.

• Иконки и правила их использования и разработки. 

• Компоненты для создания мобильных и веб-приложений.