Books on design systems
We have been building our Paradigm design system since 2012. But such a fierce explosion of interest in the topic with a lot of new examples and publications, as in the last couple of years, was not yet. Last year the book Brad Frost “Atomic Design” finally came out and everyone speaks about the design systems. True, most of the articles are endless chewing on the theory of modular design, almost no one writes about the practice of implementation other than Nathan Curtis. In addition, although Brad's merit in popularizing the idea of ​​modular design is invaluable, the approach itself and the “atomicity” / “molecular” metaphor existed before it (Nathan Curtis writes that in the mid-90s Dell also made a component system with the same terminology, but Jeremy Keith introduced in the region of 2011 into the modern everyday life “atomic design”.
Illustration: © Erin Malone
It was interesting for me to understand primary sources, so last year I sat down to read everything that went on the topic of patterns, components and modularity (this article develops last year’s article ). There is no perfect book, but some of them show very correct points of view:
')
1. Christopher Alexander - Template Language. Cities. Building. Building Industry (1977)
Although its usefulness for practical work of an interface designer is not particularly great, the point of view from which it is written is extremely interesting. These are the three levels of “scale” (consider modularity itself) and, most importantly, the depth of social, economic, psychological and political rationales behind each template. The latter is completely lost in modern libraries of patterns. In the book of 1090 pages, and for several years I waited for an opportunity to take it, but I never lost it.
2. Nathan Curtis - Modular Web Design (2009)
All the main ideas of modular design systems are described there, a very, very sound understanding of the role of a unified approach to interfaces at all stages of product work. But damn it, it is built around the process of creating wireframes! Therefore, one must strongly abstract away from the specific applications of the idea.
3. Anna Debenham - A Pocket Guide to Front-End Style Guides (2013)
This is a very small overview book, its main value is that it was the first to describe these ideas for the web in a more or less structured way. True, the second edition just slightly updated the texts and examples, without giving any new value - in this form it is now useless.
4. Brad Frost - Atomic Design (2017)
The best overview of what is now a modular design. The benefits of introducing a design system at all levels are well described, there are examples and generally sound thoughts on the subject. Although it is too theoretical, there is a shortage of meat itself about the pitfalls of the real process of work. In addition, there the main theme is only casually touched on - how to build the right component system, which is updated throughout the product line, and not just a set of CSS styles.
5. InVision - Design Systems Handbook (2017)
Online training as part of the Design Better initiative. The most up-to-date and practically useful one is about process management, technological solutions, basic things, and the future with an algorithmic design. Not always enough depth disclosure of those, but otherwise - the fire.
From fresh there is Alla Kholmatova “Design Systems” (2017) and e-books like UXPin “Creating a Design System: The 100-Point Process Checklist” (2017). In the mid-2000s, a stack of books about interface patterns from Jennifer Tidwell, Bill Scott, Theresa Neil, Erin Malone and others came out. It is useful to read any of them, but in general they are not very relevant - the concept of modern design systems has gone far ahead (by the way, Nathan Curtis described his understanding of the difference between patterns and components ). The classic book Erich Gamma "Design Patterns" (1994) about patterns in programming is interesting for its approach to structuring, but otherwise it is necessary to read only from a survey point of view.
In the course of my approach to reading the whole pre-history of the design systems, a couple of articles were published with an overview of all the books and articles on the topic from a historical perspective. In general, I initially guessed with a set, but added a pack of articles and classic examples. On the title picture is the most complete chronology from Erin Malone , which dealt with the legendary Yahoo! pattern library. So far, I didn’t get to Micah Godbolt "Frontend Architecture for Design Systems" (2016).
There are a lot of books and articles ( one more list ), but if you aren’t such a bot like me, for today you only need to read Atomic Design from Brad Frost and Design Systems Handbook from InVision as a theory and subscribe to Nathan Curtis for practice (everyone is waiting for a fresh book From him). Well, if you are not tired of my references to the styleguides.io website, finally go through everything that is there. In the group Digest of grocery design there is a branch with fresh links and articles on the topic - also a great option to keep track of fresh things.
The term “design system”, like many other things that suddenly became popular, has now been greatly devalued. This word is called anything - from a library of standard elements in Sketch and a page with sliced ​​screenshots to a mature platform, really working on the basis of distributed components with a wired design. We initially built the latter, because the main source of truth is the product itself and you need to take care to ensure that it was he who worked as intended. At each stage of the chain “ guideline → layout → layout → implementation ” details are lost and bugs are generated, so the only way to systematically improve products is to reduce it to “ guideline = layout = layout → implementation ”. There is clearly no way to do without a technological framework.
Brad Frost is also tired of what many understand as a design system a template in Sketch or another design tool . This is the thinking of the middle of the last century, when this word was understood as the system of visual identification of the brand, to which a beautiful printed book went (they were actively republished in recent years). But then it was about the physical products and objects that are on the shelf in the store (or the chain store itself), and we are working with digital products, where the layout does not guarantee anything and changes many times before launching to users. So you have to work with the main material of this environment - the code.
Illustration: © Erin Malone
It was interesting for me to understand primary sources, so last year I sat down to read everything that went on the topic of patterns, components and modularity (this article develops last year’s article ). There is no perfect book, but some of them show very correct points of view:
')
1. Christopher Alexander - Template Language. Cities. Building. Building Industry (1977)
Although its usefulness for practical work of an interface designer is not particularly great, the point of view from which it is written is extremely interesting. These are the three levels of “scale” (consider modularity itself) and, most importantly, the depth of social, economic, psychological and political rationales behind each template. The latter is completely lost in modern libraries of patterns. In the book of 1090 pages, and for several years I waited for an opportunity to take it, but I never lost it.
2. Nathan Curtis - Modular Web Design (2009)
All the main ideas of modular design systems are described there, a very, very sound understanding of the role of a unified approach to interfaces at all stages of product work. But damn it, it is built around the process of creating wireframes! Therefore, one must strongly abstract away from the specific applications of the idea.
3. Anna Debenham - A Pocket Guide to Front-End Style Guides (2013)
This is a very small overview book, its main value is that it was the first to describe these ideas for the web in a more or less structured way. True, the second edition just slightly updated the texts and examples, without giving any new value - in this form it is now useless.
4. Brad Frost - Atomic Design (2017)
The best overview of what is now a modular design. The benefits of introducing a design system at all levels are well described, there are examples and generally sound thoughts on the subject. Although it is too theoretical, there is a shortage of meat itself about the pitfalls of the real process of work. In addition, there the main theme is only casually touched on - how to build the right component system, which is updated throughout the product line, and not just a set of CSS styles.
5. InVision - Design Systems Handbook (2017)
Online training as part of the Design Better initiative. The most up-to-date and practically useful one is about process management, technological solutions, basic things, and the future with an algorithmic design. Not always enough depth disclosure of those, but otherwise - the fire.
From fresh there is Alla Kholmatova “Design Systems” (2017) and e-books like UXPin “Creating a Design System: The 100-Point Process Checklist” (2017). In the mid-2000s, a stack of books about interface patterns from Jennifer Tidwell, Bill Scott, Theresa Neil, Erin Malone and others came out. It is useful to read any of them, but in general they are not very relevant - the concept of modern design systems has gone far ahead (by the way, Nathan Curtis described his understanding of the difference between patterns and components ). The classic book Erich Gamma "Design Patterns" (1994) about patterns in programming is interesting for its approach to structuring, but otherwise it is necessary to read only from a survey point of view.
In the course of my approach to reading the whole pre-history of the design systems, a couple of articles were published with an overview of all the books and articles on the topic from a historical perspective. In general, I initially guessed with a set, but added a pack of articles and classic examples. On the title picture is the most complete chronology from Erin Malone , which dealt with the legendary Yahoo! pattern library. So far, I didn’t get to Micah Godbolt "Frontend Architecture for Design Systems" (2016).
There are a lot of books and articles ( one more list ), but if you aren’t such a bot like me, for today you only need to read Atomic Design from Brad Frost and Design Systems Handbook from InVision as a theory and subscribe to Nathan Curtis for practice (everyone is waiting for a fresh book From him). Well, if you are not tired of my references to the styleguides.io website, finally go through everything that is there. In the group Digest of grocery design there is a branch with fresh links and articles on the topic - also a great option to keep track of fresh things.
The term “design system”, like many other things that suddenly became popular, has now been greatly devalued. This word is called anything - from a library of standard elements in Sketch and a page with sliced ​​screenshots to a mature platform, really working on the basis of distributed components with a wired design. We initially built the latter, because the main source of truth is the product itself and you need to take care to ensure that it was he who worked as intended. At each stage of the chain “ guideline → layout → layout → implementation ” details are lost and bugs are generated, so the only way to systematically improve products is to reduce it to “ guideline = layout = layout → implementation ”. There is clearly no way to do without a technological framework.
Brad Frost is also tired of what many understand as a design system a template in Sketch or another design tool . This is the thinking of the middle of the last century, when this word was understood as the system of visual identification of the brand, to which a beautiful printed book went (they were actively republished in recent years). But then it was about the physical products and objects that are on the shelf in the store (or the chain store itself), and we are working with digital products, where the layout does not guarantee anything and changes many times before launching to users. So you have to work with the main material of this environment - the code.
Source: https://habr.com/ru/post/354380/
All Articles