Дизайн система это что

Что такое дизайн система? 4 шага по созданию дизайн системы

Что такое дизайн система, как создать дизайн систему и что вы должны учитывать в процессе ее создания? На эти вопросы ответим в этой статье.

Дизайн система являются ключом к оптимизации подхода команды к дизайну и расширению полномочий дизайнеров. Это позволяет интегрировать в продукт все ценности и видение бренда. Половина профессионалов в области дизайна говорят, что компании, в которых они работают, уже используют дизайн систему.

Стоит отметить, что этап внедрения и создания дизайн системы может привнести дополнительные трудности в согласовании и масштабировании продукта.

Что такое дизайн система?

Дизайн система — это постоянно развивающиеся наборы повторно используемых компонентов, принципов и рекомендаций, которые дают дизайнерам и разработчикам. По сути это общий язык для согласования разработки и веб-дизайна.

Существует распространенное заблуждение, что дизайн системы это тоже самое, что и UI-kit или стайлгайд, но это не так. UI-kit и стайлгайд, безусловно, являются важными компонентами дизайн системы, но это всего лишь ключевые элементы более цельной сущности.

Реальная ценность дизайн системы заключается в ее способности давать дизайнерам и разработчикам рекомендации, необходимые для создания более удобного пользовательского интерфейса и цифровых продуктов. Хорошие дизайн системы помогают дизайнерам понять, что и как нужно делать, а также обеспечивают обоснование и мотивацию для определенных дизайн решений.

Что такое дизайн система? 4 шага по созданию дизайн системы

Что входит в дизайн систему?

Стандартного списка компонентов, которые включают в дизайн систему не существует, но есть общие элементы, которые, как правило, присутствуют в наиболее эффективных дизайн системах:

Читайте также:

Какие преимущества дает дизайн система

Есть три основных преимущества, которые делают создание дизайн системы полезным для вашего бизнеса:

Создание дизайн системы

Основные шаги создания дизайн системы

Существует четыре основных шага, которые необходимо выполнить, чтобы создать дизайн систему.

1. Аудит существующего продукта

Просмотрите на свой продукт и выделите все элементы его дизайна. Отсюда вы можете создать каталог UI компонентов и различных визуальных элементов, которые лягут в основу вашей дизайн системы. Кроме того, вы можете выявить любые противоречия в дизайне, которые могли возникнуть, и принять соответствующие проектные решения на будущее.

2. Определите свой язык дизайна

Установите четкие принципы того, как вы видите свой продукт, и разработайте рекомендации по воплощению этих принципов в жизнь. Принципы дизайна определяют видение вашего продукта, в том числе то, как вы хотите, чтобы клиенты чувствовали себя при его использовании.

Язык визуального дизайна, который вы выбираете для своей общей системы дизайна, включает рекомендации по цветовым палитрам, типографике, иконкам и изображениям. Эти элементы работают вместе, чтобы создать впечатление о вашем бренде и передать желаемые эмоции вашим клиентам.

3. Создайте библиотеку из общих элементов дизайна

Ваша библиотека шаблонов представляет собой набор повторно используемых UI компонентов, которые в будущем упростят создание дизайна.

Существует два основных типа шаблонов — функциональные и перцептивные (UX и UI). Они работают вместе, образуя строительные блоки вашего дизайна. Функциональные шаблоны определяют структуру вашего дизайна, например, внутреннюю компоновку, в то время как перцептивные шаблоны определяют визуальную составляющую — например такую как типографика, цвета, кнопки и т.д. Вместе эти шаблоны образуют библиотеку, которая структурно обоснована и отражает эмоции и эстетику бренда.

4. Документация дизайн системы

Дизайн система должна содержать четкие указания о том, как и когда использовать элементы дизайна. Если этих указаний нет, то скорее у вас не дизайн система, а просто набор UI элементов и библиотек. При создании дизайн системы обязательно документируйте методы, позволяющие командам эффективно использовать и поддерживать ее. Вот какие инструкции следует включить в документацию дизайн системы:

