По мере того, как интерфейсы цифровых продуктов становятся все более сложными, создателям собственного программного обеспечения становится все труднее придерживаться единой концепции дизайна. Для решения этой проблемы используются системы проектирования. По сути, это наборы правил и инструментов для создания дизайна, который отражает философию продукта или компании в целом.
Что такое дизайн-система?
Система проектирования отвечает за единообразие интерфейса для различных программных продуктов. С формальной точки зрения это, как я уже писал выше, набор принципов для составления пользовательского дизайна (цвета, шрифты, стили и т. д.) и пользовательского опыта.
Это единый стандарт для front-end разработчиков и дизайнеров.
Звучит современно, не правда ли? Однако системы дизайна существовали задолго до определения этого термина. Так, каждый, кто интересовался историей архитектуры, наверняка сможет отличить, как выглядят здания в стиле барокко. Точно так же в эпоху цифровых технологий сегодня мы легко можем отличить продукты под маркой Apple.
Таким образом, систему дизайна можно считать готовыми наборами для "построения новых интерфейсов".
Зачем нужна система проектирования
Вообще говоря, дизайн-системы создаются для того, чтобы дизайнеры и разработчики API могли воспроизводить новые продукты снова и снова без необходимости перестраивать общие шаблоны.
Что касается глобального назначения, то системы проектирования используются компаниями, которые регулярно обновляют и запускают новые программные сервисы, примерами могут служить Google, Apple и т.д.
Преимущества дизайн-системы
Очевидно, что система дизайна приносит компаниям множество преимуществ –от устранения необходимости создавать шаблоны с нуля (для описания основных принципов взаимодействия пользователя с интерфейсом) до предоставления широких перспектив для найма сторонних дизайнеров и front-end специалистов (поскольку они получат готовый "устав" по созданию новых интерфейсов).
Для поклонников брендов они снижают порог вхождения, стандартизируя пользовательский интерфейс, для самих брендов - повышают узнаваемость и обеспечивают значительное конкурентное преимущество.
Что касается долгосрочных преимуществ, то разработка дизайн-систем
- помогает значительно снизить затраты, связанные с этапом проектирования и разработки пользовательского интерфейса.
- ускоряет запуск продукта и сокращает количество правок, благодаря более жестким спецификациям, которые буквально не дают командам, работающим над проектом, "ткнуть пальцем в небо" (особенно если они работают отдельно друг от друга).
Немного истории дизайн-систем
Как вы уже поняли, дизайн-системы существуют уже очень давно, и используются крупными брендами повсеместно. В1975 году, NASA придумало свой собственный список спецификаций дизайна. Что касается систем дизайна, которые используются в наше время, то одной из первых единых систем для создания интерфейсов можно считать Material Design от Google, которая впервые была предложена в 2011 году и окончательно сформировалась в 2014 году.
Дизайн системы наших дней отличается от своих прототипов тем, что учитывает все параметры современных медиаустройств. Речь идет, прежде всего, о мобильных (и вообще мультиформатных) гаджетах и необходимом для них адаптивном дизайне.
Кому нужны дизайн-системы?
Очевидно, что с практической точки зрения дизайн-системы наиболее полезны для дизайнеров. Особенно для тех, кто работает над проектом отдельно от команд разработчиков.
Такие системы обязательны для компаний, которые один за другим выпускают фирменные программные продукты и стремятся повысить их узнаваемость среди целевой аудитории. Таким образом, можно утверждать, что любая компания по разработке программного обеспечения, которая стремится:
- ускорить время вывода на рынок каждого следующего продукта;
- упростить взаимодействие между командами специалистов;
- повысить узнаваемость бренда,
- нуждается в системе проектирования.
Кто разрабатывает системы проектирования?
Эта обязанность обычно возлагается на команды дизайнеров, команды разработчиков или команды front-end.
Обратите внимание, что список спецификаций системы дизайна невозможно исчерпать, поскольку по мере появления новых элементов пользовательского интерфейса он будет расширяться.
Элементы системы дизайна
Для начала давайте выясним, из каких элементов состоит система дизайна.
Компоненты
Это абстрактные элементы пользовательского интерфейса, которые не детализированы и поэтому могут быть адаптированы для различных продуктов. Это кнопки, формы, поля ввода, поля сообщений и т.д.
Паттерны
Это правила и спецификации, которые унифицируют UX и опыт разработчиков (DX).Это облегчает создание новых элементов пользовательского интерфейса. Что касается конкретных примеров, то
это сбор, фильтрация и сортировка данных.
Визуальный язык
Это все, что отвечает за стилистическое оформление пользовательского интерфейса: цвета, типографика, шрифты и т.д.
Артефакты
Взаимодействие между тремя вышеперечисленными элементами определяется артефактами - рабочими процессами, которые происходят внутри пользовательского интерфейса.Они помогают front-end разработчикам реализовать кодовую часть интерфейса.
Как создать систему проектирования: Советы и рекомендации
Сейчас самое время узнать, как создать систему дизайна. Вот мое собственное пошаговое руководство для вашего внимания.
Создайте набор "строительных блоков"
Прежде чем приступить к созданию системы дизайна, вам необходимо определиться с многозадачными элементами, которые можно использовать повторно.
Согласуйте свой набор компонентов и визуальный язык с командой разработчиков
Чтобы понять, насколько правильно вы выбрали конкретный набор элементов дизайн-системы, необходимо согласовать его с командой разработчиков, чтобы не усложнять им задачу и не делать проект неоправданно дорогим.
Наберите команду с необходимыми вам навыками
Ваша команда должна взаимодействовать с разработчиками и другими специалистами, которые работают над проектами на всех этапах их развития. Это означает, что каждый из членов вашей команды должен быть достаточно компетентен, чтобы понимать рекомендации разработчиков. Поэтому, прежде чем нанимать людей в свою команду, четко определите список сложных навыков для каждого из них.Определите список технологий
Определитесь с основными технологиями, которые будут участвовать в построении системы проектирования. Вы также можете указать один из готовых продуктов, который в будущем будет выступать в качестве прототипа для следующих программных решений.Выбор цветовой схемы и типографики
Пришло время выбрать цветовую палитру (допустимые оттенки и правила их использования в определенных частях пользовательского интерфейса) и типографику - шрифты и принципы их согласования с элементами интерфейса (не забудьте об их адаптивности под различные параметры экрана). Это легко сделать, если у вас есть готовый набор компонентов системы дизайна.Создайте свой собственный набор иконок
Иконки — это графический язык общения между разработчиками программного обеспечения и пользователями, который делает интерфейсы понятными независимо от того, на каком языке говорит конкретный пользователь.
Формулировка основных принципов работы с пространством
Этот этап составления дизайн-системы включает разработку принципов компоновки пространства и размещения отдельных элементов пользовательского интерфейса (разумеется, с учетом адаптивности для разных размеров экрана).Постройте свой первый шаблон
Наконец, создайте несколько шаблонов, которые отражают все спецификации, сформулированные на предыдущих этапах. Сосредоточьтесь на согласованности системы - это упростит вашу задачу. Также помните, что шаблоны необходимо постоянно дорабатывать, с появлением новых продуктов и функциональности в существуих решениях.
Используемые инструменты
Три самых популярных инструмента для создания компонентов и визуального языка дизайн-систем:- Sketch
- Figma
- Illustrator
- XD
Flowmapp - инструмент для воспроизведения типичного поведения различных групп пользователей.
3 Всемирно известных примера
Вот несколько всемирно известных примеров дизайн-систем:
- Material Design от Google;
- Дизайн-ресурсы Apple;
- Microsoft Fluent Design System.
Заключение
Как видите, разработка системы дизайна — это комплексный и бесконечный процесс. В свою очередь, хорошо разработанная система дизайна должна оптимизировать создание новых фирменных программных продуктов и сократить их бюджет. Если вы хотите создать свою собственную систему проектирования, просто воспользуйтесь приведенными выше рекомендациями и инструментами.
