Atomic web design
I offer the readers of "Habrahabra" a translation of the article by Brad Frost (Brad Frost) "Atomic Web Design" .
We do not design pages, we design component systems. - Stephen Hay
')
As the craft of web design continues to evolve, we are increasingly feeling the need for thoughtful, system 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 setting colors, typography, meshes, 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 (be they solids, liquids, gases, simple, complex, etc.) consist of atoms . Atoms bind to each other and form molecules , which, in turn, combine and form organisms . Ultimately, this is how all matter in our universe is created.
Similarly, interfaces consist of smaller components. This means that we can break interfaces into fundamental blocks and combine them, gradually increasing the complexity . This is the essence of atomic web design.
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, an input field, or a button.
Atoms can include even more abstract elements, such as color palettes, fonts, or even such more hidden aspects of the interface as animations.
Like atoms in nature, they are rather abstract and often useless by themselves. However, the benefit of their design is to set a single common interface style .
Everything becomes more interesting and palpable when we start to combine atoms. Molecules are sets of interconnected atoms. They have their own properties and play the role of the skeleton of our design system.
For example - the label, the input field and the button are not so applicable by themselves, but can be really useful if you combine them.
Building molecules from atoms contributes to the mindset 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 combinations of molecules that form quite complex, separate sections of the interface.
We are moving faster to specifics . The client may not be very interested in the molecules of the design system, but with the advent of restrictions one can observe the beginning of the formation of the final product. Dan Mall (with whom I am working on several projects) uses collages of elements that show the key ideas and directions of the interface without the need for designing the whole site.
Ogranizmy may consist of similar or different types of molecules. For example, the title of a page can consist of different components - a logo, a main menu, a search form and a list of media channels. But an organism that displays a mesh of products 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 stop making analogies with chemistry in order to communicate in a more meaningful language for our clients. Patterns most often consist of groups of organisms linked together and forming pages. It is at this stage that the overall picture becomes visible.
Templates are very concrete and provide context to all fairly abstract molecules and organisms. That pattern allows you to see the final design. In my experience with this methodology, templates begin with HTML wireframes, but over time they become more accurate. As a result, they become the final products. Bearded Studio in Pittsburgh have a similar process, in which designs begin to develop in black and white and without markup, but gradually gain specifics and details until they become final works.
Pages are specific instances of templates. In them, for an accurate transfer of what the user sees, the “stub” content is replaced by a real one.
Pages are the highest level of specifics and, because they are the most tangible. Most of the time of most people involved in the process is spent on them and most of the 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 can take a step back and change our molecules, organisms and patterns in order to better adapt to the actual design context.
This is also the stage for testing changes in templates. For example, you need to make sure that a 40-character header looks consistent with a 340-character header. Or check out how, instead of a basket with one thing, it looks the same with 10 things and with a discount on the promo code. These situations affect how we build our system.
In many ways, this is how we made websites, even if we did not consciously think about it.
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 show the final overall picture. The process instead of restructuring turns into an assembly — we create the structure from the very beginning, rather than carefully selecting suitable templates after.
To apply this methodology in my work, I (with the help of Dave Oslena ) developed the Pattern Lab tool for creating atomic design systems. I'll tell you about the Pattern Lab in detail later, but feel free to look at the source code on Github .
And here is a video and slides from my presentation for “Beyond Tellerrand” in Germany.
I’m excited to dig deeper and develop 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 are increasingly feeling the need for thoughtful, system 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 setting colors, typography, meshes, 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 (be they solids, liquids, gases, simple, complex, etc.) consist of atoms . Atoms bind to each other and form molecules , which, in turn, combine and form organisms . Ultimately, this is how all matter in our universe is created.
Similarly, interfaces consist of smaller components. This means that we can break interfaces into fundamental blocks and combine them, gradually increasing the complexity . This is the essence of atomic web design.
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
- Ogranizmy
- Templates
- 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, an input field, or a button.
Atoms can include even more abstract elements, such as color palettes, fonts, or even such more hidden aspects of the interface as animations.
Like atoms in nature, they are rather abstract and often useless by themselves. However, the benefit of their design is to set a single common interface style .
Molecules
Everything becomes more interesting and palpable when we start to combine atoms. Molecules are sets of interconnected atoms. They have their own properties and play the role of the skeleton of our design system.
For example - the label, the input field and the button are not so applicable by themselves, but can be really useful if you combine them.
Building molecules from atoms contributes to the mindset 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 combinations of molecules that form quite complex, separate sections of the interface.
We are moving faster to specifics . The client may not be very interested in the molecules of the design system, but with the advent of restrictions one can observe the beginning of the formation of the final product. Dan Mall (with whom I am working on several projects) uses collages of elements that show the key ideas and directions of the interface without the need for designing the whole site.
Ogranizmy may consist of similar or different types of molecules. For example, the title of a page can consist of different components - a logo, a main menu, a search form and a list of media channels. But an organism that displays a mesh of products 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.
Templates
At this stage, we will stop making analogies with chemistry in order to communicate in a more meaningful language for our clients. Patterns most often consist of groups of organisms linked together and forming pages. It is at this stage that the overall picture becomes visible.
Templates are very concrete and provide context to all fairly abstract molecules and organisms. That pattern allows you to see the final design. In my experience with this methodology, templates begin with HTML wireframes, but over time they become more accurate. As a result, they become the final products. Bearded Studio in Pittsburgh have a similar process, in which designs begin to develop in black and white and without markup, but gradually gain specifics and details until they become final works.
Pages
Pages are specific instances of templates. In them, for an accurate transfer of what the user sees, the “stub” content is replaced by a real one.
Pages are the highest level of specifics and, because they are the most tangible. Most of the time of most people involved in the process is spent on them and most of the 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 can take a step back and change our molecules, organisms and patterns in order to better adapt to the actual design context.
This is also the stage for testing changes in templates. For example, you need to make sure that a 40-character header looks consistent with a 340-character header. Or check out how, instead of a basket with one thing, it looks the same with 10 things and with a discount on the promo code. These situations affect how we build our system.
Why atomic design
In many ways, this is how we made websites, even if we did not consciously think about it.
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 show the final overall picture. The process instead of restructuring turns into an assembly — we create the structure from the very beginning, rather than carefully selecting suitable templates after.
Pattern lab
To apply this methodology in my work, I (with the help of Dave Oslena ) developed the Pattern Lab tool for creating atomic design systems. I'll tell you 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 tells about why they change the way we think, build and use web applications.
- Modularity . Tim Bernens-Lee discusses the application of modularity to web development.
- Responsive Deliverables . An article that develops the idea of ​​creating “small bootstraps for each client.”
And here is a video and slides from my presentation for “Beyond Tellerrand” in Germany.
I’m excited to dig deeper and develop more tools and thoughts about these concepts.
Source: https://habr.com/ru/post/249223/
All Articles