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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

 

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

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

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

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

Вам также может понравится