Таким образом, четкие принципы и рекомендации, описанные в документации дизайн системы, позволяют командам работать быстрее и эффективнее.

Частые проблемы при создании дизайн систем

Создать дизайн систему довольно нетривиальная задача. Существует ряд проблем, которые приводят к провалу:

Выбор отправной точки

Масштабы инициативы по разработке дизайн систем могут быть ошеломляющими, поэтому трудно понять, с чего начать создавать систему. Если у вас нет четкого плана атаки, то бизнес аналитики или продакт менеджеры могут не поддержать идею создания дизайн системы. Важно наметить свой подход и составить план задолго до того, как начнется создание системы.

Организация команды

На ранних стадиях вам необходимо собрать правильную команду дизайнеров и разработчиков, которые будут отстаивать инициативу и продвигать ее вперед. Не приглашайте слишком много поваров на свою кухню. 🙂 Начните работать с небольшой группой человек, которой вы доверяете и которая будет самоотверженно работать над дизайн системой.

Создание документации

В документации должно быть описано как использовать различные элементы дизайн системы. Это сэкономит время вашей команды и обеспечит согласованность между командами. Однако создание документации может оказаться непростой задачей. Приступая к работе, убедитесь, что вы уделяете достаточное внимание описанию всех компонентов, так как ошибки могут привести к дублированию работы и несоответствиям, что в свою очередь сделает дизайн систему неэффективной.

Согласованность дизайна и разработки

Помимо того, что ваша дизайн система должна выглядеть привлекательно, но она также должна быть понятной для разработчиков. Все недостатки в дизайн системе выявятся при передаче дизайн системы разработчикам, которые будут внедрять ее в проект и поддерживать. Когда вы создаете свою дизайн систему, обязательно держите в поле зрения конечных пользователей — как ваших разработчиков, так и ваших клиентов.

Примеры дизайн систем

Черпайте вдохновение для своей дизайн системы из примеров ниже. Они дадут вам понимание правильной концепции.

Atlassian

Дизайн систему Atlassian часто называют образцовой, и не без оснований. Она включает в себя все, что может понадобиться команде дизайнеров и разработчиков — от библиотек компонентов и шаблонов, до глубокого понимания бренда Atlassian, стилистических основ и контента.

Ростелеком

На пространстве рунета стоит выделить дизайн-систему Ростелекома. Она объединила в себе ценности бренда, единый опыт цифровых продуктов компании, а так же широкий набор визуальных приемов и инструментов.

Лучшие дизайн системы всегда развиваются

Хорошие дизайн системы — это динамичные системы, которые легко адаптируются к росту и изменениям компании. Настоящая магия дизайн систем заключается в минимизации дублирования усилий дизайнеров и программистов, которые воплощают продукт в жизнь.

Источник

Как устроены и зачем нужны дизайн-системы

Мнение арт-директора Яндекса Ильи Михайлова

Дизайн-система — это визуальное ДНК компании, благодаря которому пользователи узнают её продукты, а дизайнеры и разработчики не тратят времени на создание одинаковых элементов. Арт-директор Яндекса Илья Михайлов рассказал Академии, зачем применять дизайн-системы, как они устроены в Яндексе и что делать стартапу, который создаёт визуальный стиль с нуля.

Как устроены дизайн-системы

Несмотря на громкое название дизайн-система — это только один из инструментов дизайнера и продуктовой команды, а не серебряная пуля или волшебный пропуск в мир «больших проектов». Этот термин иногда навешивают на стандартные гайдбуки или обосновывают им завышенную стоимость разработки. Но за счёт хорошей дизайн-системы компания может сэкономить благодаря переиспользованию элементов или визуально связать разрозненные продукты.

