Небольшая статья для новичков о ценности дизайн-системы в контексте разработки масштабируемых продуктов.
В июне 2014 года компания Google представила миру Material Design и привлекла к себе всеобщее внимание. Вскоре после этого в 2016 году Брэд Фрост ввёл термин «Atomic Design» , который положил начало системе проектирования.
Атомный дизайн облегчил процесс разбиения сложных компонентов на примитивы. Именно тогда каждая организация, ориентированная на дизайн, переосмыслила процесс создания своих собственных цифровых продуктов.
Организации начали разрабатывать систему, которая была бы основополагающей их продукта, вместо того, чтобы каждый раз иметь дело с нюансами пользовательского интерфейса. Microsoft запустила свою дизайн-систему под названием Fluent , IBM выпустила Carbon, а Adobe показала миру Spectrum. Правительством США также была разработана собственная дизайн-система под названием USWDS: United States Web Design System.
Для чего нужна Дизайн-система?
Инновации и технологический прогресс приносят быстрые изменения и новые открытия на рынок. Пользователь постоянно развивается, поэтому организациям необходимо быстро создавать и повторять продукт. Создание более быстрых и масштабируемых продуктов при сохранении согласованного и связного опыта — новый показатель успеха продукта и бизнеса в целом.
Стремление создавать масштабируемые продукты лучше и быстрей привело нас к дизайн-системам.
Давайте рассмотрим Outlook, One-drive и PowerPoint от Microsoft. Все они имеют разные функции и доступны на разных устройствах. Но все они являются последовательными и связными, поскольку регулируются Microsoft Fluent Design System.
С чего начать создание Дизайн-системы?
Чтобы построить дизайн-систему, вы должны начать с уже имеющихся у вас ресурсов: с документирования и понимания существующих компонентов, их контекста и функциональности. Теперь необходимо сделать из этих компонентов примитивы таким же образом, как организм распадается на атомы (см. Atomic Design-Chapter 2 ). Эти примитивы используются для разработки взаимосвязанных и взаимозависимых частей, называемых шаблонами UI. Эти шаблоны будут регулироваться руководящими принципами, которые устанавливаются путём анализа контекста и функциональности.
«Стоя на плечах гигантов».
Такие компании как Google, IBM, Microsoft имеют дизайн-систему с открытым исходным кодом. Многое может быть взято из этих систем.
Построение такой системы — это непрерывный цикл улучшений, который развивается по мере разработки продукта. Если компонент системы проектирования не поддерживает требуемую функциональность или не вписывается в контекст, его следует переработать и добавить вновь, но уже с использованием примитивов.
Что такое Дизайн-система?
InVision приводит следующую дефиницию:
Дизайн-система — это набор компонентов многократного использования, они руководствуются чёткими стандартами и могут быть собраны воедино для создания любого количества приложений.
Дизайн-система — это набор руководящих принципов и компонентов многократного использования с функциональными возможностями для различных устройств, которые ускоряют процесс создания, доставки и повторения продукта. При этом сохраняя качество продукта. Таким образом система состоит из руководств, компонентов, конвенций кодирования и политики, которые управляют системой, с целью облегчить работу.
Вывод
В заключение хочется сказать, что такие системы в первую очередь необходимы для проектирования продуктов. Они продолжают развиваться по мере разработки продуктов.
Как дизайнеры продукта, мы стремимся проектировать быстрее, лучше, масштабней и в этом нам помогает дизайн-система.
Ещё больше статей и новостей в нашем блоге.