Полезные материалы о дизайн-системах
Дизайн-система — термин, который в моде и у всех UI-дизайнеров на устах. Чтобы разобраться, что это и зачем, я перевела обзор полезных материалах по дизайн-системам. Автор — Ведран Арнаутович (Vedran Arnautovic) — ведущий продуктовый дизайнер в Zendesk. Оригинал здесь: «Design System Resources».
Последние пару лет я усиленно собирал по сети публикации о дизайн-системах. Ниже я делюсь ссылками на видео и тексты, которые считаю самыми ценными из всего найденного за время исследования.
Этот контент повлиял на мое понимание темы и на то, как мы с коллегами из Zendesk работаем над собственной системой Garden.
Список не претендует на полноту, но здесь собраны статьи, которые я счел самыми полезными и информативными. Надеюсь, такими же найдете их и вы. Каждый материал я коротко прокомментировал, чтобы вы могли быстрее понять, интересен ли он вам.
Видео
«Дизайн-системы. Когда и сколько?»
Мне очень понравилась формулировка, что к дизайн-системе нужно подходить как к сочетанию правил, ограничений и принципов. Все хорошо объяснено на понятном примере.
Разработка визуального языка в Big Blue
По мере того как дизайн-системы перерастают хайп и укореняются в культуре продуктового дизайна, все важнее становится вопрос, как оценивать их успешность. Спикеры углубляются в эту тему на временной отметке 12:20. IBM использовала качественные и количественные методы исследования, чтобы понять, насколько созданная ими дизайн-система подходила их большой и очень распределенной команде.
Дизайн-системы способствуют распространению принципов доступности. На 17-й минуте 35-й секунде мой коллега Остин Грин (Austin Green) начинает говорить о проектировании в рамках нашей дизайн-системы. Это моя любимая часть доклада, потому что Остин объясняет, как мы встраиваем средства обеспечения доступности (accessibility) в каждый компонент системы. Объяснение хорошо тем, что доступно (улавливаете?) даже неспециалистам в разработке и проектировании.
Вокруг дизайн-систем столько шума и ажиотажа, что так и хочется взять и разработать свою. Из этого выступления вы узнаете, по каким принципам строить дизайн-систему, чтобы она точно прожила долго.
Статьи
Design Systems Handbook («Руководство по дизайн-системам»)
Создавать дизайн каждого продукта индивидуально — это медленно и непоследовательно. Обслуживать его со временем становится все сложнее.
Дизайн-системы позволяют командам создавать более качественные продукты быстрее — за счет повторного использования дизайна и возможности масштабировать его применение. В этом ключевой принцип и главная ценность дизайн-систем.
Прочтите, если…
...вы ищете, с чего начать. Эта статья — просто находка. Она описывает практически все аспекты дизайн-системы и дает фундамент для дальнейшего исследования тем, в которые вы захотите углубиться.
Больше всего мне понравился раздел, где развенчиваются мифы о дизайн-системах. Например о том, что своими излишними ограничениями они убивают творчество.
Для моей работы и текущих задач также оказался очень полезен раздел, посвященный формированию команд и разным моделям участия специалистов.
Why design systems fail («Почему дизайн-системы не достигают цели»)
Ваша дизайн-система должна стать путем наименьшего сопротивления — снижать накладные расходы на разработку, а не увеличивать их. Это жизненно важно.
Прочтите, если…
...вы уже поняли, что дизайн-системы прекрасны, и хотите узнать, как в работе с ними избежать распространенных ошибок. Статья раскрывает главные организационные требования, без которых дизайн-системе не устоять.
Your sketch library is not a design system («Ваша скетч-библиотека — еще не дизайн-система»)
Может прозвучать банально, но надо понимать, что приложение не создашь из одних скриншотов и файлов Sketch.
Прочтите, если…
...вы хотите разобраться, почему разработка дизайн-системы в приложениях типа Sketch — это отличное начало, но далеко не конечная цель.
People over pixels («Люди за пикселями»)
Вот в чем прелесть построения дизайн-системы. Ты принимаешь решение по вопросу один раз, а дальше вся работающая над продуктом команда может сосредоточиться на текущих проблемах клиентов.
Прочтите, если…
...вам интересен пошаговый отчет о том, как распределенная команда сообща переработала дизайн компонентов, которые использовались более чем в 40 продуктах на двух континентах.
Мне понравилось, как они переломили огромную на первый взгляд проблему — за счет командного редизайна нескольких ключевых экранов. Для этого им пришлось нанимать дизайнеров из разных групп. И интересно, что поначалу они разошлись во взглядах и были вынуждены тестировать ворох разных решений, прежде чем нашли предпочтительное.
The most exciting design systems are boring («Лучшие дизайн-системы скучны»)
Когда дизайн-система скучна, она высвобождает дизайнеров и разработчиков для новых задач. В ней решены все вопросы — над больше не нужно думать специалистам.
Прочтите, если…
...вы ищите объяснение, почему дизайн-система — это не просто набор UI-элементов. Я твердо верю в важность руководящих принципов и инструкций, которые раскрывают, что делать (и чего не делать) с компонентами дизайн-системы.
Особенно близко моим взглядами утверждение, что дизайн-система — не повод провести ребрендинг и выкинуть все старое ради новеньких компонентов и фреймворков. Внедрение дизайн-системы — это когда вы находите самые частые, рутинные и значимые взаимодействия и оптимизируете их в рамках существующей системы.
AirBnB: Building a visual language ( «AirBnB: создание визуального языка»)
В сравнении с другими направлениями дизайна, у проектирования ПО мало физических ограничений. Поэтому для любой задачи можно предложить множество решений. Но при таком подходе у пользователя не сложится целостного представления о том, с чем он работает. Как владельцы и дизайнеры продукта, мы должны сами ставить себе ограничения и придерживаться их.
Прочтите, если…
...вам нужно толковое объяснение, зачем создавать дизайн-системы, как это делать и какие от этого плюсы. Статья приводит список причин, почему дизайн-системы необходимы и использовать их — хорошая идея. Наверное, это лучший подобный список из всех, что я видел до сих пор. AirBnB — одни из лидеров в этой области, так что их мнение достойно внимания. А еще в статье отличные цитаты о дизайн-системах и их преимуществах.
Интереснее всего часть текста, где обсуждается определение более крупных компонентов, чем элементы атомарного уровня.
Designing design systems for complex products («Создание дизайн-систем для сложных продуктов»)
Раньше я обносил свой дизайн множеством ограничительных линий, пояснений и уточнений. Но результат был не очень, потому что дизайнеры не всегда соблюдали установленные мной ограничения.
Прочтите, если…
...вы хотите понять разницу между дизайн-системой и руководством по стилю. Статья написана очень просто и подходит тем, кто только начал вникать в дизайн-системы и их достоинства.
Animation in design systems («Анимация в дизайн-системах»)
Мы относимся к анимации, как к чему-то второстепенному — отчасти потому, что не понимаем всей ее силы. Когда пользователи просматривают фото, сайт и любое окружение, они пытаются мысленно достроить карту пространства вокруг себя. И ничто в этот момент так не управляет вниманием, как движущийся объект.
Прочтите, если…
...вам нужны практические советы, как обосновать и сделать приоритетным включение UI-анимации в вашу дизайн-систему.
Atomic Design («Атомарный дизайн»)
Прочтите, если…
...просто прочтите! Скорее всего, об этой вещи будут говорить как об одной из основополагающих работ по дизайн-системам.
Atomic design: how to design systems of components («Атомарный дизайн: как создать систему компонентов»)
Прочтите, если…
...вам интересно, как один дизайнер реализовал «атомарный дизайн» на практике.
А какие материалы по дизайн-системам нравятся вам?
Надеюсь, вы нашли в этом списке хотя бы один интересный пост или видеоролик. Если у вас на примете есть другие классные источники — пожалуйста, делитесь ими в комментариях.