Канонического определения дизайн-системы нет, — как и требований, которым она обязательно должна отвечать. Существуют верхнеуровневые принципы которые отражают философию компании: например, продукт должен соответствовать таким свойствами, как «свой», «простой», «удобный», «умный», «современный», «уважающий пользователя». На втором уровне дизайн-систем идёт специализация. Например, для объектов промышленного дизайна описываются принципы заметности и незаметности, консистентности со средой, инновационности. Третий уровень — правила вербальной и невербальной коммуникации и дизайн-подсистемы (отдельные онлайн-сервисы, объекты среды, коммуникационные материалы).

Когда такая структура накладывается на продуктовую экосистему большой компании, то мы получаем динамический хаос — ее составные части влияют друг на друга, дополняя и переопределяя отдельные сущности. Возможно, со стороны это выглядит не так эффектно, как тщательно спланированные и застывшие во времени «регулярные сады».

Лучезарный город, Ле Корбюзье, 1931.

Но именно это позволяет сервисам постоянно развиваться, экспериментировать, оставаться актуальными и визуально пластичными.

Для небольшого проекта может быть достаточно «наносистемы» — указания, откуда скачивать правильный логотип и на каком фоне его использовать. Такое решение для дизайн-задач тоже правильно. Если команда состоит всего из двух дизайнеров, то они и так знают, где и какие элементы используются. В этом случае не нужно создавать страницу с описаниями кнопок и шрифтов — на это уйдёт больше времени, чем на реальную работу.

У Яндекса нет одной дизайн-системы. Это конфедерация систем, объединяющих несколько смежных продуктов. Каждая из них постоянно развивается — и делает это со своей скоростью. Например, есть Лего (дизайн система, отвечающая за портальный стиль Яндекса), включающее библиотеки портальных блоков (кнопки, цветовые палитры, шрифты, поля ввода, пиктограммы, поисковые и непоисковые шапки, анимации и многое другое, из чего можно собрать большинство интерфейсов). По умолчанию, стиль лего-блоков — это то, с чем в первую очередь ассоциируются продукты Яндекса:

С помощью модификаторов эти элементы преобразуются под задачи конкретного продукта:

Если в библиотеке не хватает каких-то блоков, то ее всегда можно дополнить:

Понятно, что разработать новый блок для библиотеки сложнее, чем просто собрать его под конкретный проект (как в примере с календарём слева). Этим следует заниматься, если:

Лего — это большая, надёжная машина, где все блоки многократно тестируются и эволюционируют. Используя эти библиотеки, ты получишь предсказуемый результат.

Поможет ли дизайн-система стартапу?

А если ты в «долине неопределенности»? Есть продукты, которые проходят стадию эксперимента. Им ещё предстоит подтвердить свою состоятельность, поэтому надо быть готовым быстро двигаться, проверять самые разные гипотезы, и менять визуальный стиль на ходу.

Как вариант, можно начать проектировку на любой открытой библиотеке, быстро, на готовых блоках, собрать MVP-версию, а дальше, используя модификаторы, искать свой визуальный язык. И если этот новый стиль будет хорошо работать не только в локальном проекте, но и в смежных — занести его в Лего, расширив инструментарий дизайнера.

Или сразу начать кастомную проектировку, выиграв на старте. А потом, найдя подходящие решения, долго переписывать всё под одну из существующих дизайн-систем, обогащая её графическими решениями или интерфейсными паттернами.

Например, Яндекс.Афиша еще год назад использовала стандартные «яндексовые» визуальные ходы в своих маркетинговых материалах. И проигрывала конкурентам в заметности — особенно, на постерах. Новый стиль базируется на яркой цветовой палитре, выразительной типографике и агрессивном логотипе с вариативной «А». Он хорошо заметен и на фоне пёстрых афиш, и в городской среде.

Новый графический ход? Скорее, логичное продолжение cтиля остальных оффлайн-сервисов Яндекса:

Как эволюционируют дизайн-системы

Любой продукт живёт в рамках окружающей его среды. И более 90% изменений связаны с внешними факторами. Это может быть и выход на новые рынки, когда нужно дистанцироваться от конкурента, и эволюция вкусов пользователей, и появление новых технологий. Часть изменений связана с развитием, взрослением самого продукта (большой, зрелый сервис не всегда может разговаривать с людьми, как годовалый стартап) или коррекцией стратегии.

