Дизайн-система: что это такое, зачем и как ее создать

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

• Что такое дизайн-система?
• Для чего это?

Что такое дизайн-система?

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

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

Дизайн-система состоит из трех уровней:

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

Фреймворк представляет собой библиотеку кода, написанную для каждого из этих элементов, а также плагины для анимации, тегов и меток для навигации.

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

Например, в рекомендациях указаны параметры всплывающего окна на сайте: отступы от текста, расположение и размер заголовка и основного текста, место для кнопки, а также то, как будет выглядеть окно при меньшем или меньшем размере. больше текста.

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

Единой классификации не существует, но специалисты выделяют два типа систем проектирования — с открытым и закрытым исходным кодом.

В системах с открытым исходным кодом любая компания может использовать материалы и адаптировать их для своих проектов — менять цвета кнопок, шрифты и иконки. Например, в системах Ant Design, Human Interface Guidelines и Material Design.

Системы проектирования с закрытым исходным кодом обычно создаются для конкретной компании или продукта. Это либо полностью закрытые материалы, доступные только сотрудникам, либо частично открытые.

Как создать дизайн-систему

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

Структура системы проектирования:

• атомы — это мельчайшие компоненты: кнопки, значки, поля ввода и шрифты.
• Молекулы представляют собой комбинацию нескольких простых элементов: двух кнопок, заголовка и строки ввода, панели уведомлений, флажка и текста.
• микроорганизмы представляют собой полноценные компоненты: шапка сайта, форма авторизации, карточки товаров и баннер уведомлений.
• Шаблоны — макеты страниц без контента: меню, внешний вид сайта.
• Разделы это страницы, наполненные контентом.

Общий алгоритм выглядит так:

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

Обычно дизайн-системы не создаются с нуля, а строятся на основе уже разработанного материала: UI-китов, руководств или брендбуков.

Зачем нужна дизайн-система?

Как и в случае с каждым ИТ-продуктом, очень важно ответить на вопрос: «Для чего нужна система дизайна?» Или, как замечают некоторые коллеги по цеху, «ну и что»?

Ответ на этот вопрос поможет вам понять ценность продукта. Частично это уже видно из того, что мы описали выше. Но давайте разберемся и посмотрим глубже.

автоматизация

Автоматизация дает наиболее очевидные преимущества. Дизайн-система поможет вам автоматизировать операции, освободив время для других обязанностей.

Итеративность

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

Согласованность

Последовательность означает, что объекты и сущности в продукте, выполняющие одну и ту же функцию, должны стремиться к единству и сходству.

Когда мы используем в продукте схожие функции, они становятся привычными и удобными: мы инстинктивно понимаем, как работает и выглядит кнопка, а также где она расположена.

Надеемся, что каждый почерпнул из статьи что-то ценное. И мы еще раз убедились, что работа над статьей структурирует знания и мотивирует к дополнительному обучению.