“We’re not designing pages, we’re designing systems of components.” – Stephen Hay
Unlike “flat design” or “material design”, atomic design is not a design language. This naturally raises the question: “So what is atomic design anyway?” – The answer is relatively simple: Atomic Design is a design method that is intended to massively simplify collaboration between designers and developers.
Back to school: a basic course in chemistry
To understand what Atomic Design is based on, let’s travel back in time to school. In chemistry lessons, we learned that an organism consists of many molecules. These in turn consist of many atoms. Organisms > Molecules > Atoms.
The “Atomic Design” method breaks down web projects into their smallest building blocks and then combines them into complex units. The design approach was defined by the American web designer Brad Frost.
The 5 stages of web design:
Let’s now apply our knowledge from the basic chemistry course and transfer this to the web design process:
- Atoms
- molecules
- organisms
- Templates
- Pages
Of course, the user of the website only notices the 5th level. We see a website as a whole. Only when interacting with the website do we notice that most elements are repeated several times. One example of this is the contact form. The same contact form can be found on every detail page. Die Überschrift, die Eingabefelder und der Button sind identisch. But now let’s get to the explanation of the individual elements:
1. atoms
An atom is the smallest and indivisible element of a website. An atom can only consist of an HTML tag or a font. A headline, for example, is an atom. But we also consider a button to be an atom. A button could still be divided into the area and the label. However, we would then also break up the purpose. In Atomic Design, however, each atom must fulfill its purpose.
2. molecules
A molecule is a conglomerate of several atoms that solve a task together as a molecule. This can be, for example, a complete HTML form or a card from material design.
3. organisms
Several molecules together form an organism. An organism can be a complete page header, for example, or an area with current articles.
4. template & 5. pages
At this point we leave the chemistry analogy. Several organisms together make up the template. The template is the finished page, but without specific content elements. Pages are ultimately the accessible pages with concrete content for visitors.
What advantages does Atomic Design offer?
Atomic Design offers many advantages for a wide range of applications. I now work in an agency as a UX & UI designer. I am responsible for the concept and the design. Once the design has been finalized, it is handed over to the developer, who then converts the design into HTML and CSS code. Before the introduction of Atomic Design in the agency, the developer had to wait until the complete design was finished. This left him with many empty time slots. In the meantime, he is already supplied with atoms that he can style in a CSS class. He can already implement atoms, molecules and organisms without having to wait for the finished design. When the finished design is delivered, he simply places the elements in the correct position in the layout and is then finished. If a change request comes from the customer, for example: “Could you please make the button a little brighter?” Then the developer only has to make this change in their CSS class and the page is globally adapted. Most atoms and molecules are the same, or differ only in subtleties. This allows the developer to create their own library and style the elements slightly differently depending on the project. This saves the developer a lot of time, which can be put to better use. Another advantage that should not be underestimated is that everyone involved “speaks the same language”. Because the atoms, molecules and organisms are clearly named, there are no more misunderstandings. The atom “buy button” is clearly defined. The molecule “Add to shopping cart” with the atoms “Buy button”, “Heading”, “Product quantity field” is clearly defined and visible.