As the art of web design continues to evolve, we recognise the need to develop thoughtful design systems rather than creating simple collections of web pages. Atomic design is a methodology for creating design systems.

© Brad Frost
 

Brad Frost and Dave Olsen, the guys behind patternlab.io, call it - "Build systems, not pages"

What does "Build systems, not pages" mean?

To me, Building Systems doesn't mean creating a design or developing entire interface pages. It's a small element, like a button. And all the small components are combined into single groups, like labels, boxes, tables, forms.  In the end, the final pages are simply assembled from these prefabricated groups. That's the idea behind System Builder.

Now we can go deeper into the atomic design modules.

The methodology consists of five distinct steps and an orderly hierarchical way of creating interface design systems. These are:

Atoms
Molecules
Organisms
Templates
Pages
Hierarchy of atomic design (image 1)

 

Atoms
Here, those little elements/moles are called "Atoms". Atoms are kind of like, the building blocks of an application.

(image 2).

For example, (image 2) they represent different UI elements by themselves, such as buttons, form elements and labels. Their fonts, colours and icons are inherited from atoms.

 

Molecules
Molecules provide more functionality. Molecules are groups of atoms linked together and are the smallest fundamental units. For example (picture 3). A text input field and a button are combined into a search form and can do something together.

(image 3)

The atoms or internal modules are the icons used for each step, the icons used to connect the steps (image 4), and the text used under the icons, as well as the colours used to distinguish active steps from inactive steps, and the typography used, which includes the size and style of the font family.These atoms by themselves are quite simple, but once grouped together, they provide meaning and functionality by letting the user know which current step they are in, which steps are ahead, and how to navigate

(image 4)

 

Organisms
Organisms are groups of molecules combined together to form a relatively complex, discrete section in an interface. Search molecules combine with navigation molecules to form a title organism. For example, (image 5) site search and title are combined into a form of navigation and can do something together. This title organism consists of a search form molecule, a logo atom and a primary navigation molecule. The organisms demonstrate these smaller, simpler components in action and serve as individual samples that can be used over and over again. In terms of external interface, organisms are good candidates for splitting HTML into sections.

(image 5)

 

Templates
A template consists mainly of groups of organisms stitched together into pages. This is where we start to see how the design comes together and the actions in the layout. At this stage it's easy to visualise the organisms from the sample design below (image 6) and how they might make up each of the pages. But not only that, we can imagine how breaking down our design into these parts can help us establish better design rules and better understand when and why we would want to rewrite these rules.

dribbble.com (image 6)

Here's a way to document the modules that have been identified. It's not just a matter of creating a specification document to capture how the modules should be built, or writing guidelines that capture high-level definitions such as brand colours and font families.

 

Pages
The final step is the atomic page design module. All templates contain actual representative content, which is called a Page. Pages are the highest level of accuracy. Pages are templates with added ready-made content, videos, photos and actual content, allowing us to check and fine-tune the design if necessary. Pages are necessary to check the effectiveness of the basic design system. For example, (image 7)

(image 7)

The following shows a step-by-step atomic design following the steps I describe in this article. This is what atomic design is all about! These five separate steps work together simultaneously to create effective user interface design systems. To briefly summarise atomic design:

 

Atoms are elements of the user interface that cannot be further broken down, and serve as the elementary building blocks of the interface.
Molecules are sets of atoms that form relatively simple components of a user interface.
Organisms are the relatively complex components that make up the individual parts of an interface.
Templates place components in a layout and show the basic structure of the design's content.
Pages apply real content to templates and formulate options to demonstrate the final interface and test the robustness of the design system.
(image 8)

 

Conclusion
At the end of this article I will mention that Atomic Design provides a clear methodology for creating design systems. Such frameworks allow us to focus our thinking and clearly state what we are creating. This ensures consistency and manageability of our designs. Atomic design allows designers to think critically about each design component as part of a whole. We only touch on this subject superficially. And how do you implement the design process?

Atomic design enables us to move from the abstract to the concrete. By doing so, we can create systems that promote consistency and scalability while showing things in their final context. By assembling rather than disassembling, we create a system all at once instead of selectively.

© Brad Frost