Изюминкой трансформации дизайн-системы служит личность продакт-менеджера или дизайнера, который отвечает за продукт. Именно она становится катализатором изменений за пределами брифа и продуктовых метрик. Новатор выходит за рамки и тестирует на прочность новые нормы. Это следует делать аккуратно, но без этого система будет пресной, всего лишь «очередной» дизайн-системой.

Источник

Дизайн-система: что это и в чем ее ценность для продукта и экосистемы | Глава 1

Объясняем на примерах, зачем нужна дизайн-система, какие преимущества она даёт и кто оценит ее возможности.

Специализируется на дизайне b2b-сервисов и проектировании пользовательских интерфейсов. Публикует материалы об UX и сервис-дизайне. Активно осваивает бренд-дизайн.

Дек 4, 2020 · 11 мин читать

(Перед вами бесплатный курс от InVision Studio «Дизайн-системы. Погружение». В курсе 7 глав, в которых доходчиво и на наглядных примерах создатели дизайн-систем в Atlassian, Salesforce, LinkedIn, Shopify, Amazon, Etsy и GitHub отвечают на вопросы: зачем нужна дизайн-система, какие преимущества она даёт и кто особенно оценит ее в работе).

Автор оригинальной главы Marco Suarez — создал руководство по бренду для Facebook. Опыт проектов с Grab, Toasts и Brightwater.

Содержание:

В 1960-х годах компьютерные технологии начали опережать скорость разработки программного обеспечения. Компьютеры становились мощнее и дешевле, но процесс разработки программного обеспечения оставался все еще слишком медленным, сложным в обслуживании и напичкан ошибками на каждом шаге. Этот этап в истории стал известен как «Кризис программного обеспечения».

А в 1968 году на конференции НАТО по программной инженерии Дуглас Макилрой (Douglas McIlroy) представил компонентный подход к разработке ПО как возможное решение этого вопроса. Данный подход позволил увеличить скорость создания программных систем за счет того, что код теперь можно было быстрее повторно использовать. Такое решение сделало процесс более эффективным и легким в масштабировании. Компонентный подход снизил затраты и увеличил скорость разработки программного обеспечения, что в итоге позволило программному обеспечению эффективнее использовать мощности современных компьютеров.

Теперь, 50 лет спустя, мы сталкиваемся с аналогичной проблемой, но на этот раз в дизайне. Дизайн с трудом масштабируется с приложениями, на которых вертится, так как он все еще разрабатывается под заказ — все это выглядит, как частные решения для частных задач и ситуаций.

Вы когда-нибудь проводили аудит пользовательского интерфейса и обнаруживали, что в системе используется несколько десятков похожих оттенков синего или разные варианты одной и той же кнопки? Умножьте это на каждый кусочек пользовательского интерфейса в своем приложении, и вы начнете понимать, насколько непоследовательным, неполным и сложным в поддержке стал ваш дизайн.

Рисунок 1. UI Аудит помогает увидеть множество вариаций пользовательского интерфейса. После такой процедуры легко заметить дизайн-долг.

Чтобы дизайн в таком состоянии не отставал от скорости разработки, компании могут выбрать 1 из 3 стратегий:

Даже если в команде станет больше рук, и они будут работают быстрее, реальность такова, что сделанный на заказ дизайн (без учета развития) масштабируется крайне сложно. Уникальный дизайн, сделанный под конкретные случаи (без учета развития), со временем все труднее поддерживать.

Дизайн-системы призваны помочь командам ускориться в разработке и поднять качество продуктов на новый уровень. Дизайн-системы помогают увеличить количество повторно используемых компонентов и достичь легкости в масштабировании. Именно этот аспект и есть сердце и главная ценность дизайн-систем.

