Дизайн • 13 января 2023 • 5 мин чтения
Дизайн-система — это философия бренда. Однако не каждый бизнес в ней нуждается. Разбираемся, в чём преимущества системы, когда приходит время её создавать и, главное, как.
Что такое дизайн-система
Дизайн-система — это структура, которая включает визуальные компоненты, библиотеку кода и гайдлайны по использованию.
Часто начинающие дизайнеры допускают ошибку и упрощают понятие, подразумевая под дизайн-системой только UI-кит — документ, в котором собраны графические элементы интерфейса, типографика и цвета.
Дизайн-система состоит из трёх уровней:
● UI-кит — визуальный язык продукта, под который создаётся дизайн-система. Это цвета, шрифты, иконки, кнопки, буллиты, тумблеры, слайдеры, изображения, анимация. Элементы бывают разными и зависят от специфики цифрового продукта. Все они помогают создать видимую часть интерфейса, с которой взаимодействует пользователь.
В гайде компании «Контур», которая занимается разработкой программного обеспечения, собраны все элементы, которые могут понадобиться для проектирования приложений и сайтов
В UI-ките «Контура» представлены разные состояния элементов
● Фреймворк — библиотека кода, которая написана под каждый из этих элементов, а также плагины для анимации, теги и метки для навигации.
Библиотека на React наиболее точно воплощает требования из «Контур.Гайдов» в компонентах
● Гайдлайны — набор шаблонов и правил использования элементов, которые упорядочивают процесс работы. Благодаря гайдлайнам к простым задачам не привлекают дизайнера, а сразу подключают разработчика.
В гайдлайне «Контура» прописаны принципы, правила и частные случаи использования цветов, типографики, модульных сеток, UI-элементов
Например, в гайдлайне прописывают параметры всплывающего окна на сайте: отступы от текста, расположение и величину заголовка и основного текста, место для кнопки, как будет выглядеть окно при меньшем или большем количестве текста.
Виды дизайн‑систем
Единой классификации не существует, но специалисты выделяют два вида дизайн-систем — с открытым и закрытым кодом.
В системах с открытым кодом любая компания может использовать материалы и адаптировать их для своих проектов — менять цвета кнопок, шрифты, иконки. Например, в системах Ant Design, Human Interface Guidelines, Material Design.
В дизайн-системе Ant Design можно выбрать необходимый элемент и скопировать исходный код
Код открывается через программы StackBlitz, CodePen, CodeSandbox и доступен на языках TypeScript и JavaScript
Дизайн-системы с закрытым кодом обычно создаются для конкретной компании или продукта. Это или полностью закрытые материалы, доступные только сотрудникам, или открытые частично.
В дизайн-системе «Сбербанк Онлайн» для общего доступа показаны несколько интерактивных элементов, иконки для скачивания, правила из гайдлайна. Исходного кода нет, ссылки в Figma могут открыть только сотрудники
Анна Грязева
Дизайнеру, особенно начинающему, не стоит создавать дизайн-систему или UI-кит с нуля. Можно поискать готовые элементы в открытом доступе и адаптировать их для своего проекта. Проектирование компонентов занимает много времени и требует навыков для решения такой задачи. Для дизайнера и потом для разработчика будет проще воспользоваться готовыми материалами.
Материал по теме:
Дизайн-мышление: пять шагов, которые помогут создать успешный продукт
Зачем нужна дизайн-система
Дизайн-системы используются для больших проектов с нагруженными интерфейсами, обилием элементов и пользовательских сценариев. Они помогают оптимизировать работу команды на этапах исследования, дизайна и разработки.
Например, дизайн-системы можно увидеть у банков, которые создают и развивают много сервисов в рамках одной экосистемы: приложение для частных клиентов, приложение для бизнеса, приложение для инвестиций, официальный сайт.
Системы создают общую визуальную картину бренда и передают его ценности, которые понятны каждому сотруднику и клиенту. Некоторые дизайнеры считают, что дизайн-система — это не просто структура и библиотека полезных материалов, но и целая философия.
Преимущества и недостатки
У дизайн-системы есть свои плюсы и минусы, которые нужно учесть перед тем, как принимать решение, стоит ли компании её создавать.
Как создать дизайн-систему
Разработка дизайн-систем строится по принципам атомарного дизайна. Атомарный дизайн — методика, которая включает в себя пять уровней проектирования элементов: атомы, молекулы, организмы, шаблоны и страницы.
Начинать проектирование дизайн-системы нужно с самого простого и потом постепенно усложнять
Структура дизайн-системы:
● Атомы — самые маленькие компоненты: кнопки, иконки, поле ввода, шрифты.
● Молекулы — соединение нескольких простых элементов: две кнопки, заголовок и строка ввода, плашка уведомления, чекбокс и текст.
● Организмы — законченные компоненты: шапка сайта, форма авторизации, карточки товаров, баннер уведомления.
● Шаблоны — макеты страниц без контента: меню, внешний вид сайта.
● Страницы — страницы, заполненные контентом.
Общий алгоритм выглядит следующим образом:
1. Подобрать цветовую гамму, шрифты, задать модульные сетки, выбрать анимацию, изображения и звуки.
2. Создать базовые элементы интерфейса.
3. Спроектировать комбинации элементов и макеты.
4. Оформить список элементов вместе с правилами. В гайдлайне прописать, что за элемент, где используется, какие задачи решает.
Обычно дизайн-системы не создаются с нуля, а строятся на основе уже наработанного материала: UI-китов, гайдлайнов или брендбуков.
Совет эксперта
Анна Грязева
Дизайн-систему стоит проектировать только в том случае, когда команда почувствовала в этом необходимость. Например, в проекте появилось больше сценариев и элементов, изменилось поведение пользователей, расширилась команда дизайнеров и разработчиков. На этапе небольшого стартапа достаточно иметь UI-кит.
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
