Дизайн-система — это структура, которая включает визуальные компоненты, библиотеку кода и гайдлайны по использованию.
Часто начинающие дизайнеры допускают ошибку и упрощают понятие, подразумевая под дизайн-системой только UI-кит — документ, в котором собраны графические элементы интерфейса, типографика и цвета.
Дизайн-система состоит из трёх уровней:
● UI-кит — визуальный язык продукта, под который создаётся дизайн-система. Это цвета, шрифты, иконки, кнопки, буллиты, тумблеры, слайдеры, изображения, анимация. Элементы бывают разными и зависят от специфики цифрового продукта. Все они помогают создать видимую часть интерфейса, с которой взаимодействует пользователь.
● Фреймворк — библиотека кода, которая написана под каждый из этих элементов, а также плагины для анимации, теги и метки для навигации.
● Гайдлайны — набор шаблонов и правил использования элементов, которые упорядочивают процесс работы. Благодаря гайдлайнам к простым задачам не привлекают дизайнера, а сразу подключают разработчика.
На курсе «Дизайнер интерфейсов» студенты учатся создавать графические элементы, работать с цветом, типографикой и адаптивным дизайном — базовыми составляющими дизайн-системы.
Единой классификации не существует, но специалисты выделяют два вида дизайн-систем — с открытым и закрытым кодом.
В системах с открытым кодом любая компания может использовать материалы и адаптировать их для своих проектов — менять цвета кнопок, шрифты, иконки. Например, в системах Ant Design, Human Interface Guidelines, Material Design.
Дизайн-системы с закрытым кодом обычно создаются для конкретной компании или продукта. Это или полностью закрытые материалы, доступные только сотрудникам, или открытые частично.
Анна Грязева
Дизайнеру, особенно начинающему, не стоит создавать дизайн-систему или UI-кит с нуля. Можно поискать готовые элементы в открытом доступе и адаптировать их для своего проекта. Проектирование компонентов занимает много времени и требует навыков для решения такой задачи. Для дизайнера и потом для разработчика будет проще воспользоваться готовыми материалами.
Например, дизайн-системы можно увидеть у банков, которые создают и развивают много сервисов в рамках одной экосистемы: приложение для частных клиентов, приложение для бизнеса, приложение для инвестиций, официальный сайт.
Системы создают общую визуальную картину бренда и передают его ценности, которые понятны каждому сотруднику и клиенту. Некоторые дизайнеры считают, что дизайн-система — это не просто структура и библиотека полезных материалов, но и целая философия.
Преимущества
✅ Автоматизация работы. Готовые компоненты и шаблоны позволяют дизайнерам и разработчикам оперативно создавать страницы сайтов и приложений.
✅ Централизация знаний. Когда в компанию приходит новый дизайнер или разработчик, ему не нужно рассказывать, какие элементы используются и по каким принципам строится проект. Это уже зафиксировано в дизайн-системе, с которой просто нужно ознакомиться. В этом есть и польза для бизнеса — процесс работы и создания новых макетов не останавливается.
✅ Консистентность продуктов. Дизайн-система поддерживает единый стиль каждой страницы сайта или приложения. Дизайнерам и разработчикам в команде будет понятно использование элементов, а пользователям будет проще взаимодействовать с сервисом.
✅ Синхронизация работы. Благодаря дизайн-системе не нужно писать большое техническое задание, достаточно сослаться на конкретный пункт из гайдлайна.
✅ Внимание к User Experience. С готовой дизайн-системой у дизайнера больше времени, чтобы подумать над логикой интерфейса и опытом пользователей.
Недостатки
❌ Дороговизна. Создание дизайн-системы требует больших финансовых вложений. Над её созданием работает целая команда из разработчиков, дизайнеров, продакт-менеджеров, маркетологов.
❌ Отсутствие мобильности. Если понадобится полностью изменить фирменный стиль компании, то каждое решение должно отразиться в дизайн-системе — новые элементы, новая библиотека кода, новые правила. Для ребрендинга задействуется много ресурсов.
❌ Работа по шаблону. Творчества и креатива будет меньше. Если дизайнеру нравится усердно создавать каждый элемент и придумывать что-то особенное для внешнего вида продукта, то, скорее всего, работать в рамках дизайн-системы и её чётких законов будет некомфортно. Если дизайнеру, наоборот, нравится заниматься логикой продукта, алгоритмами и пользовательскими сценариями, то проблем не возникнет.
Структура дизайн-системы:
● Атомы — самые маленькие компоненты: кнопки, иконки, поле ввода, шрифты.
● Молекулы — соединение нескольких простых элементов: две кнопки, заголовок и строка ввода, плашка уведомления, чекбокс и текст.
● Организмы — законченные компоненты: шапка сайта, форма авторизации, карточки товаров, баннер уведомления.
● Шаблоны — макеты страниц без контента: меню, внешний вид сайта.
● Страницы — страницы, заполненные контентом.
Общий алгоритм выглядит следующим образом:
1. Подобрать цветовую гамму, шрифты, задать модульные сетки, выбрать анимацию, изображения и звуки.
2. Создать базовые элементы интерфейса.
3. Спроектировать комбинации элементов и макеты.
4. Оформить список элементов вместе с правилами. В гайдлайне прописать, что за элемент, где используется, какие задачи решает.
Обычно дизайн-системы не создаются с нуля, а строятся на основе уже наработанного материала: UI-китов, гайдлайнов или брендбуков.
Анна Грязева
Дизайн-систему стоит проектировать только в том случае, когда команда почувствовала в этом необходимость. Например, в проекте появилось больше сценариев и элементов, изменилось поведение пользователей, расширилась команда дизайнеров и разработчиков. На этапе небольшого стартапа достаточно иметь UI-кит.
Статью подготовили:
Читать также: