January 29, 2015 at 17:01Atomic web design
I offer readers of Habrahabr a translation of Brad Frost’s article “Atomic Web Design” .
We do not design pages; we design component systems. - Stephen Hay
As the craft of web design continues to evolve, we increasingly feel the need for thoughtful, systematic development, as opposed to creating simple sets of web pages.
Much has been said about the creation of design systems, and the greatest emphasis is placed mainly on the establishment of colors, typography, nets, textures, etc. This type of thinking is undoubtedly important, but I'm a little less interested in these aspects of design, because, by and large, they are always subjective. Recently, I have been more puzzled by the question of what our interfaces consist of, and how we can design them more systematically.
In search of inspiration, I returned to chemistry. All substances (whether solids, liquids, gases, simple, complex, etc.) are composed of atoms . Atoms bind to each other and form molecules , which, in turn, combine and form organisms . Ultimately, this is how all the matter in our universe is created.
Similarly, interfaces consist of smaller components. This means that we can break down the interfaces into fundamental blocks and combine them, gradually increasing complexity . This is the essence of atomic web design.
The periodic system of HTML elements.
Atomic design is a methodology for creating design systems. There are five distinct levels in atomic design:
Atoms in nature are the basic building blocks of matter. In the context of web interfaces, atoms are HTML tags such as a form, input field, or button.
Atoms can include even more abstract elements, such as color palettes, fonts, or even more hidden aspects of the interface such as animations.
Like atoms in nature, they are quite abstract and often useless on their own. However, the benefit of designing them is to define a single common interface style .
Everything becomes more interesting and tangible when we begin to combine atoms. Molecules are collections of interconnected atoms. They have their own properties and play the role of the skeleton of our design system.
For example - a label, an input field and a button are not so applicable on their own, but can be really useful if you combine them.
The construction of molecules from atoms promotes the mentality of "do one thing, but good . " While molecules can be quite complex, most often it is a simple combination of atoms built for reuse.
Molecules give us some building blocks for work. Now we can connect them together to form organisms. Organisms are associations of molecules that form quite complex, separate sections of an interface.
We are increasingly moving towards specifics . The client may not be very interested in the molecules of the design system, but with the advent of the organization, one can observe the beginning of the formation of the final product. Dan Mall (with whom I work on several projects) uses collages of elements that show the key ideas and directions of the interface without the need to design the entire site.
Organisms may consist of similar or different types of molecules. For example, a page title can consist of different components - a logo, a main menu, a search form, and a list of media channels. But an organism displaying a grid of goods may contain one molecule (product image, name and price), which is repeated many times.
The transition from molecules to organisms contributes to the creation of independent components, ready for reuse.
At this stage, we will no longer draw analogies with chemistry in order to communicate in a language that is more meaningful for our customers. Templates most often consist of groups of organisms linked together to form pages. It is at this stage that the overall picture becomes visible.
The patterns are very specific and provide context to all fairly abstract molecules and organisms. It is the template that allows you to see the final design. In my experience with this methodology, templates start with HTML wireframes, but become more accurate over time. As a result, they become final products. Bearded Studio in Pittsburgh has a similar process, in which designs begin to be developed in black and white and without layout, but gradually gain specifics and details until they become the final works.
Pages are specific instances of templates. In them, to accurately convey what the user sees, the "stub" content is replaced by the present.
Pages are the highest level of specificity. they are the most tangible. Most of the time involved in the process is spent in working on them, and most reviews are written on them.
The page stage is necessary, because it is on it that the effectiveness of the entire design system is checked. Seeing everything in context, you can take a step back and change our molecules, organisms and patterns in order to better adapt to the real context of design.
This is also the stage for testing changes to templates. For example, you need to make sure that a 40-character header looks consistent with a 340-character header. Or check how, instead of a basket with one thing, it looks like it has 10 things and a discount on a promo code. These situations affect the way we build our system.
In many ways, this is exactly what we did sites, even if we did not think about it consciously.
Atomic design provides a clear methodology for creating design systems. Clients and team members can appreciate the ideas of a particular design system due to the fact that they see the stages of its development.
Atomic design gives us the opportunity to move from the abstract to the concrete. Therefore, we can create systems that are scalable and have a single, constant style, and at the same time showing the final overall picture. The process, instead of destructuring, turns into an assembly - we create the structure from the very beginning, and do not carefully select the appropriate templates after.
To apply this methodology in my work, I (with the help of Dave Oslen ) developed the Pattern Lab tool designed to create atomic design systems. I'll talk about the Pattern Lab in detail later, but feel free to look at the source code on Github .
And here are the videos and slides from my presentation for Beyond Tellerrand in Germany.
I am captivated by the idea of digging deeper and developing more tools and thoughts about these concepts.
We do not design pages; we design component systems. - Stephen Hay
As the craft of web design continues to evolve, we increasingly feel the need for thoughtful, systematic development, as opposed to creating simple sets of web pages.
Much has been said about the creation of design systems, and the greatest emphasis is placed mainly on the establishment of colors, typography, nets, textures, etc. This type of thinking is undoubtedly important, but I'm a little less interested in these aspects of design, because, by and large, they are always subjective. Recently, I have been more puzzled by the question of what our interfaces consist of, and how we can design them more systematically.
In search of inspiration, I returned to chemistry. All substances (whether solids, liquids, gases, simple, complex, etc.) are composed of atoms . Atoms bind to each other and form molecules , which, in turn, combine and form organisms . Ultimately, this is how all the matter in our universe is created.
Similarly, interfaces consist of smaller components. This means that we can break down the interfaces into fundamental blocks and combine them, gradually increasing complexity . This is the essence of atomic web design.
The periodic system of HTML elements.
What is atomic design
Atomic design is a methodology for creating design systems. There are five distinct levels in atomic design:
- Atoms
- Molecules
- Organisms
- Patterns
- Pages
Atoms
Atoms in nature are the basic building blocks of matter. In the context of web interfaces, atoms are HTML tags such as a form, input field, or button.
Atoms can include even more abstract elements, such as color palettes, fonts, or even more hidden aspects of the interface such as animations.
Like atoms in nature, they are quite abstract and often useless on their own. However, the benefit of designing them is to define a single common interface style .
Molecules
Everything becomes more interesting and tangible when we begin to combine atoms. Molecules are collections of interconnected atoms. They have their own properties and play the role of the skeleton of our design system.
For example - a label, an input field and a button are not so applicable on their own, but can be really useful if you combine them.
The construction of molecules from atoms promotes the mentality of "do one thing, but good . " While molecules can be quite complex, most often it is a simple combination of atoms built for reuse.
Organisms
Molecules give us some building blocks for work. Now we can connect them together to form organisms. Organisms are associations of molecules that form quite complex, separate sections of an interface.
We are increasingly moving towards specifics . The client may not be very interested in the molecules of the design system, but with the advent of the organization, one can observe the beginning of the formation of the final product. Dan Mall (with whom I work on several projects) uses collages of elements that show the key ideas and directions of the interface without the need to design the entire site.
Organisms may consist of similar or different types of molecules. For example, a page title can consist of different components - a logo, a main menu, a search form, and a list of media channels. But an organism displaying a grid of goods may contain one molecule (product image, name and price), which is repeated many times.
The transition from molecules to organisms contributes to the creation of independent components, ready for reuse.
Patterns
At this stage, we will no longer draw analogies with chemistry in order to communicate in a language that is more meaningful for our customers. Templates most often consist of groups of organisms linked together to form pages. It is at this stage that the overall picture becomes visible.
The patterns are very specific and provide context to all fairly abstract molecules and organisms. It is the template that allows you to see the final design. In my experience with this methodology, templates start with HTML wireframes, but become more accurate over time. As a result, they become final products. Bearded Studio in Pittsburgh has a similar process, in which designs begin to be developed in black and white and without layout, but gradually gain specifics and details until they become the final works.
Pages
Pages are specific instances of templates. In them, to accurately convey what the user sees, the "stub" content is replaced by the present.
Pages are the highest level of specificity. they are the most tangible. Most of the time involved in the process is spent in working on them, and most reviews are written on them.
The page stage is necessary, because it is on it that the effectiveness of the entire design system is checked. Seeing everything in context, you can take a step back and change our molecules, organisms and patterns in order to better adapt to the real context of design.
This is also the stage for testing changes to templates. For example, you need to make sure that a 40-character header looks consistent with a 340-character header. Or check how, instead of a basket with one thing, it looks like it has 10 things and a discount on a promo code. These situations affect the way we build our system.
Why atomic design
In many ways, this is exactly what we did sites, even if we did not think about it consciously.
Atomic design provides a clear methodology for creating design systems. Clients and team members can appreciate the ideas of a particular design system due to the fact that they see the stages of its development.
Atomic design gives us the opportunity to move from the abstract to the concrete. Therefore, we can create systems that are scalable and have a single, constant style, and at the same time showing the final overall picture. The process, instead of destructuring, turns into an assembly - we create the structure from the very beginning, and do not carefully select the appropriate templates after.
Pattern lab
To apply this methodology in my work, I (with the help of Dave Oslen ) developed the Pattern Lab tool designed to create atomic design systems. I'll talk about the Pattern Lab in detail later, but feel free to look at the source code on Github .
Materials for further study
- "Web Components: A Tectonic Shift for Web Development . " Web components are perfectly aligned with the concept of atomic design, this video talks about why they change the way we think, build and use web applications.
- Modularity . Tim Bernens-Lee discusses the application of the modularity principle to web development.
- "Responsive Deliverables . " An article that develops the idea of creating "small bootstraps for each client."
And here are the videos and slides from my presentation for Beyond Tellerrand in Germany.
I am captivated by the idea of digging deeper and developing more tools and thoughts about these concepts.