Applying Atomic Design principles when creating digital products
At Moving Brands, we strive to build scalable products and experiences with multi-use components and provide practical application guidance for both design and tech teams.
We often benefit from Brad Frost’s Atomic Design principles when crafting these solutions. In this article, our UX Director Sahin Gumus shares an overview of Atomic Design, as well as some practical examples of how it can be used and insights into the challenges teams may face when doing so.
Why we love using Atomic Design
Atomic Design is a methodology that enables teams to build modular and hierarchical user interface systems using cues from chemistry. In the natural world, atoms are fundamental building blocks of matter that combine to form molecules, which in turn make up larger organisms. Atomic Design translates this essential formula into a highly effective process for creating great websites and digital products. That’s why we love using this technique at Moving Brands.
“A good user interface system acts as an extension of the brand narrative. When designing these systems, the Atomic Design approach is a great tool to break down high-level brand ingredients into more tangible and tactical applications across the product.” — Sahin Gumus, UX Director at Moving Brands.
Atomic Design comes in handy for both design and development teams because it follows a step-by-step process where each stage builds on the previous, forming an aggregate of building blocks. In most cases, Atomic Design provides:
A consistent and cohesive structure
It makes the team effort more cohesive and synchronised when building a digital product.
Better alignment between design and tech teams
It facilitates a healthy conversation, builds empathy and serves as a conduit between design and development teams.
Faster time to market
A well-built system following Atomic Design principles can scale as products evolve, from the initial launch to implementation of new features and functionality. Theoretically, you can create an infinite number of instances using the building blocks of a system.
The 5 stages of Atomic Design
Before we start, it’s important to consider the words of the creator of this methodology. Brad Frost says that atomic design is not a linear process, but rather a mental model to help us create component-driven user interfaces. This statement highlights two key aspects of the methodology (1) it’s not a one-way exercise based on strict rules, and (2) it provides direction to define building blocks and use them in a logical and explicit order.
Let’s take a closer look at five distinct stages of Atomic Design and how we use it in our projects:
Atoms
These are the smallest elements that get used throughout the experience, just like the atoms in chemistry.
Examples: Buttons, labels, input fields, avatars, icons
Molecules
Molecules are atoms that are grouped together. Atoms still keep their own unique styles and properties individually but become part of a more functional structure.
Examples: Content cards, User profiles, button stacks, tabbed navigation
Organisms
This is the stage where atoms and molecules start to form more complex structures — called organisms. They serve as distinct patterns that can be used again and again.
Examples: Content carousels, Sliders, Form groups
Templates
Templates often are called ‘modules’ in web terminology. They can be customised and repurposed throughout the experience.
Examples: Headers, Navigation, Content containers, Footer, Contact form, User profile page, Sign up/login modals
Pages
In the final stage, the templates come together to create pages. This is a great place to stress test all the components together with the actual content and identify any impact that the real data might cause.
Examples: Content detail page, Contact page
Challenges designers may face
What’s the starting point?
Remember Brad Frost’s words? It’s not a linear process but rather a mental model. Therefore it really depends on where you are in the process. Here are some tips from our past experiences:
If you’re starting from scratch
That means your process is likely to be more flexible and focused on the holistic view. In that case, you don’t want to limit your creative exploration by starting too granular and rather concentrate on broad strokes and how different ingredients work together.
Once your team agrees on the creative approach, you can break down those macro elements to micro ingredients. The more reusable your components are, the less you need to maintain them. Therefore, it’s crucial to understand where and by whom they’ll be used. Effective communication with wider team members such as developers, researchers, content strategists and accessibility experts at early stages leads to actionable insights that can help guide you throughout the journey. Key questions to ask yourself would be:
- What elements would be most suitable to act as our atoms?
- Are there visually and functionally similar instances that we could combine?
- Should there be different states or variants of the same element?
- Are our components right for the intended type and volume of content?
- Can they be updated to be more flexible in the future?
If you’re systematising or enhancing an existing experience
In that case, it’d be useful to take a step back and conduct an audit to understand the wider landscape and product goals. Key questions would be:
- What is the overarching vision?
- Do we have global styles and how do we minimise CSS overrides?
- What’s working and what’s not working?
- What are the dependencies and tech stack constraints?
- Which groups will be using our system and what are their needs?
- What are the parameters in governance, security and compliance?
The answers will help to structure the project and allow designers to implement the Atomic Design approach at the correct granular level.
What else should designers consider?
When you’re following an established methodology, it’s important to check your blind spots as you go. Here are some key considerations to take into account:
Data structure and tech tools used
The underlying database structure and programming languages significantly influence the library and component structure. Understanding the relationship between the code and design is extremely helpful when applying Atomic Design principles and grouping ingredients together.
Use case scenarios
User testing and scenario analysis provide clarity around how users would be likely to interact with your concepts. From a more granular perspective, these learnings can be translated into prioritising components and defining different states.
Responsive design
The form factor is extremely important in design and sometimes can be missed out when looking at things at a granular level. Pay attention to breakpoints and provide clear guidance on how components would react across different devices and screen sizes.
Brand, tone of voice and accessibility guidelines
Using brand assets and tone of voice in the most effective way across digital products is essential. Be aware there might be ingredients you haven’t considered before that could play a significant role in the future.
Documentation
It’s important to communicate how your methodology is coming to life and make sure everybody can use it with ease. Consider using a kanban and naming conventions, and pay close attention to your document structure including annotations and calling out any changes to older versions.
How to deliver a project using the Atomic Design methodology
There are multiple variables when it comes to project delivery, such as the type of the medium, application, data structure, programming language and more. However it always pays to start with a simple question: “How do I make it easier to use?”
At Moving Brands, we often start with a framework that includes three main sections — Foundations, Elements and Components — and then tailor them according to the wider product and client teams’ needs.
Foundations can be seen as an extensive style kit — if we were to build on the Atomic Design terminology, we might define this section as ‘subatomic particles’ or ‘quarks’. They include the core styles as design tokens, brand ingredients (such as icons, illustrations, motion, sound and more), as well as touchpoints across other drivers such as the experience principles, content framework and product voice.
The Elements section includes all the core building blocks alongside their variants and usually has its own unique hierarchy based on our project’s requirements. Then they come together to form the simple and complex modules in the Components section.
Finally, we collate pre-defined templates and key pages based on the interaction model in a prototype where our stakeholders can see the experience as a whole and tech teams get a better understanding of the functionality, features and different states of different modules.
Sahin Gumus adds: “Our approach supported by the Atomic Design methodology helps us deliver future-ready components-based digital libraries. In doing so, we fully recognise how the product could evolve in years to come. Research, cross-functional collaboration and documentation are at the heart of our process — we aim to minimise the design debt, thus reducing design dependencies and enabling our clients to make faster decisions in the long run.“
4 key takeaways
We hope we’ve conveyed our enthusiasm for the advantages offered by Atomic Design. Of course, everyone’s experience will be different but here are four key learnings that we’d like to share with you if you’re interested in trying out this methodology:
1. Smooth and future-proof
Atomic Design helps reduce the friction between design and tech implementation. It also provides a cohesive structure for digital products that are reusable and scalable, which means less time spent on design updates and more time on UX and prototyping down the line.
2. There is no silver bullet
Each digital product comes with its own requirements and structure. Therefore, Atomic Design should always be seen as a mental model (rather than a linear process) to find the right solution.
3. Take a step back
When working on a new project, paying close attention to user experience, understanding the needs of wider teams, aligning the structure with key outcomes, and defining measurable goals can help you get there quickly.
4. Practice makes it perfect
Learning a new skill and transforming the way you work takes practice — but the good news is it gets better over time. In the context of Atomic Design, you can start by looking back at past projects and seeing how these principles could have been implemented or applied better. This exercise can help designers improve their Atomic Design eye.
