How Atomic Design Empowers Brands & Marketing Teams

In this article we explore how a design system can help brands grow by creating consistency and speed.

Before we begin, it is important to understand the basic theory of Atomic Design. In 2016, Brad Frost published a book called Atomic Design, which established the foundational methodology that many in the web industry use today. This book was critical in helping web design evolve beyond creating ‘fixed’ pages and provided the theory for design systems using chemistry as a metaphor.

In the book, Frost explains the origin of Atomic Design in the following quote:

“In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc.) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.”

- Brad Frost

Now that we have a grasp of the theoretical principles of Atomic Design, we can begin to get an understanding of the power of design systems.

In Atomic Design there are five distinct levels:

• Atoms (the basic building blocks)
• Molecules (atoms combine to form molecules)
• Organisms (molecules combine to form organisms)
• Templates (organisms group together to form pages)
• Pages (pages help you test the effectiveness of the design system)

For more information about Atomic Design, click here

Step 01: What is the objective of your design system?

Before you start designing anything, it’s important to start with a single question: 

How can a design system help me achieve my marketing goals? 

If you’re not sure where to start, it helps to consider the following:

• What is your biggest challenge in marketing your product/service on your website?
• What is one feature you wish your website had?
• Which aspect of your business are you trying to grow via your website?

What you decide at this phase will help you begin to define the marketing objectives for your design system. Knowing that atoms are the basic building blocks, these foundational elements are applied to web interface items such as form labels, an input, or a button. Atoms can also take form through elements of color, type, and motion. As Frost points out, like atoms in nature, these are fairly abstract and often not terribly useful on their own. However, once they are applied to a global style sheet, they become very useful in maintaining granular consistency.

Step 02: What parts of your brand will help get your design system started?

Once you have outlined your objective, it is important to conduct an audit of the elements in your brand with which you would like to move forward. Many elements go into establishing your brand, so this step will help you answer the following question:

What is missing from your brand that is preventing you from growing?

A few things to consider in this phase:

Oftentimes, a design system is not a complete redo, but rather an ‘update’ to your current system. In our experience, there are typically aspects of your brand that are working really well and don’t require change. It’s best to start with what is working before addressing what isn’t working. This can be something as foundational as form fields, color palette, and typography - to more impactful elements like motion and dynamic content.

It is often best to visit your company’s vision, mission, and values when deciding which elements to continue to move forward with and which elements are no longer needed.

Step 03: Create a design system to help you grow.

Once you’ve established your goals and brand elements, it’s time to begin the process of designing your system.

Consider this process when designing your system:

• What is the origin of your brand?
• What is inspiring to you about other brands - both in and out of your category/industry?
• What elements are needed to execute your objective?

Origin
Think of the origin of your brand as your company’s character. This step of the process is where you will gather as much of a comprehensive understanding about your company as you possibly can. The goal of this step is to establish why your company was started and how you can use this foundation to help shape where it’s going. 

Inspiration
Inspiration can come in many shapes and forms. This is the part of the process where you begin to shape what your design can become by looking at the world around you. This is work that is intended to be aspirational and help paint a picture of how the design system will come to life. Creating moodboards is a great way to articulate your inspiration for stakeholders. 

Execution
Once you have completed your moodboard, it’s time to turn your vision into a functional design system. At this point you can begin planning the human and financial resources required to execute your vision. This is a great opportunity to engage with partners both inside and outside of your organization for help.

Step 04: A toolkit to help brand teams build pages quickly and consistently.

Once you’ve built your design system, and everyone on your team as well as company stakeholders are in alignment, it’s time to create pages to get your website in front of your target audience. Once your design system is in use, you can begin to test and iterate.

Now that you have completed the work of building your design system, it’s important to think of the system in terms of components, not fixed templates.

Consider these key concepts when using your components to build pages:

• What is the goal of the page?
• What components will best help me achieve my desired outcome?
• How can I reorder the components on a page to help me market more effectively?
• Are there components that I’m missing and need to consider building?

It is important to always remember that your design system is a living organism that will require attention and evolution to remain effective and produce the results you desire.

Your design system is a tool that will help your business become more efficient and aware of itself through use and iteration.