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.
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:
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:
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.
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.
In our search bar example above, those elements we mentioned (label, input, button) can be combined to create something purposeful.
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
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.
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).
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.
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.
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.