Дизайн-система — это набор повторно используемых компонентов, направляемых четкими стандартами, которые можно собрать вместе с целью создания любого количества приложений. За более, чем 50 лет, инженеры наладили свою работу. Пришло время и дизайнерам полностью реализовать свой потенциал и присоединиться к ним.

Масштабирование дизайна и системное мышление

Дизайн-системы все еще очень горячая тема в индустрии программного обеспечения — и на это есть причины. Дизайн шагает по миру. Многие компании вкладывают в него ресурсы, поскольку осознают, что клиентский опыт их продуктов — это конкурентное преимущество. Именно пользовательский опыт привлекает и удерживает клиентов и снижает расходы на поддержку.

Вот как обычно развиваются события в компании, которая вкладывается в дизайн:

С позиции дизайнера, такие вложения в дизайн могут показаться захватывающими, но это также связано с множеством вызовов, которые предстоит преодолеть.

К примеру, как вы будете создавать согласованные пользовательские интерфейсы под разные платформы, когда несколько команд развивают различные части ваших продуктов?

Еще вопрос, как вы поможете всем этим командам ускорить циклы релизов? А также как вы планируете разбирать дизайн-долг, который, как ни крути, накапливается по мере того, как команды дизайнеров создают новые уникальные дизайн-решения?

Чтобы понять, как создание дизайн-системы помогает решить эти проблемы, мы должны сначала разобраться с тем, что же такое дизайн-системы. Дизайн-системы объединяют две концепции с индивидуальными достоинствами каждой, создавая в итоге нечто более мощное.

«Было нетрудно указать дизайнерам следовать гайдлайнам, но было чертовски трудно донести им важность делать это и добиться их согласия».

Lori Kaplan, ATLASSIAN

Стандарты

Понимание не только того, что, но и почему стоит за дизайн-системой, имеет решающее значение для создания блестящего пользовательского опыта. Определяете, соблюдаете и развиваете стандарты — вот как проверяется понимание не словом, а делом. Такой подход устраняет субъективность и двусмысленность, которые часто создают трения и путаницу в группах разработчиков.

Конечно, понимание технических тонкостей под капотом пользовательского интерфейса Macintosh — ключевой фактор в дизайне продукта, но именно понимание теории, лежащей в основе пользовательского интерфейса, помогает дизайнерам биться за отличный продукт.

Стандарты охватывают как дизайн, так и разработку. Стандартизация таких вещей, как соглашения о наименованиях, требования к доступности (accessibility) и структура каталогов, поможет командам работать согласованно и снизить количество ошибок.

Визуальный язык — это ключевая часть дизайн-системы. Определение цели, цвета, формы, шрифта, иконок, работа с пространством и движением имеет важное значение для создания согласованного с брендом и единообразного взаимодействия с пользователем. Каждый компонент дизайн-системы прошит этими элементами, и каждый из них играет в нем существенную роль в выражении индивидуальности бренда.

Без стандартов решения становятся похожими на свободное искусство, и их трудно критиковать. Такая тактика крайне сложно масштабируется, и к тому же создает непоследовательный и разочаровывающий пользовательский опыт.

Профессиональный лайфхак

Платформа Transcend. Ваш визуальный язык может выходить за рамки платформ, раскатываясь по всему интернет-пространству, iOS, Android-платформам и электронной почте. Опишите и доносите до каждого участника команды ваш визуальный язык. Для этой цели можно даже создать отдельный сайт, как делают многие компании. Такой подход помогает держать в курсе всю команду о том, как компоненты должны выглядеть и работать.

Например, Google Material Design глубоко погружает во все аспекты их визуального языка. Зацените их страницу про культуру применения цвета.

Компоненты

Компоненты — это части повторно используемого кода в вашей системе, они – строительные блоки интерфейса вашего приложения. Компоненты различаются по сложности. Упрощение компонентов до одной функции, например кнопки или раскрывающегося списка, повышает их гибкость и делает их пригодными для повторного применения. Сложные компоненты, такие как таблицы, могут хорошо служить для определенных кейсов (вариантов использования), но их сложность делает их заложниками ограниченного количества сценариев использования. Чем больше возможностей повторного использования заложено в ваши компоненты, тем меньше вы будете заниматься поддержкой и сопровождением (отвечать на кучи вопросов и делать правки), и тем легче будет проходить масштабирование.

