Atomic Design Methodology as a guide to structure design interfaces

Lotte Moors

Building a web interface can quickly become complex, especially when working on a large project with multiple people. The result? Lots of elements and many class names. Seeking a way to give direction to these elements and indicate their relationship, Brad Frost created a design methodology inspired by chemistry.

Why based on chemistry?

Usually, design systems revolve around typography, color, shape, and other visual elements, which are very important. However, Brad Frost wanted a more methodical approach to constructing designs.

Creating an interface reminded him of chemistry because of how the natural world is constructed. Everything in our galaxy consists of a finite set of atomic elements. These elements bond together to form molecules, which can form complex organisms and, ultimately, everything in our universe.

Interfaces are similarly made from a finite set of elements combined to ultimately create the entire page.

periodic table of the elements

Stages of atomic design

There are five stages in atomic design:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

Let’s look into them.

ATOMS

The elements on the periodic table above represent the atoms. They are the basic HTML elements, each having its unique properties. As long as it can’t be broken down further without losing its functionality, it’s considered an atom. Some examples are titles, images, buttons, paragraphs…

atoms
Examples of atoms

Molecules

In the following stage, atoms are combined in a simple group with specific functionality. Just like in chemistry, the same atoms can be combined to form different kinds of molecules. These simple groupings are ideal as reusable components. An example of a molecule is the profile section on our team page. For each person, there is an image, a paragraph, and a button grouped to give a glance at the person and a possibility to learn more about them.

molecule
A molecule

Organisms

At the stage of organisms, things are starting to get more complex. Grouping together similar and/or different molecules, atoms and/or other organisms to form a distinct section of the interface. Following the previous example, grouping the profile molecules of each team member forms an organism mainly consisting of the same elements.

organism
organism

An example of an organism built from different types of molecules and atoms is the header section containing a logo, a navigation menu, and a button to visit our Github page.

Header

Templates

Here, we leave the chemistry analogy behind. In this stage, we place all our components in a cohesive design to form pages. For a template to be able to handle dynamic content, the focus must lie on the page's underlying content structure rather than a specific instance of the design. They form the blueprint for our final design.

template

template

template

template

Pages

Arriving at the final and most concrete stage of Atomic Design, we use our templates to test specific instances. Adding content to our templates gives us an idea of how the final design will look. This is how the final design of the team page turned out.

Thoughts

Atomic Design Principles provides a structured and logical view for someone who isn't yet very advanced or maybe a bit chaotic in design. Starting with small elements, gradually building up to the complete application makes it easy to reuse your components throughout pages and applications.

More insights

Collaborate with Us

Don't miss out on the opportunity to partner with Wheelhouse. Together, we can bring your project to the next level.