Atomic Design by Brad Frost was first published in 2016 when the concepts at the time were new and a fresh way of thinking. They've since become part of everyday language for design teams and remain a helpful way of thinking about how pieces of a puzzle fit together to make a website. He examines how large pieces of design can be broken down into smaller pieces and recombined in different ways drawing inspiration from chemistry.
Atomic Design
Brad Frost's visualization of Atomic Design
Atoms are the basic building blocks of everything and the smallest possible units. On a website, an atom could be a button or a single form field.
Molecules are combinations of two or more atoms bound together expressing unique properties. Molecules form simple groups of UI elements that can be reused. Combine a button with a form field and prompt or call to action, and something starts to happen.
Organisms are more complex. They occur when molecules function together as a unit. You can think of organisms as global elements on a website such as a header which includes the logo, navigation, and a search field.
Templates happen when molecules and organisms come together to help form the underlying content structure or scaffolding. At this point, it is more important to focus on the structure than to be distracted by the content itself or the design details. It is also helpful to consider how templates may be used or adapted for other screens.
The final level of Atomic Design is pages where images and content are applied to the templates. In using real content in example layouts it becomes a tool explore different variations and potential for how the layout may be used or adapted. You can only design in the abstract for so long before you need to understand how everything fits in contextually. More of this methodology is explained in chapter 2 of his book.
While they're not covered in the book, design tokens are another level of unit and are smaller than atoms. Design tokens are properties that can't do anything alone but can be applied to atoms (for example, to apply color to a background or shape or to add spacing and line height to typography).
A shared vocabulary
One of the benefits of working with a widely adopted mental model like Atomic Design is that it gives everyone working on a project a shared vocabulary. Having a shared language between designers and developers keeps everyone on the same page, working towards the same goals, with minimal miscommunication and misunderstanding.
Another thing to keep in mind when working with Atomic Design and Design Systems is naming. Because the goal is to be able to reuse elements in different contexts, you do not want to name something that is too specific as it's hard to adapt it to other situations and limits what can go inside. Therefore, avoid naming the page itself. For instance, you should be able to use a homepage layout in other areas on the site in Atomic Design. Stick to terms like "header" rather than trying to say it's the "homepage header".
Working with Atomic Design can help foster a collaborative workflow, as both designers and developers are working with the same element and a shared vocabulary with an end result that is cohesive and consistent.
Let's Recap!
Atomic Design is one approach to thinking about design and breaking design elements down into units.
The smallest building blocks are atoms, two or more atoms combined are a molecule, and two or more molecules combined are an organism.
Atomic Design encourages reusing the same pieces in different combinations rather than starting over each time.
Defining the content structure is important, but it is also important to see how it works with actual content through "Pages".
