What Is Atomic Design?

«We’re not designing pages, we’re designing systems of components.» – Stephen Hay

Unlike "flat design" or "Material Design", Atomic Design isn't a design language. Which naturally raises the question: "So what is Atomic Design, then?" – The answer is fairly simple: Atomic Design is a design methodology meant to make collaboration between designers and developers massively easier.

Back to school: Chemistry 101

To understand what Atomic Design is built on, let's take a trip back in time to school. In chemistry class, we learned that an organism is made up of many molecules. These in turn are made up of many atoms. Organisms > molecules > atoms.

The Atomic Design methodology breaks web projects down into their smallest building blocks so they can then be combined into complex units. By the way, this design approach was developed by American web designer Brad Frost.

The 5 stages of web design:

Now let's take what we learned in Chemistry 101 and apply it to the web design process:

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

Of course, website users only notice the 5th stage. We see a website as a whole. It's only when we interact with the website that we notice most elements repeat multiple times. One example is the contact form. The same contact form shows up on every detail page. The heading, the input fields, and the button are identical. But now let's explain the individual elements:

1. Atoms

An atom is the smallest element of a website, one that can't be broken down any further. An atom can consist of just one HTML tag or a font. A headline, for example, is an atom. But we also consider a button an atom. Sure, you could split a button further into its background and its label. But then we'd also break its purpose. In Atomic Design, every atom has to serve its purpose.

2. Molecules

A molecule is a cluster of several atoms that work together as a molecule to accomplish a task. That could be a complete HTML form, for example, or a card from Material Design.

3. Organisms

Several molecules together form an organism. An organism could be, for example, a complete page header or a section with recent articles.

4. Templates & 5. Pages

From here on, we leave the chemistry analogy behind. Several organisms together make up the template. The template is the finished page, but without any actual content. Pages, ultimately, are the pages visitors can access, with real content.

What are the benefits of Atomic Design?

Atomic Design offers lots of benefits for a wide range of use cases. These days I work at an agency as a UX & UI designer. I'm responsible for the concept and the design. Once the design is finished, it gets handed off to the developer, who then turns it into HTML and CSS code. Before the agency introduced Atomic Design, the developer had to wait until the entire design was finished. That left him with a lot of idle time. Now he already gets atoms delivered that he can style in a CSS class. He can build atoms, molecules, and organisms without having to wait for the finished design. When the finished design is delivered, all he has to do is place the elements in the right spot in the layout, and he's done. And if a client then comes back with a change request like "Could you make the button a bit more eye-catching?", the developer only has to make that change in his CSS class, and it's updated globally across the site. Most atoms and molecules are the same or differ only in the details. That lets the developer build up his own library and style the elements a little differently depending on the project. This saves the developer a lot of time that he can put to better use. Another benefit that shouldn't be underestimated: everyone involved "speaks the same language". Because the atoms, molecules, and organisms each have a clear name, there are no more misunderstandings. The "buy button" atom is clearly defined. The "add to cart" molecule, with the atoms "buy button", "heading", and "quantity field", is clearly defined and easy to understand.