The Atomic Design Methodology: UX Design in an ideal world
by Marvin Cheung, Head of Research and Strategy
Before diving into the details of UX Design and UX Research, we want to have a high level understanding of how the disparate components come together to make up an interface. Brad Frost’s Atomic Design Methodology provides a fantastic overview.
According to the framework, you can break a product down into pages, templates, organisms, molecules, and atoms. An atom can be a text field, a button, an image, a logo etc. After designing the atoms, you can put them together into molecules. For example, a search bar consisting of a text field, a search icon, and the search button can be considered one molecule. Multiple molecules form an organism, like a navigation bar, and multiple organisms form a page template. Fill in all of the placeholders and you have a page!
Does it sound too good to be true? Because it is. While it is not a bad framework by any means - this is especially useful for UX audits or case interviews, the actual UX process when you work in-house will be a lot messier. There are many reasons why that will be, to name a few:
You may change the functionality of the product at any point in the design process especially if you are in the process of building an MVP.
You may decide to change your tech stack and the new platforms you use may have different design limitations.
You may run out of time and need to short circuit the process.
You may and should prioritize certain components of your product over others. There is no reason to design the full interface before user testing.
However, the Atomic Design Methodology is still a framework we recommend, because it helps you think about interfaces in a modular way. Just remember:
If you follow the Atomic Design Methodology, you will be creating a design system. Most organizations might not have the budget, time, or expertise to put it together, nor do you need to. You can opt for an open source UI library instead.
There is no reason to follow a framework to a tee. Do what works for your team!
Recommended reading: Frost, Brad. “Atomic Design Methodology”. AtomicDesign.BradFrost.com, 2016. https://atomicdesign.bradfrost.com/chapter-2/