Дополнительные сведения о создании компонентов описаны в главе 3: «10 ключевых принципов хорошей дизайн-системы».

Компонентный подход к разработке снижает технические расходы, помогает сделать код повторно используемым. Стандарты регулируют цель, стиль и использование этих компонентов. Такой подход помогает снабдить всю продуктовую команду годной в использовании дизайн-системой и дать всей команде ясный ответ на вопросы что и почему.

Ценность дизайн-систем

Далее вы на примерах увидите, в чем сила дизайн-системы, какие значимые преимущества она дает и кому дизайн-система особенно полезна.

Обеспечивает масштабируемость дизайна

Команды дизайнеров частенько концентрируются на отдельных модулях приложения, таких как поиск и обнаружение, управление учетными записями и многое другое. Такой подход приводит к фрагментированному визуальному языку — выходит эдакая Вавилонская башня дизайна — когда каждый дизайнер говорит на своем языке. Так происходит, потому что дизайнеры подходят к решению задач и устранению проблем с собственным особым подходом, а не системно.

Без общей дизайн-культуры и единого дизайн-языка, объединяющего продукт, пользовательский опыт начинает ухудшаться, как и сам процесс проектирования. Критика дизайна с целью развития становится непродуктивной, так как не хватает дизайнерских договоренностей и соглашений. Добиться согласованности внутри команд помогает общий источник истины — место, куда можно отправить для изучения официальных шаблонов и стилей.

Чаще всего это статический артефакт, эдакий новенький макет дизайна, но все-таки статичный эталон почти сразу устаревает. Вот почему команды создают что-то более фундаментальное, к примеру живые ресурсы, такие как Shopify Polaris — сайт системы дизайна, созданный вместе с системой. На таком ресурсе задокументированы все аспекты дизайн-системы, включая компоненты, гайдлайны и лучшие практики UX. И поскольку он построен с помощью системы, он всегда будет актуальным.

Сайт дизайн-системы — лучший и самый доступный источник истины для продуктовых команд. Такой подход помогает добиться притяжения участников команды и их согласованной работы.

Дизайн-система организует управление дизайн-долгом

По мере того, как продуктовые команды развивают приложения, они накапливают долг. Этот долг не финансовый, а технический и дизайнерский. Долг копится из-за гонки за краткосрочными целями. Дизайнерский долг складывается из перенасыщения одноразовыми и несовместимыми стилями и соглашениями. Со временем долг становится настолько большим, что рост продукта замедляется очень сильно.

Применение дизайн-системы позволит вам взять ситуацию под контроль, уменьшить расходы на дизайн и код, и в то же время поможет вам ускорить рост и развитие приложения.

Задает последовательный процесс проектирования дизайн-решений

Стандартизация компонентов, поддержание их целостности, стремление к повторному использованию помогают создавать предсказуемые и простые для понимания приложения. Стандартизация компонентов также помогает дизайнерам сжигать меньше времени на стиль и вкладывать больше энергии в разработку лучшего пользовательского опыта.

Ускоряет прототипирование интерфейсов

Работа в рамках существующей дизайн-системы позволяет комбинировать сценарии и интерактив так же быстро, как вынимать блоки LEGO из корзины. Это позволяет создавать бесконечное количество прототипов и вариантов для экспериментов, помогая вашей команде быстрее добывать инсайты и данные о настоящих пользователях.

Помогает проворачивать циклы итераций быстрее

Независимо от того, развиваете ли вы стиль вашего пользовательского интерфейса или вносите изменения в UX, применение дизайн-системы сокращает усилия с сотен строк кода до нескольких символов. Это ускоряет итерации фантастически и снимает головняк, а еще помогает экспериментировать в разы быстрее.

Прокачивает юзабилити

