автордың кітабын онлайн тегін оқу Дизайн в масштабе. Создание устойчивой дизайн-системы
Дэн Молл
Дизайн в масштабе. Создание устойчивой дизайн-системы. — СПб.: Питер, 2025.
ISBN 978-5-4461-4229-3
© ООО Издательство "Питер", 2025
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Отзывы о книге
Для меня как практикующего специалиста по дизайн-системам эта книга станет настольным руководством по созданию и поддержке дизайн-систем по мере их роста.
Афия Смит (Afyia Smyth), менеджер по дизайну, Epic Games
Во время чтения этой книги мне приходилось постоянно прерываться, чтобы тут же давать указания сотрудникам: изменить курс, чтобы обойти подводные камни, или ускорить темп. Это руководство раскрывает тайны дизайн-систем и помогает корпоративным цифровым командам создавать ценность здесь и сейчас.
Дилан Валад (Dylan Valade), ведущий специалист в отрасли, MACH Alliance, DAX 40 (PUMA), Fortune 100 (Abbott)
Дэн разбирает сложные аспекты дизайн-систем и предлагает практичный подход к созданию эффективной системы работы с дизайн-системами в вашей организации.
Кэтрин Гонсалес (Kathryn Gonzalez), бывший руководитель отдела проектирования инфраструктуры в DoorDash
Книга Дэна радикально изменила наш подход к дизайн-системам, приведя к значительным изменениям в компании, и стала обязательным чтением для всех, кто стремится упростить и оптимизировать дизайн-системы любой сложности. Эта книга предоставляет все необходимое, для того чтобы трансформировать вашу дизайн-систему и поднять ее на новый уровень.
Надин Саррадж (Nadine Sarraj), дизайнер продукта, 365 Retail Markets
Магия книги «Дизайн в масштабе» — в формировании базовых привычек и процессов, гарантирующих, что дизайн-система действительно принесет организации долгосрочную пользу.
Тедди Ни (Teddy Ni), соучредитель Mirrorful
Независимо от того, являетесь ли вы новичком в дизайн-системах или опытным специалистом, книга «Дизайн в масштабе» предложит вам ценные идеи не только по созданию дизайн-системы, но и по тому, как эффективно продвигать ее среди пользователей и оценивать ее успех. Эта книга несомненно станет для вас надежным справочником, к которому вы будете регулярно обращаться за рекомендациями.
Адекунле Одуйе (Adekunle Oduye), консультант по дизайн-системам, Бруклин, Нью-Йорк
Книга «Дизайн в масштабе» — это чрезвычайно ценный ресурс, который предлагает дизайнерам, разработчикам и продакт-менеджерам практические шаги и методы для усовершенствования дизайн-систем. Дэн излагает простым и понятным языком даже самые сложные концепции дизайн-систем, и очевидно, что книга является кульминацией многолетнего опыта и желания помочь другим в этой области. Это полезное и подробное руководство, на которое можно положиться, а Дэн — идеальный проводник, он проведет вас через все темы и этапы.
Джоуи Бэнкс (Joey Banks), основатель Baseline Design
В книге «Дизайн в масштабе» Дэн преобразует свой богатый опыт в практическое руководство, которое будет полезно как новичкам, так и опытным специалистам по дизайн-системам.
Майк Апарисио (Mike Aparicio), главный инженер по дизайн-системам, Turquoise Health
Эта книга наполнена бесценными деталями, которые заставят вас подвергнуть сомнению интуитивные подходы и искать новые способы осмысления процессов и оценки эффективности дизайн-систем. Когда читаешь ее, создается ощущение, что Дэн находится рядом, делясь своим опытом: успехами, подводными камнями и уроками, извлеченными на этом пути. Читайте эту книгу и рассказывайте о ней другим!
Дерек Фезерстоун (Derek Featherstone), вице-президент по доступности и инклюзивному дизайну, Salesforce
Если бы эта книга попала мне в руки 10 лет назад, я бы сэкономил несколько лет на создании действительно работающих дизайн-систем. Именно работающих — об этом подробно и с примерами пишет Дэн Молл. Когда вам предстоит столкнуться с проблемами и сложностями внедрения и развития дизайн-системы в ваших продуктах, вы уже будете знать, какое решение принять, почему именно его и как аргументировать свой выбор перед командой дизайнеров и разработчиков. Дэн упаковал весь свой многолетний опыт в лаконичные, практичные и «по делу» советы. Короче говоря, это настоящий справочник по решению проблем.
Артём Кобяков, архитектор дизайн-систем (Яндекс, «Честный ЗНАК», АТОЛ), автор Telegram-канала Oh My Design System, консультант
С первых страниц становится ясно: фокус не на визуальных библиотеках и UI-китах, а на людях, процессах и культуре. Молл подробно объясняет, что дизайн-система — это не просто набор компонентов, а полноценный продукт и одновременно внутренняя практика, требующая командного участия, продуманного управления, поддержки со стороны руководства и постоянной евангелизации.
Особенно ценны вопросы проектирования дизайн-систем, которые другие авторы часто обходят стороной, сосредоточиваясь на компонентах и пикселях: как создать систему, которой продуктовые команды действительно захотят пользоваться, как организовать вклад в нее — и как измерять ее успех.
Сергей Мухин, лидер дизайн-команд, архитектор дизайн-систем (Т-банк, Вкус Вилл), автор проекта UXFLOW
Для всех, кто построил карьеру, разрабатывая формы, таблицы и карточки, и не знает, что делать дальше.
От издательства
Мы выражаем огромную благодарность клубу рецензентов ИТ-литературы ReadIT Club за помощь в работе над русскоязычным изданием книги и вклад в повышение качества переводной литературы.
Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
О научном редакторе русского издания
Екатерина Кучина — ведущий системный аналитик компании Orion soft с более чем 14-летним опытом в IT. Начала свою карьеру в сфере IT со стажировки в компании «Росгосстрах», где за значимый личный вклад в решение актуальных задач была отмечена благодарностью.
За свою карьеру занимала ведущие позиции в крупнейших компаниях — системных интеграторах. В профессиональном портфолио — аналитическая и проектная работа над рядом ключевых информационных систем федерального и международного уровня.
Помимо активной проектной деятельности принимает участие в качестве эксперта в образовательных программах для студентов и школьников.
О книге
Для кого эта книга
Если вы дизайнер, разработчик или продакт-менеджер в крупной компании, где считают, что существуют более эффективные способы работы в условиях масштабирования, эта книга для вас. Если вы тимлид или продакт-менеджер, способный инициировать изменения, но не уверены, какие именно изменения приведут к наилучшим результатам, эта книга для вас. Если вы думаете над тем, как улучшить коллективную работу над цифровым продуктом, эта книга для вас. Если вы считаете, что работа могла бы приносить больше удовольствия, когда удастся каким-то образом избавиться от рутинных задач, эта книга также для вас.
Эта книга о нестандартном подходе к созданию дизайн-системы, который делает путь к успеху и привлечению инвестиций проще и доступнее. О новом методе, которым дизайнеры, разработчики и продакт-менеджеры могут пользоваться, имея в своем распоряжении дизайн-систему. О процессе, который вовлекает команды и помогает совершенствовать дизайн-систему, делая ее лучше для всех. В конечном счете эта книга о том, как связать вашу дизайн-систему с процессами, создающими ценность для клиентов, пользователей и всех заинтересованных лиц в вашей компании.
Дизайн-системы способны на все это, если вам известен правильный подход. Эта книга содержит концепции и теорию, которые помогают понять контекст дизайн-систем, а также примеры того, как можно успешно применять их на практике, и истории о том, как это удалось другим. Эта книга поможет вам взглянуть на дизайн-системы по-новому.
Несмотря на то что в книге есть глава «Основы дизайн-системы», это не пособие для начинающих. Здесь вы найдете лишь несколько определений и основополагающих вопросов, поскольку в других источниках эти темы уже подробно раскрыты. Также эта книга не является пошаговым руководством. Несмотря на наличие примеров кода, это не учебник по дизайн-системе. Основная часть книги посвящена рекомендациям и взаимодействиям, необходимым для успешного создания, использования и поддержки дизайн-систем в крупных организациях.
Структура книги
В главе 1 «Зачем нужны дизайн-системы» рассказывается о том, почему дизайн-система является стоящим начинанием для большинства организаций, управляющих несколькими цифровыми продуктами.
Многие команды не понимают разницы между дизайн-системами, библиотеками компонентов и UI-китами1. В главе 2 «Основы дизайн-системы» обсуждаются эти различия и некоторые ключевые понятия, а также объясняется, почему дать точное определение дизайн-системам так сложно.
В главе 3 «Составляющие дизайн-системы как продукта» разбирается экосистема вокруг дизайн-системы, чтобы понять, в какой ситуации дизайн-система будет успешной.
В главе 4 «Как непросто получить одобрение дизайн-системы» разбирается стандартный способ продвижения дизайн-системы и объясняется, почему он почти никогда не работает, а также какой другой способ может быть более эффективным.
В главе 5 «Пилотные проекты — лучший способ запустить и поддерживать дизайн-систему» рассказывается о неочевидном подходе к созданию дизайн-системы, который позволяет легко и естественно вовлекать команды в процесс и постоянно улучшать систему.
В главе 6 «Управление и вклад» рассматриваются ключевые вопросы — кто, что, где, когда и почему, ответы на которые помогут создать понятный и удобный процесс управления дизайн-системой и внесения в нее изменений.
В главе 7 «Роли и обязанности» и главе 8 «Процесс и фреймворк» идет речь о сотрудниках, участвующих в работе над связанными дизайн-системами, их месте в проекте и об эффективных рабочих процессах для оптимального взаимодействия.
В главе 9 «Показатели успеха дизайн-системы» рассматриваются как общие, так и специфические для организации показатели успеха, которых должны достичь дизайн-системы.
В главе 10 «Евангелизм никогда не прекращается» обсуждается часто упускаемая из виду задача продвижения дизайн-системы среди тех, кто должен ее использовать: внутренних дизайнеров, разработчиков и продакт-менеджеров.
В заключении объясняется, почему все вопросы, связанные с дизайн-системами, имеют значение.
Дополнительные материалы
Сопутствующий сайт книги (rosenfeldmedia.com/books/design-that-scales) содержит блог и дополнительные материалы. Диаграммы и другие иллюстрации из книги доступны под лицензией Creative Commons2 (при соблюдении определенных условий) для скачивания и использования в ваших собственных презентациях. Вы можете найти их на фотохостинге Flickr по адресу: www.flickr.com/photos/rosenfeldmedia/sets.
1 UI-киты (User Interface Kits) — это наборы предварительно разработанных компонентов и элементов пользовательского интерфейса, они помогают дизайнерам и разработчикам ускорить процесс проектирования. — Примеч. ред.
2 Creative Commons (СС) — особый вид лицензий, которые созданы для защиты произведений человеческого творчества (картины, видео, фотографии, музыкальные композиции и пр.). При размещении контента по лицензии CC авторы разрешают использовать его любому желающему с соблюдением определенных условий. — Примеч. ред.
UI-киты (User Interface Kits) — это наборы предварительно разработанных компонентов и элементов пользовательского интерфейса, они помогают дизайнерам и разработчикам ускорить процесс проектирования. — Примеч. ред.
Creative Commons (СС) — особый вид лицензий, которые созданы для защиты произведений человеческого творчества (картины, видео, фотографии, музыкальные композиции и пр.). При размещении контента по лицензии CC авторы разрешают использовать его любому желающему с соблюдением определенных условий. — Примеч. ред.
Сопутствующий сайт книги (rosenfeldmedia.com/books/design-that-scales) содержит блог и дополнительные материалы. Диаграммы и другие иллюстрации из книги доступны под лицензией Creative Commons2 (при соблюдении определенных условий) для скачивания и использования в ваших собственных презентациях. Вы можете найти их на фотохостинге Flickr по адресу: www.flickr.com/photos/rosenfeldmedia/sets.
Многие команды не понимают разницы между дизайн-системами, библиотеками компонентов и UI-китами1. В главе 2 «Основы дизайн-системы» обсуждаются эти различия и некоторые ключевые понятия, а также объясняется, почему дать точное определение дизайн-системам так сложно.
Часто задаваемые вопросы
Что такое дизайн-система?
Дизайн-системы могут быть разных видов: дизайн-система как визуальный язык, как библиотека фрагментов кода, как набор артбордов3 в инструменте дизайна, как способ проектирования и т.п. В этой книге я рассказываю о дизайн-системах в первую очередь как об организационной практике. В главе 2 «Основы дизайн-системы» более подробно рассматривается каждый из видов дизайн-систем.
Почему дизайн-системы важны?
Ежедневно интернетом пользуются около пяти миллиардов человек, каждый из которых в среднем проводит в Сети более шести часов в день. Масштабное проектирование веб-сайтов, приложений и цифрового контента необходимо для того, чтобы соответствовать постоянно растущему спросу на информацию и услуги в Сети. Понимание дизайн-систем и того, как с ними работать, уже является необходимым условием для работы цифровых дизайнеров, разработчиков и специалистов по продуктам во многих организациях, и эта тенденция продолжает развиваться.
Правда ли, что дизайн-системы нужны только дизайнерам?
Ни в коем случае! Дизайн-системы особенно интересны тем, что они являются одним из немногих инструментов, которые в равной степени служат пресловутым «трем китам» — дизайну, разработке и продукту. В главе 7 «Роли и обязанности» описаны все необходимые профессиональные навыки и круг обязанностей, которые могут иметь место в команде разработчиков дизайн-систем.
Даст ли эта книга навык создания дизайн-системы?
И да, и нет. Если вы ищете подробные инструкции по настройке UI-китов в таких инструментах дизайна, как графический редактор Figma, или по настройке свойств в языках React или Angular, то можно найти множество хороших статей и курсов на эту тему в интернете. Я решил не затрагивать подобные темы в книге, потому что большинство дизайн-систем плохо работают не из-за этого. Большинство дизайн-систем оказываются неудачными, потому что они не интегрированы вовремя в структуру работы организации, и книга в основном посвящена тому, как это правильно сделать.
Раньше я создавал дизайн-системы всего за несколько дней. Действительно ли эта тема заслуживает написания целой книги?
Правда в том, что опытный специалист может очень быстро создать такие артефакты дизайн-системы, как UI-киты в Figma и библиотеки кода. Однако для внедрения настоящей практики дизайн-систем требуется время. Дело не в том, что сама работа занимает много времени, а в том, что практика дизайн-систем требует изменений привычных устоев организации, и новым правилам требуется время, чтобы закрепиться в ее структуре. В главе 6 «Управление и вклад» рассматриваются вопросы создания и поддержки дизайн-систем: кто за это отвечает, что необходимо делать, где, когда и почему это занимает так много времени, которое, впрочем, полностью себя оправдывает.
Рекомендует ли эта книга инструменты для облегчения работы над дизайн-системой?
Сейчас захватывающее время в области разработки инструментов для создания дизайн-систем, потому что новые приложения, плагины и программное обеспечение появляются буквально каждый день! Хотя в книге и упоминаются несколько инструментов, они слишком новые и слишком часто меняются, чтобы какие-то из них можно было рекомендовать.
3 Артборды — это отдельные рабочие области, размещенные внутри одного документа в таких программах, как Adobe Illustrator, Adobe Photoshop и др. Главное их достоинство — возможность во время работы быстро переключаться между различными макетами, экранами или страницами. — Примеч. ред.
Артборды — это отдельные рабочие области, размещенные внутри одного документа в таких программах, как Adobe Illustrator, Adobe Photoshop и др. Главное их достоинство — возможность во время работы быстро переключаться между различными макетами, экранами или страницами. — Примеч. ред.
Дизайн-системы могут быть разных видов: дизайн-система как визуальный язык, как библиотека фрагментов кода, как набор артбордов3 в инструменте дизайна, как способ проектирования и т.п. В этой книге я рассказываю о дизайн-системах в первую очередь как об организационной практике. В главе 2 «Основы дизайн-системы» более подробно рассматривается каждый из видов дизайн-систем.
Предисловие
Услышав имя Сьюзен Кэр (Susan Kare)4, вы подумаете об иконках. При упоминании имени Джона Маэды (John Maeda)5 на ум придет пересечение дизайна и технологий. А услышав имя Дэна Молла (Dan Mall), вы подумаете о дизайн-системах.
Поздравляю! Если вы читаете это предисловие, значит, вы только что приобрели книгу, которая поможет не только вам, но и окружающим вас людям. Если вы просто листаете книгу и задаетесь вопросом: «Стоит ли мне ее покупать?», то я здесь, чтобы сказать вам: «ДА! Совершенно точно ДА!»
Дэн Молл — безусловно, самый опытный человек на планете из тех, кто может рассказать о дизайн-системах. Его опыт невероятно обширен, и эта книга предоставит вам все инструменты, необходимые для создания и поддержания дизайн-системы. Не просто дизайн-системы, которая будет работать здесь и сейчас, а устойчивой дизайн-системы, за создание которой дизайнеры, разработчики и другие специалисты будут благодарить вас еще много лет.
Эта книга изменит ваше мышление: от тревог, что дизайн-системы мешают инновациям, вы придете к осознанию того, что именно они дают дизайнерам и разработчикам больше свободы, чем когда-либо.
Я познакомилась с Дэном несколько лет назад на конференции по дизайну. Мы сидели рядом за ужином и довольно долго обсуждали роль дизайн-операций (DesignOps) и дизайн-систем в дизайн-командах. Все, о чем мы говорили, было важно. Нам так хотелось рассказать миру, как использовать эти навыки, чтобы сделать команды более счастливыми и успешными! Это ваш шанс услышать самого маэстро.
А теперь прекратите читать мое предисловие и переходите к самой книге.
Мередит Блэк (Meredith Black), основатель DesignOps Assembly
4 Сьюзен Кэр — американская художница и графический дизайнер, создавшая многие из элементов интерфейса Apple Macintosh, Windows, IBM OS/2 в 1980-х годах. Соучредитель и креативный директор NeXT Computer — компании, основанной Стивом Джобсом в 1985 году после его ухода из Apple Computer. — Примеч. ред.
5 Джон Маэда — американский дизайнер японского происхождения, специалист в области компьютерных технологий. Автор более десятка книг; одна из них, бестселлер «Законы простоты», издана на русском языке в 2008 году. — Примеч. ред.
Услышав имя Сьюзен Кэр (Susan Kare)4, вы подумаете об иконках. При упоминании имени Джона Маэды (John Maeda)5 на ум придет пересечение дизайна и технологий. А услышав имя Дэна Молла (Dan Mall), вы подумаете о дизайн-системах.
Джон Маэда — американский дизайнер японского происхождения, специалист в области компьютерных технологий. Автор более десятка книг; одна из них, бестселлер «Законы простоты», издана на русском языке в 2008 году. — Примеч. ред.
Сьюзен Кэр — американская художница и графический дизайнер, создавшая многие из элементов интерфейса Apple Macintosh, Windows, IBM OS/2 в 1980-х годах. Соучредитель и креативный директор NeXT Computer — компании, основанной Стивом Джобсом в 1985 году после его ухода из Apple Computer. — Примеч. ред.
Услышав имя Сьюзен Кэр (Susan Kare)4, вы подумаете об иконках. При упоминании имени Джона Маэды (John Maeda)5 на ум придет пересечение дизайна и технологий. А услышав имя Дэна Молла (Dan Mall), вы подумаете о дизайн-системах.
Введение. Дизайн-системы: преимущество дизайна в масштабе
Мне посчастливилось работать и консультировать людей по поводу их дизайн-систем в сотнях организаций. Большинство из них действуют неправильно.
Обычно история выглядит следующим образом.
Потратив недели, месяцы и даже годы, заново проектируя и создавая одни и те же элементы интерфейса, небольшая группа специалистов наконец понимает, что создание набора переиспользуемых общих решений поможет всем избавиться от необходимости каждый раз изобретать велосипед. Они проектируют и кодируют базовые элементы интерфейса: формы, таблицы, хедеры, футеры, кнопки — те, что, по их мнению, используют или могли бы использовать все остальные.
Они сами начинают пользоваться этой новой библиотекой, и она работает! Они быстрее выполняют свои задачи и даже замечают дополнительный бонус в виде большей консистентности дизайна.
Не будучи эгоистами, они думают, что эта новая библиотека будет полезна и другим, поэтому они делятся ею с остальными командами внутри компании. А дальше...
Тишина.
Долгое время никакой обратной связи. А когда они все-таки получают ответ, реакция оказывается неожиданной и совсем не той, которую ждали.
«Мы пытались ее использовать, но в ней не хватает нескольких элементов».
«Мы не совсем поняли, как ее использовать, потому что не было достаточного количества документации».
«Сейчас у нас нет времени на изучение новой библиотеки».
Разочарованные, они понимают, что могли бы устранить эти обоснованные претензии других команд, но это отвлекло бы их от основной работы, а они не могут себе этого позволить в данный момент. В итоге библиотека остается лежать в стороне, одинокая и никому не нужная.
Не зная об этом, другая команда в другой части компании только что проделала то же самое и получила аналогичный результат. Что еще хуже: ни одна из этих двух команд не подозревает, что вторая также работала над тем же и что еще несколько команд в компании делали то же самое в прошлом году, а другие — годом ранее. Лишь немногие люди, проработавшие в компании не один год, знают обо всех этих неудачных начинаниях.
Я называю эти коллекции провалившихся попыток городами-призраками или кладбищами дизайн-систем. Они есть почти в каждой организации. Всегда это происходит из лучших побуждений. Команды делают то, что кажется разумным и интуитивно понятным, но редко получают желаемый результат. Почему же так происходит?
Большинство команд подходят к созданию дизайн-системы в первую очередь как к проекту. Они не готовы к тому, что внедрение дизайн-системы зависит от изменения культуры организации, а именно от того, чтобы все начали думать и работать иначе, чем они привыкли. Большинство усилий по внедрению дизайн-систем начинается с борьбы со статус-кво. В современных цифровых компаниях, как правило, принято разделять команды и задачи на изолированные блоки, поскольку это считается более эффективным подходом. Работа над дизайн-системой быстро сталкивается с ограничениями такой структуры. Успешные дизайн-системы преодолевают эти барьеры, часто вызывая реорганизацию в компании. Наивный дизайнер или разработчик, решивший, что несколько простых инструментов могут быстро помочь всем, вскоре оказывается лицом к лицу с целым шквалом вопросов и проблем, которые неизбежно возникают при разработке дизайн-систем.
Вскоре дизайн-система, задуманная как проект, неизбежно превращается в дизайн-систему как продукт. Как и любой хороший продукт, она требует инвестиций, отдельной команды, дорожной карты, маркетинга и, что важнее всего, лояльных клиентов и пользователей.
Команды, работающие с дизайн-системой как продуктом, со временем понимают, что им нужно еще больше. Дизайн-системы наиболее востребованы в крупных компаниях, которые управляют множеством цифровых продуктов. Дизайн-системы требуют совместной работы людей с разными навыками, что зачастую непривычно и чуждо многим корпоративным культурам. Сегодня процесс создания цифровых продуктов нуждается в специалистах, способных одновременно понимать особенности типографики, паттерн MVC6 и стоимость привлечения клиентов. Дизайн-системы способны объединить все это, но при этом люди, которые будут их использовать, должны выработать новые привычки. Они должны научиться осваивать новое, достигать небольших побед на ранних этапах и постепенно наращивать темп, который со временем приведет к большим победам.
В целом наиболее зрелая форма дизайн-системы — это практика.
Однако часто бывает трудно понять, что именно нужно практиковать. При правильном подходе дизайн-системы становятся отличными инструментами для повышения эффективности, развития инноваций и получения удовлетворения от работы. Эта книга покажет вам, как создать и поддерживать успешную практику дизайн-систем, чтобы вы могли эффективно проектировать в любом масштабе.
6 Паттерн MVC (model-view-controller pattern) — это архитектурный шаблон, который разделяет приложение на три логических компонента: модель, представление и контроллер. — Примеч. ред.
Паттерн MVC (model-view-controller pattern) — это архитектурный шаблон, который разделяет приложение на три логических компонента: модель, представление и контроллер. — Примеч. ред.
Команды, работающие с дизайн-системой как продуктом, со временем понимают, что им нужно еще больше. Дизайн-системы наиболее востребованы в крупных компаниях, которые управляют множеством цифровых продуктов. Дизайн-системы требуют совместной работы людей с разными навыками, что зачастую непривычно и чуждо многим корпоративным культурам. Сегодня процесс создания цифровых продуктов нуждается в специалистах, способных одновременно понимать особенности типографики, паттерн MVC6 и стоимость привлечения клиентов. Дизайн-системы способны объединить все это, но при этом люди, которые будут их использовать, должны выработать новые привычки. Они должны научиться осваивать новое, достигать небольших побед на ранних этапах и постепенно наращивать темп, который со временем приведет к большим победам.
Глава 1. Зачем нужны дизайн-системы
Вспомните все продукты Google, которыми вы пользовались сегодня. Может быть, с утра вы проверяли свою электронную почту с помощью Gmail. Возможно, вы ехали в офис или на встречу, используя Google Maps, чтобы проложить маршрут. Вероятно, вам понадобилась дополнительная информация о чем-то, и вы искали ее в Google Search, может быть, используя Google Chrome. Возможно, вы с коллегой совместно работали над документом в Google Docs или таблицей в Google Sheets. Может быть, вы смотрели видео на YouTube. Не исключено, что вы делали все это на мобильном устройстве Android.
Как пользователь, вы, вероятно, не задумывались о том, как компании Google удалось сделать такой день возможным для вас. Да и не должны! Все, что вас должно волновать, это получаете ли вы то, что хотите, используя эти приложения.
Системы соединяют организации
Но что потребовалось Google, чтобы все это создать? На момент написания этой книги в компании Google (точнее, в материнской компании Google, Alphabet Inc.) работает почти 140 000 человек. Кроме того, Google сотрудничает со многими внешними партнерами и агентствами, помогая им ускорять работу и внедрять инновации в цифровые продукты, которые они создают для своих пользователей. Для согласования действий тысяч людей с точки зрения дизайна и разработки требуется некая система, набор элементов, работающих вместе как части единого механизма или взаимосвязанной сети. Для организаций, создающих цифровые продукты, одной из таких систем является дизайн-система. Вот мое определение:
Дизайн-система — это связанный, управляемый пакетами программный продукт с системой контроля версий, содержащий минимальный набор компонентов и руководств, необходимых конкретной организации для последовательного, эффективного и успешного создания цифровых продуктов.
Это определение может показаться громоздким! Более подробно я рассмотрю и объясню каждое из этих слов и фраз в главе 2 «Основы дизайн-системы» и в главе 9 «Показатели успеха дизайн-системы».
Дизайн-система Google называется Material Design7. По словам самой компании Google, Material Design — это «адаптивная система руководств, компонентов и инструментов, которые поддерживают лучшие практики проектирования пользовательских интерфейсов». (Видите, насколько это близко к моему определению?) Без Material Design сотрудникам и партнерам Google пришлось бы каждый раз проектировать и создавать каждый продукт, экран, взаимодействие и элемент с нуля, что привело бы к огромным трудозатратам и нежелательному разнообразию. Наличие общей системы, такой как Material Design, позволяет дизайнерам и разработчикам Google быстро находить уже существующие решения (рис. 1.1), готовые к использованию без доработок.
Рис. 1.1. Независимо от того, какое приложение Google вы используете, компонент плавающей кнопки действия (FAB) всегда обеспечивает легкий доступ к основному действию экрана в правом нижнем углу
Дизайн-системы удобны не только для дизайнеров, разработчиков, продакт-менеджеров и остальных членов команды, создающей цифровые продукты. Дизайн-системы также создают удобство и для пользователей, поскольку им не приходится заново изучать правила работы в разных приложениях. Исследование Forrester 2016 года8 показало, что согласованность в работе с клиентами привела к увеличению доходов на 24%, а дизайн-системы по своей природе создают консистентность интерфейса (рис. 1.2).
Рис. 1.2. Если вы использовали шапку всего лишь одного продукта Google, вы знаете, как использовать их все
Но, возможно, вы не пользуетесь продуктами Google.
Может быть, вы пользуетесь продуктами Microsoft. Microsoft применяет тот же подход в своей дизайн-системе Fluent Design System9.
Возможно, вы пользуетесь продуктами IBM. IBM применяет тот же подход в своей дизайн-системе Carbon Design System10.
Возможно, вы пользуетесь продуктами Salesforce. Salesforce применяет тот же подход в своей дизайн-системе Lightning Design System11.
Список можно продолжать, но суть очевидна: организации, которые создают и поддерживают несколько цифровых продуктов, часто обращаются к дизайн-системам, чтобы решить проблему управления цифровыми продуктами в масштабе. Если ваша организация хочет масштабировать цифровые продукты, тогда дизайн-системы — это не просто хорошая идея, это неизбежность.
Общие преимущества дизайн-систем
Поклонники дизайн-систем часто говорят об их трех основных преимуществах:
• Дизайн-система способствует поддержанию эффективности. Необходимость начинать с нуля и каждый раз изобретать велосипед при создании цифрового продукта приводит к перерасходу средств на цифровые технологии. Наличие готовых проверенных решений помогает командам быстрее решать проблемы.
• Дизайн-система обеспечивает консистентность. Дизайн-системы отдают приоритет повторному использованию цифровых продуктов, а возможность повторного использования — это главный компонент консистентности.
• Дизайн-система способствует развитию инноваций. Переход дизайнеров и разработчиков от создания всего с нуля к повторному использованию общих интерфейсных и интерактивных компонентов освобождает время для решения незнакомых проблем и изобретения решений для них.
Я также хотел бы добавить четвертое:
• Дизайн-система облегчает работу. Команды, работающие над цифровыми продуктами, регулярно испытывают стресс из-за нереалистичных сроков и сложных задач. Дизайн-системы дают им некий чит-код, который экономит время и ресурсы, позволяя работать спокойнее.
Реализовать эти преимущества легче на словах, чем на деле. Многие успешные инициативы в области дизайн-систем приводят к культурным и организационным трансформациям, тогда как неудачные попытки часто затухают из-за корпоративной политики. Для реализации этих преимуществ необходима устойчивая и длительная практика использования дизайн-системы.
Для кого предназначены дизайн-системы
Дизайн-система может быть полезна любому, кто работает в команде разработки цифровых продуктов. Хотя в этой книге основное внимание сосредоточено на «трех китах»: дизайне, разработке и продукте, работа с дизайн-системой включает в себя множество других областей, таких как контент, QA, исследование пользовательского опыта (ресёрч), иллюстрации, бизнес-аналитика, поведенческая наука и другие сферы, которые обычно присутствуют в команде, работающей над цифровым продуктом.
Неудивительно, что все это пригодится при создании дизайн-системы для организации. Естественно, что дизайн-система берет свое начало в рамках определенной области, такой как дизайн, IT или UX. Однако такие дизайн-системы часто не пользуются популярностью, так как остальные сотрудники организации воспринимают их как «чужую библиотеку». Дизайн-система должна принадлежать всем, а это значит, что на самом деле она не может принадлежать никому. Работа над дизайн-системой, внесение в нее вклада и ее поддержка — это демократичное и совместное занятие. Остальная часть этой книги покажет вам, как избежать изолированного создания дизайн-системы и вместо этого сделать такую систему, которая в итоге будет представлять организацию в целом.
Вопросы для размышления
• Управляет ли ваша команда или организация несколькими цифровыми продуктами?
• Какие виды оптимизации инструментов и процессов могли бы принести пользу вашей организации?
• В вашей организации уже есть дизайн-система?
УСПЕХ В ДИЗАЙН-СИСТЕМАХ
Хейли Хьюз (Hayley Hughes) — эксперт по дизайн-системам, работала в нескольких крупнейших и наиболее известных корпоративных организациях. Я задал ей несколько вопросов о ее опыте работы с дизайн-системами и о том, что нужно для достижения успеха в этой области.
Чем для вас является дизайн-система?
Для меня дизайн-системы — это сообщество практикующих специалистов, оно состоит из различных команд внутри организации. Это практика, в рамках которой команды взаимодействуют в постоянно развивающемся цикле обратной связи: наблюдение, создание и осмысление того, что означает качественный пользовательский опыт и как его обеспечить. Сообщество создает общие платформы и инструменты для масштабирования идей, стандартов, активов и сервисов по всей организации в целом и управляет ими.
Вы работали над дизайн-системами огромного масштаба в нескольких крупнейших организациях мира. Какие навыки необходимы для работы на таком уровне?
В крупных организациях дизайн-система поддерживает тысячи людей, от внутренних команд до внешних партнеров. Она должна быть полезной для различных аудиторий в разных географических регионах и средах, использующих различные устройства и технологии. При таком количестве вариантов использования дизайн-система должна обеспечивать единство, а не единообразие, то есть объединять команды для создания согласованности во взаимодействиях, но при этом предоставлять им гибкость и широкие возможности для самовыражения.
Переход от небольших компаний к крупным — это не только изменение набора навыков, но и смена образа мышления. Вы перестаете воспринимать дизайн-системы исключительно как работу с пикселями и кодом и начинаете видеть их как искусство управления — людьми и процессами.
Операционные навыки, такие как фасилитация, коучинг и дипломатия, помогают координировать процессы и управлять изменениями в больших группах людей. Это означает, что вы ведете переговоры для выработки единого подхода между десятками команд. Вы координируете внедрение изменений, которые каскадно распространяются на сотни продуктов. Вы создаете учебные материалы для подготовки тренеров по дизайн-системе. Вы накапливаете знания о жизненном цикле разработки продуктов и находите способы, с помощью которых дизайн-системы могут усилить потенциал организации. Вы ищете закономерности и связываете людей и ресурсы. Пиксели и код по-прежнему имеют значение, но вы не просто нанимаете людей с навыками, необходимыми для выполнения этой работы, вы одновременно обучаете их навыкам, необходимым для масштабирования систем.
Что общего между всеми дизайн-системами, над которыми вы работали?
Я работала над несколькими дизайн-системами в IBM, Airbnb, Nike и Shopify. Вот одна из причин, по которой я выбрала эту работу: люди, ведущие эти системы, имеют общие ценности. Во-первых, они понимают, что цель дизайн-систем состоит в улучшении качества принятия решений в командах, а не просто в ускорении разработки. Во-вторых, они действительно стремятся к развитию сотрудничества между командами и продуманному внедрению изменений. В-третьих, они уделяют приоритетное внимание таким аспектам, как доступность, инклюзивность, локализация и этичность.
С точки зрения размера команд большинство дизайн-систем, над которыми я работала, имели основную группу дизайнеров и разработчиков, численность которой могла варьироваться от нескольких человек до нескольких десятков человек в разное время. Все они использовали общий язык проектирования, общие библиотеки компонентов, а также сайт документации и программу поддержки, предназначенную для обучения и взаимодействия с продуктовыми командами. Обычно такие дизайн-системы располагаются горизонтально и подчиняются функциям проектирования, эксплуатации или инфраструктуры.
Какие именно различия в организациях делают каждую из их дизайн-систем уникальной по сравнению с другими?
Каждая дизайн-система, над которой я работала, находилась на разной стадии зрелости. Дизайн-система IBM создавалась с нуля, разрабатывался стиль дизайна для всего: не только программного и аппаратного обеспечения, но и зданий, визитных карточек, мероприятий, рекламы и т.д. У Airbnb были проблемы с привлечением людей к использованию дизайн-системы, поэтому меня попросили помочь с ее внедрением. Shopify хотела расшириться и сделать свою дизайн-систему самой крупной. Это означало, что нужно было сосредоточиться на управлении и дать командам возможность создавать локальные дизайн-системы. Дизайн-система Nike должна была стать более гибкой, чтобы поддерживать бо́льшую дифференциацию по брендам, географическим регионам и вариантам использования. У каждой дизайн-системы есть похожие проблемы, но в зависимости от того, на какой стадии зрелости она находится, можно отдать предпочтение одной системе перед другой.
Как ваш карьерный путь подготовил вас к столь эффективной работе с дизайн-системами?
Не существует какого-то одного карьерного пути, который бы гарантировал успех в работе с дизайн-системами. У меня в команде были бывшие биологи, которые были экспертами в петлях обратной связи12, и юристы, знающие, как работать с лицензированием открытого кода. Люди, занимающиеся дизайн-системами, приходят из самых разных областей и имеют разны
