The Atomic Design Methodology

My sophomore year, I entered the classroom for my new science course, and was greeted by our head football coach wearing a huge grin and eager to offer us his best dad joke, “Ok guys. I want you to be on your best behavior this year. I’ve got my ION you.” And that was my introduction to chemistry.  While I say that, overall, it was an incredibly positive experience (🥁), it wasn’t something I expected to need again. 

Little did I know that chemistry would find its way back into my life, only this time, it would be in the form of websites and software and a methodology known as Atomic Design.

What is the Atomic Design Methodology?

Atomic Design is a methodology developed by Brad Frost (check out the book online) and is a mental model to help us think about user interfaces both in terms of their individual components and as a collective whole. Frost received inspiration for this methodology from his high school chemistry class, and used this knowledge to build out a model for successfully creating the different components of interface design and development. If you’re like me, and realizing you actually have no clue what an interface is, it’s essentially anything that allows you to interact with your phone or computer: a website, an ecommerce site, an app, etc. It’s easy to see why these need to be designed well: they must be something users can interact with easily and effectively. The five main components Frost identifies are as follows:

Atoms

Simple Chemistry 101: atoms are the building blocks of all matter. In the same way, great interfaces are made up of specific building blocks. Just like atoms, these things are small and simple, but can pack a significant punch. Some of the “atoms” of interfaces include things like labels, inputs, buttons, and iconography. 

For example, a search bar is something you use on a daily basis. Yet you’ve probably never realized it’s made up of several distinct elements:

• A label inviting you to search the site
• An input form where you enter your query
• And a search button that you click to initiate a search

On their own, each of these elements are important, but not functional.

This list of basic elements functions like an inventory for designers and developers, a list of all building blocks needed for interface design. And just like with your Lincoln logs, the more stable and strong your individual components, the more strong and stable things you can build with them. 

Molecules

Which leads us to molecules: groups of atoms bonded together. In interfaces, molecules are simple groups of UI elements that work together as a unit. For example, a form label, search input, and a button (like a magnifying glass) join together to create a search form molecule. 

Focusing first on atoms and then on molecules means user interface (UI) designers and developers can focus on keeping everything simple and effective. This simplicity makes it easier to test and tweak interfaces, maintain consistency across every element of an interface, and easily reuse elements that will find their way onto multiple pages.

In our search bar example above, those elements we mentioned (label, input, button) can be combined to create something purposeful.

Organisms

In the world around us, atoms make up all matter, molecules are groupings of atoms (both similar and different), and organisms are groups of molecules that work together as a single unit.

An organism in an interface is no different. Groups of atomic elements are grouped to create molecules, and these are then grouped to create more complex organisms. These organisms form distinct sections of an interface. 

Taking our above example further, the search function could be combined with other atomic elements: labels, buttons, etc. to create the header for a blog page. 

Templates

According to Frost, this is where the chemistry analogy loses some of its strength. In interfaces, templates are page-level objects that place components (atoms, molecules, organisms) into a specific layout and articulate the design’s underlying content structure. While he is the expert here, I would argue his analogy still holds because organisms ultimately require a structure as they increase in size (like how your skeleton helps your body hold and maintain a specific structure).

To build on our running example, the header organism can be placed into a template for a website page. The template will identify where images, text, and buttons will be located. It’s important to note that the emphasis is upon the underlying content structure, rather than what it will actually look like live. This is something most of us are familiar with: we often see templates for websites or blog pages. These are inexpensive packages that a company can tweak for their site. What we are talking about here is a custom interface that is built with unique templates for the final product (it’s a nuanced but significant difference). 

Pages

The fifth element in Frost’s Atomic Design Methodology is pages. These are like the skin that covers our skeleton: it’s what everyone actually sees and helps to wrap all of our atoms, molecules, and organisms together in a nice pretty package. 

In interfaces, pages involve the combination of everything to create the final, intended structure – what viewers will actually see. Pages combine all your elements, and are built to be robust and varied (for example, on your ecommerce website, multiple users can add different items to their online shopping cart, and the website works perfectly for each of them).

Pages are also important for testing how effective your underlying design system actually is. How well do each of your elements hold up when real content is applied? Does everything look great and function correctly? If not, it is easy and clear to see where the issues are and correct them quickly.

Check out how each of the elements in our running example come together to form a blog page. Like what you see? Then make sure you’re subscribed. 

What are the Advantages of Atomic Design?

We’ve already touched on the advantages of designing websites and software interfaces with the Atomic Design Methodology. But it’s worth mentioning them again to fully demonstrate why this model is so valuable for companies, developers, and designers. 

• Designers and developers can easily shift between the abstract and the concrete. Think of an artist painting a picture. When he or she steps back from the painting, they’re able to view each component in terms of its relation to the other elements and adjust their work accordingly. 
• Designers and developers are also able to quickly replicate aspects of a site that will be used throughout. Rather than having to recreate these elements each time they are needed, they are on hand and ready to go. 
• It’s much more efficient and seamless to build high performing, well-functioning sites and applications. You’re focusing on each element that makes up the interface, and thinking about how it will work with other components, which means each step is more successful.
• Form and function. Frank Lloyd Wright’s famous mantra is in full effect with Atomic Design: every aspect of an interface works correctly and is visually appealing. 

Atomic Design with a Growth-Driven Vibe

The great thing about Atomic Design is that it is a model that works incredibly well with Growth-Driven Design. As your website is built out intentionally in each phase, our designers and developers are also thinking about each component of your interface. It takes a great process like GDD and makes it even more intentional and effective. Learn more about what goes into designing a high performing website.