Illustration by Nitzan Klamer
What is Atomic Design?
Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.
Why Atomic Design?
This methodology is called Atomic Design because it’s very idea is founded in that of Chemistry, and the study of the composition of matter. The universe is made up of a fixed set of ‘atomic elements’ – known to many of us as the periodic table of elements. These elements are the building blocks of everything around us.
In Chemistry, these atomic elements have fixed properties that define them. Oxygen and Hydrogen on their own are atoms with independent properties. However when these elements are combined, they create molecules, which take on their own unique characteristics, made up of the atoms they contain. In the case of hydrogen and oxygen, pairing two hydrogen atoms with oxygen creates what we know as the water molecule.
This understanding of how smaller elements, or atoms, can be combined together to create larger objects, or molecules, parallels well with the design world, and the many elements we use to construct our designs. Following the atomic design principles provides us a structure for not only formulating our design, but creates the building blocks for constructing our design systems and pattern libraries.
The elements of Atomic Design
There are five distinct stages of the Atomic Design methodology, with the first three modelled after their equivalents in the Chemistry world. Each stage builds on the previous, acting as an aggregate of items from the preceding stages.
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Atoms
Just like in Chemistry, atoms are the smallest building blocks in our system. Rather than atoms like Oxygen or Hydrogen, in design we have buttons, inputs, labels and other small elements that get used throughout our design. Iconography fits in this category, whether it is a menu icon, or avatar as they’re small elements that come together to form the next stage – molecules.
Molecules
In the molecule stage, we take our independent atomic design elements, each with their own characteristics, style, format, and begin to bring them together into new groupings. Take for instance our avatar atom. If we combine the avatar atom with name and title labels, other atomic elements, we can create a profile molecule. Each atom has carried its unique properties into a group that on it’s own has distinct characteristics.
Just like in Chemistry, we can combine the same atoms in different ways to create unique molecules for use in our design. Though at this stage the groupings are still relatively simple collections.
Organisms
As we enter the Organisms stage, our collections of atoms and molecules now become more complex than at the molecular level. Take for instance our ‘profile’ molecule. It was a simple element comprising an avatar and a pair of label elements. As we bring that into an organism, we may be adding that into an app header for a profile page, complete with navigation, a background cover photo and some other molecules. This creates our header organism.
The organism is not yet a complete design, but is a component that can be reused across designs, or layout templates.
Templates
The template is the first stage of the Atomic Design methodology that does not align to a stage in the molecular world, but is important for Atomic Design. A template is where we begin to curate our organisms and other elements into a cohesive design.
You saw in the Organism stage that elements began forming into usable blocks of content, and those start coming together into a template of blocks that can be used across a variety of pages. Think of templates as the blueprint for our future finished page designs. At this point they’re still the elements, and won’t contain real data – much like a wireframe.
Building on our organism for the profile page, our template will now include a statistics organism showcasing some details about the profile – this could be actions taken, skill levels etc. There will also be a contact organism connected at the bottom. Using this, we now have a template for pages. This template is reusable across our application.
Pages
Pages are the final stage of the Atomic Design methodology. This is where instances of templates are created (in this case, one for every profile). In the design process you may not design out pages for every instance, but it is helpful to create a few variations.
As your data changes, different profile information, or languages may impact your template design. Building out to the page stage allows you to test for these variations and make adaptations globally to your templates.
It is possible in some instances you won’t use all organisms in a template, whether a user doesn’t have those enabled, or they don’t apply, in the pages is where you would adjust what parts of the template are shown.
Pages are also where most clients, and internal stakeholders will be doing their reviewing of the design as you can see it all holistically in one place. Though it’s wise to share out at the template stage as well, having the full fidelity of your design together can help you spot weaknesses, or parts of the design that are not working well.
Applying Atomic Design
Getting started with atomic design is straightforward. Keeping in mind the idea of building up from small elements to templates and pages, start by mapping out the foundational elements, or atoms, that you will need in your design. Starting with a free UI kit is a great place to start as many of them already include these atomic elements for you to customize.
From there practice building your atoms into molecules and organisms and see how they work together and adapt across different arrangements. How you organize your elements, molecules and organisms is up to you, and will likely vary by project.