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.
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.
Atomic Design is a mental model which allows teams to build user interfaces systematically by assembling smaller building blocks to create meaningful structures
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
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.
Although this standard diagram looks like a linear process, Atomic Design should always be seen as a mental model to create systems of components
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
Similar to chemistry, atoms are the basic building blocks of Atomic Design
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
A group of atoms come together to create molecules
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
Organisms consist of atoms and molecules assembled to create distinct structures
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
Templates refer to containers (or a group of containers that form pages) that are ready to be customised
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
Pages have the highest level of fidelity and usually showcase the actual content that will appear at a particular destination
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.
The creative exploration process requires flexibility — keep this mental model in mind but don’t let it limit your creativity.
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.
Consider how components will need to adapt when something changes — such as the screen size or their state
What else should designers consider?
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 form an extensive style kit that has multiple touchpoints across brand, digital design and tech teams
“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.”– Sahin Gumus, UX Director
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.
This article has also been published on Medium
