Applying Atomic Design principles when creating digital products

Moving Brands®
8 min readOct 19, 2022

--

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.

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 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.

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

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

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.

--

--

Moving Brands®

We are an independent, global creative and innovation partner to 6 of the world’s 10 most valued brands. London/Zürich/SF/NY/LA