Дизайн-системы

В 2021 году сложно представить себе успешный бизнес, работающий без помощи цифровых продуктов.
UI/UX специалисты, дизайнеры и все причастные к процессу разработки диджитал продуктов стараются задействовать различные идеи и подходы на своих проектах для высокого качества результатов.
Одной из таких идей является Дизайн-Система.
В этой статье мы разберём, что такое Дизайн-Системы, почему они необходимы, как их создать, какими инструментами управления и поддержки Дизайн-систем пользоваться, а также покажем примеры хороших Дизайн-Систем.

Что такое Дизайн-Система?
Дизайн-система — это набор взаимосвязанных шаблонов и компонентов пользовательского интерфейса, связанных вместе принципами дизайна и всеобъемлющей стратегией UX. Системы дизайна помогают в проектировании цифровых продуктов и разработке таких продуктов, как приложения или веб-сайты.
Команды могут повторно использовать эти компоненты в различных комбинациях для создания или обновления продукта, не тратя время на переработку общих шаблонов взаимодействия. Можно сказать, дизайн-системы —это лего-набор для создания масштабных цифровых продуктов.
Дизайн-системы часто содержат информацию о дизайне в качестве руководства по стилю; цвета, типографика и стили, используемые во всех элементах пользовательского интерфейса. Совокупность стандартов, принципов и согласованных элементов пользовательского интерфейса делает дизайн-систему ценным источником правил графического оформления для всей организации.

Почему дизайн-системы необходимы
Дизайн-система сокращает разрыв между дизайнерами и UI-инженерами, которые работают над несколькими продуктами и часто воссоздают или дублируют одну и туже работу, выполненную другими командами. Дизайн-система может помочь улучшить согласованность между платформами, и начать создавать более интуитивно понятные продукты и позволить дизайнерам и инженерам сосредоточиться на решении более серьезных проблем.

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

Создать язык визуального дизайна
Язык визуального дизайна — это ядро ​​дизайн-системы. Он состоит из компонентов, которые вы будете использовать для создания своего цифрового продукта. Язык визуального дизайна состоит из четырех основных категорий, и вы должны учитывать роль, которую каждый из этих элементов дизайна играет в каждом компоненте на экране.
Цвет
Общие цвета в дизайн-системе включают 1-3 основных цвета, которые представляют ваш бренд. Вы можете включить ряд оттенков — цвет, смешанный с белым, — и оттенки — цвет, смешанный с черным, — чтобы дать вашим дизайнерам еще несколько вариантов.
Типография
Большинство систем дизайна включают всего 2 шрифта: 1 шрифт для заголовков и основного текста и моноширинный шрифт для кода. Сохраняйте простоту, чтобы не перегружать и не сбивать с толку пользователя. Снизьте количество шрифтов; это не только хорошая практика типографского дизайна, но и предотвращение проблем с производительностью, вызванных чрезмерным использованием веб-шрифтов.
Размеры и интервалы
Система, которую вы используете для расстановки интервалов и размеров, выглядит лучше всего, когда у вас есть ритм и баланс. Шкала на основе 4 набирает популярность как рекомендуемая шкала из-за ее использования в стандартах iOS и Android, форматах размеров ICO и даже в стандартном размере шрифта браузера.
Изображения
Ключ к успеху с изображениями в вашем языке визуального дизайна — это иметь план и придерживаться его. Установите рекомендации для иллюстраций и значков и используйте по возможности изображения лучшего качества.

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

Документируйте каждый компонент и когда Вы его используете
Этот шаг важен. Документация и стандарты — вот что отличает библиотеку шаблонов от настоящей системы проектирования.
Прежде чем приступить к работе над своей дизайн-системой, подумайте о команде, которая вам понадобится, чтобы воплотить ее в жизнь. Кого нужно задействовать? Осторожно, спойлеры! Вам понадобятся не только дизайнеры.

Инструменты управления и поддержки Дизайн-систем
Figma позволяет дизайнерам создавать библиотеки пользовательского интерфейса, которые синхронизируются через облако. Компоненты можно искать, перетаскивать и бросать прямо на рабочую область. У них также есть маркеры цвета и шрифта, которые можно использовать в команде, чтобы обеспечить согласованность дизайна. Доступ к системе дизайна осуществляется через приложение Figma, но и другие сотрудники также могут использовать веб-приложение бесплатно для доступа к системе дизайна.