Хабрахабр

Книги о дизайн-системах

Мы строим свою дизайн-систему Paradigm с 2012 года. Но такого лютого взрыва интереса к теме с уймой новых примеров и публикаций, как в последние пару лет, ещё не было. В прошлом году наконец-то вышла книга Brad Frost «Atomic Design» и про дизайн-системы говорят вообще все. Правда, большинство статей — бесконечное пережёвывание теории модульного дизайна, про практику внедрения кроме Nathan Curtis почти никто не пишет. Кроме того, хотя заслуга Брэда в популяризации идеи модульного дизайна неоценима, но и сам подход, и метафора «атомарности» / «молекулярности» существовали до него (Nathan Curtis пишет, что ещё Dell в середине 90х делал компонентную систему с такой же терминологией, а в современный обиход «atomic design» ввёл Jeremy Keith в районе 2011 года).

Иллюстрация: © Erin Malone

Идеальной книги нет, но часть из них показывает очень правильные точки зрения: Мне было интересно разобраться в первоисточниках, поэтому в прошлом году я засел за чтение всего, что выходило на тему паттернов, компонентов и модульности (эта статья развивает прошлогоднюю заметку).

Кристофер Александер — Язык шаблонов. 1. Здания. Города. Это три уровня «масштаба» (считай, сама по себе модульность) и, самое главное — глубина социальных, экономических, психологических и политических обоснований, которая стоит за каждым шаблоном. Строительство (1977)
Хотя её полезность для практической работы дизайнера интерфейсов не особо велика, точка зрения, с которой она написана — безумно интересна. В книге 1090 страниц и я несколько лет ждал удобного случая, чтобы взяться за неё, но ни разу не прогадал. Последнее напрочь потерялось в современных библиотеках паттернов.

Nathan Curtis — Modular Web Design (2009)
Все основные идеи модульных дизайн-систем описаны ещё там, очень и очень здравое понимание роли единого подхода к интерфейсам на всех этапах продуктовой работы. 2. Поэтому нужно сильно абстрагироваться от конкретных применений идеи. Но она, чёрт возьми, построена вокруг процесса создания wireframes!

Anna Debenham — A Pocket Guide to Front-End Style Guides (2013)
Это совсем небольшая обзорная книга, её главная ценность — она первой описала эти идеи для веба в более-менее структурированном виде. 3. Правда, второе издание просто слегка обновило тексты и примеры, не дав никакой новой ценности — в таком виде оно сейчас бесполезно.

Brad Frost — Atomic Design (2017)
Лучший обзор того, что сейчас представляет из себя модульный дизайн. 4. Хотя она чересчур теоретична, не хватает самого мяса про подводные камни реального процесса работы. Очень хорошо описана польза от внедрения дизайн-системы на всех уровнях, есть примеры и в целом здравые мысли на тему. Кроме того, там только вскользь затронута самая главная тема — как построить правильную компонентную систему, которая обновляется по всей линейке продуктов, а не просто набор CSS-стилей.

InVision — Design Systems Handbook (2017)
Онлайн-методичка в рамках инициативы Design Better. 5. Не всегда хватает глубины раскрытия тем, но в остальном — огонь. Самая актуальная и практически полезная — есть и про менеджмент процесса, и про технологическое решение, и про базовые вещи, и про будущее с алгоритмическим дизайном.

В середине 2000х вышла пачка книг про интерфейсные паттерны от Jennifer Tidwell, Bill Scott, Theresa Neil, Erin Malone и других. Из свежего есть ещё Alla Kholmatova «Design Systems» (2017) и электронные книги вроде UXPin «Creating a Design System: The 100-Point Process Checklist» (2017). Классическая книга Erich Gamma «Design Patterns» (1994) про паттерны в программировании интересна своим подходом к структурированию, но в остальном нужно читать только с изыскательской точки зрения. Почитать любую из них полезно, но в целом они не очень актуальны — концепция современных дизайн-систем ушла далеко вперёд (кстати, Nathan Curtis описал своё понимание разницы между паттернами и компонентами).

В целом я изначально угадал с набором, но добавил туда пачку статей и классических примеров. По ходу моего захода к прочтению всей предыстории дизайн-систем вышла пара статей с обзором всех книг и статей на тему в исторической перспективе. Пока не добрался разве что до Micah Godbolt «Frontend Architecture for Design Systems» (2016). На титульной картинке — самая полная хронология от Erin Malone, которая занималась легендарной библиотекой паттернов Yahoo!

Ну и, если вы не устали от моих отсылок на сайт styleguides.io, наконец-то прошерстить всё что там есть. Книг и статей много (ещё один список), но если вы не такой ботан как я — на сегодня достаточно прочитать только Atomic Design от Brad Frost и Design Systems Handbook от InVision в качестве теории и подписаться на Nathan Curtis для практики (все ждут свежую книгу от него). В группе Дайджест продуктового дизайна есть ветка со свежими ссылками и статьями на тему — тоже отличный вариант следить за свежими вещами.

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

Это мышление середины прошлого века, когда под этим словом понималась система визуальной идентификации бренда, к которой шла красивая печатная книжка (их активно переиздают последние годы). Brad Frost тоже устал от того, что многие понимают под дизайн-системой шаблон в Sketch или другом инструменте дизайна. Так что работать надо с основным материалом этой среды ― кодом. Но тогда речь шла о физических продуктах и объектах, которые стоят на полке в магазине (или сама сеть магазинов), а мы-то с вами работаем с цифровыми продуктами, где макет ничего не гарантирует и много раз меняется перед запуском на пользователей.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть