Мы строим свою дизайн-систему Paradigm с 2012 года. Но такого лютого взрыва интереса к теме с уймой новых примеров и публикаций, как в последние пару лет, ещё не было. В прошлом году наконец-то вышла книга Brad Frost «Atomic Design» и про дизайн-системы говорят вообще все. Правда, большинство статей — бесконечное пережёвывание теории модульного дизайна, про практику внедрения кроме Nathan Curtis почти никто не пишет. Кроме того, хотя заслуга Брэда в популяризации идеи модульного дизайна неоценима, но и сам подход, и метафора «атомарности» / «молекулярности» существовали до него (Nathan Curtis пишет, что ещё Dell в середине 90х делал компонентную систему с такой же терминологией, а в современный обиход «atomic design» ввёл Jeremy Keith в районе 2011 года).
Иллюстрация: © Erin Malone
Мне было интересно разобраться в первоисточниках, поэтому в прошлом году я засел за чтение всего, что выходило на тему паттернов, компонентов и модульности (эта статья развивает прошлогоднюю заметку). Идеальной книги нет, но часть из них показывает очень правильные точки зрения:
1. Кристофер Александер — Язык шаблонов. Города. Здания. Строительство (1977)
Хотя её полезность для практической работы дизайнера интерфейсов не особо велика, точка зрения, с которой она написана — безумно интересна. Это три уровня «масштаба» (считай, сама по себе модульность) и, самое главное — глубина социальных, экономических, психологических и политических обоснований, которая стоит за каждым шаблоном. Последнее напрочь потерялось в современных библиотеках паттернов. В книге 1090 страниц и я несколько лет ждал удобного случая, чтобы взяться за неё, но ни разу не прогадал.
2. Nathan Curtis — Modular Web Design (2009)
Все основные идеи модульных дизайн-систем описаны ещё там, очень и очень здравое понимание роли единого подхода к интерфейсам на всех этапах продуктовой работы. Но она, чёрт возьми, построена вокруг процесса создания wireframes! Поэтому нужно сильно абстрагироваться от конкретных применений идеи.
3. Anna Debenham — A Pocket Guide to Front-End Style Guides (2013)
Это совсем небольшая обзорная книга, её главная ценность — она первой описала эти идеи для веба в более-менее структурированном виде. Правда, второе издание просто слегка обновило тексты и примеры, не дав никакой новой ценности — в таком виде оно сейчас бесполезно.
4. Brad Frost — Atomic Design (2017)
Лучший обзор того, что сейчас представляет из себя модульный дизайн. Очень хорошо описана польза от внедрения дизайн-системы на всех уровнях, есть примеры и в целом здравые мысли на тему. Хотя она чересчур теоретична, не хватает самого мяса про подводные камни реального процесса работы. Кроме того, там только вскользь затронута самая главная тема — как построить правильную компонентную систему, которая обновляется по всей линейке продуктов, а не просто набор CSS-стилей.
5. InVision — Design Systems Handbook (2017)
Онлайн-методичка в рамках инициативы Design Better. Самая актуальная и практически полезная — есть и про менеджмент процесса, и про технологическое решение, и про базовые вещи, и про будущее с алгоритмическим дизайном. Не всегда хватает глубины раскрытия тем, но в остальном — огонь.
Из свежего есть ещё Alla Kholmatova «Design Systems» (2017) и электронные книги вроде UXPin «Creating a Design System: The 100-Point Process Checklist» (2017). В середине 2000х вышла пачка книг про интерфейсные паттерны от Jennifer Tidwell, Bill Scott, Theresa Neil, Erin Malone и других. Почитать любую из них полезно, но в целом они не очень актуальны — концепция современных дизайн-систем ушла далеко вперёд (кстати, Nathan Curtis описал своё понимание разницы между паттернами и компонентами). Классическая книга Erich Gamma «Design Patterns» (1994) про паттерны в программировании интересна своим подходом к структурированию, но в остальном нужно читать только с изыскательской точки зрения.
По ходу моего захода к прочтению всей предыстории дизайн-систем вышла пара статей с обзором всех книг и статей на тему в исторической перспективе. В целом я изначально угадал с набором, но добавил туда пачку статей и классических примеров. На титульной картинке — самая полная хронология от Erin Malone, которая занималась легендарной библиотекой паттернов Yahoo! Пока не добрался разве что до Micah Godbolt «Frontend Architecture for Design Systems» (2016).
Книг и статей много (ещё один список), но если вы не такой ботан как я — на сегодня достаточно прочитать только Atomic Design от Brad Frost и Design Systems Handbook от InVision в качестве теории и подписаться на Nathan Curtis для практики (все ждут свежую книгу от него). Ну и, если вы не устали от моих отсылок на сайт styleguides.io, наконец-то прошерстить всё что там есть. В группе Дайджест продуктового дизайна есть ветка со свежими ссылками и статьями на тему — тоже отличный вариант следить за свежими вещами.
Термин «дизайн-система», как и многие другие ставшие внезапно популярными вещи, сейчас сильно девальвировался. Этим словом называют всё что угодно — от библиотеки стандартных элементов в Sketch и странички с нарезанными скриншотами до зрелой платформы, действительно работающей на базе распространяемых компонентов со вшитым дизайном. Мы изначально строили последнее, ведь главный источник правды это сам продукт и нужно озаботиться тем, чтобы как задумано работал именно он. На каждом этапе цепочки «гайдлайн → макет → вёрстка → реализация» теряются детали и генерируются баги, так что единственный путь системно улучшить продукты — сократить её до «гайдлайн = макет = вёрстка → реализация». Здесь явно не обойтись без технологического фреймворка.
Brad Frost тоже устал от того, что многие понимают под дизайн-системой шаблон в Sketch или другом инструменте дизайна. Это мышление середины прошлого века, когда под этим словом понималась система визуальной идентификации бренда, к которой шла красивая печатная книжка (их активно переиздают последние годы). Но тогда речь шла о физических продуктах и объектах, которые стоят на полке в магазине (или сама сеть магазинов), а мы-то с вами работаем с цифровыми продуктами, где макет ничего не гарантирует и много раз меняется перед запуском на пользователей. Так что работать надо с основным материалом этой среды ― кодом.
Иллюстрация: © Erin Malone
Мне было интересно разобраться в первоисточниках, поэтому в прошлом году я засел за чтение всего, что выходило на тему паттернов, компонентов и модульности (эта статья развивает прошлогоднюю заметку). Идеальной книги нет, но часть из них показывает очень правильные точки зрения:
1. Кристофер Александер — Язык шаблонов. Города. Здания. Строительство (1977)
Хотя её полезность для практической работы дизайнера интерфейсов не особо велика, точка зрения, с которой она написана — безумно интересна. Это три уровня «масштаба» (считай, сама по себе модульность) и, самое главное — глубина социальных, экономических, психологических и политических обоснований, которая стоит за каждым шаблоном. Последнее напрочь потерялось в современных библиотеках паттернов. В книге 1090 страниц и я несколько лет ждал удобного случая, чтобы взяться за неё, но ни разу не прогадал.
2. Nathan Curtis — Modular Web Design (2009)
Все основные идеи модульных дизайн-систем описаны ещё там, очень и очень здравое понимание роли единого подхода к интерфейсам на всех этапах продуктовой работы. Но она, чёрт возьми, построена вокруг процесса создания wireframes! Поэтому нужно сильно абстрагироваться от конкретных применений идеи.
3. Anna Debenham — A Pocket Guide to Front-End Style Guides (2013)
Это совсем небольшая обзорная книга, её главная ценность — она первой описала эти идеи для веба в более-менее структурированном виде. Правда, второе издание просто слегка обновило тексты и примеры, не дав никакой новой ценности — в таком виде оно сейчас бесполезно.
4. Brad Frost — Atomic Design (2017)
Лучший обзор того, что сейчас представляет из себя модульный дизайн. Очень хорошо описана польза от внедрения дизайн-системы на всех уровнях, есть примеры и в целом здравые мысли на тему. Хотя она чересчур теоретична, не хватает самого мяса про подводные камни реального процесса работы. Кроме того, там только вскользь затронута самая главная тема — как построить правильную компонентную систему, которая обновляется по всей линейке продуктов, а не просто набор CSS-стилей.
5. InVision — Design Systems Handbook (2017)
Онлайн-методичка в рамках инициативы Design Better. Самая актуальная и практически полезная — есть и про менеджмент процесса, и про технологическое решение, и про базовые вещи, и про будущее с алгоритмическим дизайном. Не всегда хватает глубины раскрытия тем, но в остальном — огонь.
Из свежего есть ещё Alla Kholmatova «Design Systems» (2017) и электронные книги вроде UXPin «Creating a Design System: The 100-Point Process Checklist» (2017). В середине 2000х вышла пачка книг про интерфейсные паттерны от Jennifer Tidwell, Bill Scott, Theresa Neil, Erin Malone и других. Почитать любую из них полезно, но в целом они не очень актуальны — концепция современных дизайн-систем ушла далеко вперёд (кстати, Nathan Curtis описал своё понимание разницы между паттернами и компонентами). Классическая книга Erich Gamma «Design Patterns» (1994) про паттерны в программировании интересна своим подходом к структурированию, но в остальном нужно читать только с изыскательской точки зрения.
По ходу моего захода к прочтению всей предыстории дизайн-систем вышла пара статей с обзором всех книг и статей на тему в исторической перспективе. В целом я изначально угадал с набором, но добавил туда пачку статей и классических примеров. На титульной картинке — самая полная хронология от Erin Malone, которая занималась легендарной библиотекой паттернов Yahoo! Пока не добрался разве что до Micah Godbolt «Frontend Architecture for Design Systems» (2016).
Книг и статей много (ещё один список), но если вы не такой ботан как я — на сегодня достаточно прочитать только Atomic Design от Brad Frost и Design Systems Handbook от InVision в качестве теории и подписаться на Nathan Curtis для практики (все ждут свежую книгу от него). Ну и, если вы не устали от моих отсылок на сайт styleguides.io, наконец-то прошерстить всё что там есть. В группе Дайджест продуктового дизайна есть ветка со свежими ссылками и статьями на тему — тоже отличный вариант следить за свежими вещами.
Термин «дизайн-система», как и многие другие ставшие внезапно популярными вещи, сейчас сильно девальвировался. Этим словом называют всё что угодно — от библиотеки стандартных элементов в Sketch и странички с нарезанными скриншотами до зрелой платформы, действительно работающей на базе распространяемых компонентов со вшитым дизайном. Мы изначально строили последнее, ведь главный источник правды это сам продукт и нужно озаботиться тем, чтобы как задумано работал именно он. На каждом этапе цепочки «гайдлайн → макет → вёрстка → реализация» теряются детали и генерируются баги, так что единственный путь системно улучшить продукты — сократить её до «гайдлайн = макет = вёрстка → реализация». Здесь явно не обойтись без технологического фреймворка.
Brad Frost тоже устал от того, что многие понимают под дизайн-системой шаблон в Sketch или другом инструменте дизайна. Это мышление середины прошлого века, когда под этим словом понималась система визуальной идентификации бренда, к которой шла красивая печатная книжка (их активно переиздают последние годы). Но тогда речь шла о физических продуктах и объектах, которые стоят на полке в магазине (или сама сеть магазинов), а мы-то с вами работаем с цифровыми продуктами, где макет ничего не гарантирует и много раз меняется перед запуском на пользователей. Так что работать надо с основным материалом этой среды ― кодом.
