По мере того как интерфейсы цифровых продуктов становятся все более сложными, создателям проприетарного программного обеспечения становится все труднее придерживаться единой концепции дизайна. Для решения этой проблемы нужны дизайн-системы. Это наборы правил и инструментов для создания дизайна, который отражает философию продукта или компании. Разберемся более детально.
Что такое дизайн-система?
Дизайн-система отвечает за единообразие интерфейса для различных программных продуктов. Формально это набор принципов для создания UI (цвета, шрифты, стили и т.д.) и UX. Это единый стандарт для front-end разработчиков и дизайнеров.
Звучит современно, но системы дизайна существовали задолго до этого термина. Каждый, кто интересуется историей архитектуры, наверняка знает, как выглядят здания в стиле барокко. Аналогично в эпоху цифровых технологий сегодня мы легко отличим продукты Apple. Дизайн-систему можно считать готовым набором для «создания новых интерфейсов».
Зачем нужна дизайн-система
Она создается для того, чтобы дизайнеры и разработчики API могли воспроизводить новые продукты без необходимости перестраивать общие шаблоны.
Что до глобальной цели, то дизайн-системы используются компаниями, которые регулярно обновляют и запускают новые программные сервисы, примеры — Google, Apple и т.д. Кстати, здесь вы можете прочитать мнение эксперта о том, как формируются спецификации и требования к дизайну.
Преимущества дизайн-системы
Она приносит компаниям множество выгод: избавляет от необходимости создавать шаблоны с нуля (для описания основных принципов взаимодействия пользователя с интерфейсом), предоставляет широкие перспективы для найма сторонних дизайнеров и фронтендеров (они получат готовый «устав» по созданию интерфейсов).
Для поклонников брендов они снижают порог вхождения, стандартизируя пользовательский интерфейс, для самих брендов — повышают узнаваемость и обеспечивают значительное конкурентное преимущество.
Что касается долгосрочных выгод, то разработка дизайн-систем помогает значительно снизить затраты, связанные с UI-проектированием и разработкой. Также дизайн-система ускоряет запуск продукта и сокращает количество правок, благодаря более жестким спецификациям, которые не дают командам, работающим над проектом, «тыкать пальцем в небо» (особенно если они работают по отдельности).
Немного истории
Дизайн-системы существуют и используются крупными брендами давно и повсеместно. В 1975 году НАСА придумало свой список проектных спецификаций. Одной из первых дизайн-систем считается Material Design от Google, которая была представлена в 2014 году.
Современные дизайн-системы отличаются от своих прототипов тем, что учитывают все параметры современных медиа-устройств. Речь идет о мобильных (и вообще мультиформатных) гаджетах и необходимом для них адаптивном дизайне.
Кому нужны дизайн-системы?
С практической точки зрения они более полезны для дизайнеров. Особенно для тех, кто работает над проектом отдельно от команд разработчиков.
Такие системы обязательны для компаний, которые выпускают фирменные программные продукты и стремятся повысить их узнаваемость среди целевой аудитории. Любой компании по разработке программного обеспечения, которая стремится:
- ускорить время вывода на рынок каждого продукта;
- упростить взаимодействие между командами специалистов;
- повысить узнаваемость бренда,
Кто разрабатывает дизайн-системы?
Эта обязанность обычно возлагается на проектные группы, команды разработчиков или фронтендеров. Иногда к этой процедуре привлекаются дизайнеры. Список спецификаций дизайн-системы невозможно исчерпать, по мере появления новых UI-элементов он будет расширяться.
Элементы дизайн-системы
Из каких элементов состоит система дизайна.
Компоненты
Это абстрактные UI-элементы, которые не детализированы и поэтому могут быть адаптированы для различных продуктов. Это кнопки, формы, поля ввода, окна сообщений и т.д.
Паттерны
Это правила и спецификации, которые унифицируют UX и опыт разработчиков (DX). Они облегчают создание UI-элементов. Примеры: сбор, фильтрация и сортировка данных.
Язык визуального дизайна
Отвечает за стилистическое оформление пользовательского интерфейса: цвета, типографика, шрифты и т.д.
Артефакты
Взаимодействие между тремя вышеперечисленными элементами определяется артефактами — рабочими процессами, которые происходят внутри пользовательского интерфейса. Они помогают фронтендерам выполнить кодовую часть интерфейса.
Как создать систему проектирования: Советы и рекомендации
Самое время узнать, как создать дизайн-систему. Вот пошаговое руководство.
#1 - Создайте набор «строительных блоков»
Прежде чем приступить к созданию дизайн-системы, необходимо определиться с многозадачными элементами, которые можно использовать повторно.
#2 - Согласуйте свой набор компонентов и язык визуального дизайна с командой разработчиков
Чтобы понять, насколько правильно вы выбрали конкретный набор элементов дизайн-системы, необходимо согласовать его с командой разработчиков, чтобы не усложнять им задачу и не делать проект неоправданно дорогим.
#3- Наберите команду с необходимыми навыками
Она должна взаимодействовать с разработчиками и другими специалистами, работающими над проектами на всех этапах их развития. Каждый должен быть достаточно компетентен, чтобы понимать рекомендации разработчиков. Прежде чем нанимать людей, четко определите перечень сложных навыков для каждого из них.
#4 - Определите список технологий
Определитесь с основными технологиями, которые будут задействованы в создании дизайн-системы. Можно обозначить один из готовых продуктов, который в будущем выступит в качестве прототипа для следующих программных решений.
#5 - Выбор цветовой схемы и типографики
Пришло время выбрать цветовую палитру (допустимые оттенки и правила их использования в определенных частях пользовательского интерфейса) и типографику — шрифты и принципы их согласования с элементами интерфейса (не забудьте об их адаптивности под различные параметры экрана). Это легко, если у вас есть готовый набор компонентов.
#6 - Создайте свой собственный набор иконок
Иконки — это графический язык общения между разработчиками ПО и пользователями, который делает интерфейсы понятными для любого языка.
#7 - Сформулируйте основные принципы работы с пространством
Этот этап создания дизайн-системы включает в себя разработку принципов компоновки пространства и размещения отдельных UI-элементов (с учетом адаптивности для разных размеров экрана).
#8 - Создайте первый шаблон
Создайте несколько шаблонов, которые отражают все спецификации, сформулированные на предыдущих этапах. Сосредоточьтесь на согласованности системы — это упростит задачу. Шаблоны необходимо постоянно дорабатывать с появлением новых продуктов и функциональности в существующих решениях.
Используемые инструменты
Три самых популярных инструмента для создания компонентов и языка визуального дизайна:
- Sketch
- Figma
- Illustrator
- XD
В создании паттернов и артефактов поможет Flowmapp — инструмент для воспроизведения типичного поведения различных групп пользователей.
3 всемирно известных примера
Вот несколько всемирно известных примеров дизайна-систем:
- Material Design от Google;
- Дизайн-ресурсы Apple;
- Microsoft Fluent Design System.
Заключение
Разработка дизайн-системы — это комплексный и бесконечный процесс. Хорошо разработанная система дизайна оптимизирует создание новых фирменных программных продуктов и сокращает их бюджет. Если вы хотите создать свою дизайн-систему, воспользуйтесь приведенными выше рекомендациями и инструментами.
Если вам нравится то, что мы публикуем в блоге, и вы хотите поддержать нашу работу, пожалуйста, подпишитесь на нас.