Разрозненные соглашения о проектировании интерфейса бьют по юзабилити. С каждым новым уникальным элементом интерфейса растет и количество уникальных CSS-стилей, что ведет к увеличению нагрузки на сознание пользователя, технического веса страница и ее скорости отдачи. Все это вместе создает ужасный пользовательский опыт. А еще может приводить к конфликтам CSS и JavaScript, которые потенциально могут нарушить работу вашего приложения. Применение дизайн-систем, поможет вам избежать этих конфликтов, а также позволит создать целостную библиотеку компонентов. В общем такой подход поможет тратить меньше времени на обеспечение качества.

Помогает соблюдать принципы доступности интерфейсов для людей с ограничениями по здоровью

Доступность может быть реализована на уровне компонентов путем оптимизации для людей с ограниченными возможностями, для медленного интернета-соединения или для старых компьютеров. Это плюс один в удобстве использования. В главе 3 «10 ключевых принципов хорошей дизайн-системы» Katie Sylor-Miller объясняет, как дизайн-системы могут помочь улучшить доступность вашего продукта и привести его в соответствие к законам вашей страны.

Мифы о дизайн-системах

Дизайн-система дает целый спектр преимуществ, но несмотря на это продать саму идею о ее внедрении команде крайне сложно. Дизайнеры начинают тут же чувствовать себя ограниченными или сдерживаемыми, но эти предполагаемые недостатки и являются самыми сильными сторонами дизайн-системы.

Давайте развенчаем распространенные мифы, которые вы услышите, продавая идею создания дизайн-системы.

Миф 1: Дизайн-система ограничивает и сковывает

Миф: дизайнеры, ответственные за развитие определенных модулей приложения, глубоко понимают специфику и контекст работы конкретных модулей, поэтому воспринимают универсальный подход ко всей системе поверхностным, ограничивающим и сдерживающим стремление к блестящему пользовательскому опыту.

Реальность: дизайнеры частенько создают собственные решения с целью улучшить определенные области приложения, но при этом наращивают дизайн-долг и технический долг. С помощью дизайн-системы можно создавать новые решения и сделать их доступными каждому в команде.

Миф 2: Дизайн-система снижает креативность

Миф: если дизайнеры ограничены использованием дизайн-системы, они больше не смогут свободно исследовать стиль. Бэклоги фронтэнд-разработки больше не будут полны обновлениями. Развитие визуального стиля приложения встанет. А еще это просто большой риск, поскольку тянет ресурсы от работы над новыми функциями и скажется негативно на удобстве использования.

Реальность: компоненты дизайн-системы взаимозависимы. Это означает, что когда изменение производится в одном месте, изменение будет унаследовано по всей системе. Это делает обновление стиля в системе тривиальным, но гораздо более действенным. То, что раньше делалось неделями, если не месяцами, теперь можно сделать за полдень.

Миф 3: Один раз сделаешь дизайн-систему хорошо и всегда будет хорошо

Миф: как только дизайн-система спроектирована и построена — работа завершена.

Реальность: дизайн-система — живая система, а это значит, что она будет требовать постоянного обслуживания и улучшений по мере необходимости. Однако, поскольку ваше приложение работает на повторно используемых компонентах вашей системы, оно автоматически наследует улучшения системы, что снижает усилия по поддержке приложения. Это и есть сила масштабирования, которую предлагает дизайн-система.

«Наше видение на старте касалось визуальной идентичности… только спустя время мы начали понимать, что это должна быть система с действительно сильными основами дизайна взаимодействия».

Rich Fulcher, GOOGLE

Вывод и рекомендация

Дизайн-системы — это уже не прихоть и даже не гипотеза. Дизайн-системы помогают добиться масштабирования дизайна, его соответствия быстрорастущим технологиям, а разработка на основе компонентов — это проверенное и надежное решение.

Теперь, когда вы увидели истинную ценность создания дизайн-системы, давайте в погрузимся в сам процесс создания дизайн-системы.

Источник