Atomic Design Methodology for Building Web Design Systems

Designers must create complex interfaces that function effectively across different screen sizes and environments. This has changed the way creators approach their design process.

Atomic design is an approach to page building for building effective UIs from the bottom up. This methodology gained inspiration from the world of natural science—Atoms are the basic building blocks of all matter meaning that two or more atoms combine to form molecules.

Rather than designing collections of web pages, atomic design begins with the basic UI components known as atoms (buttons, menu items, etc.) and gradually builds the entire UI.

What is atomic design?

Atomic Design is a visual identity system methodology that separates the entire process when developing visual systems in a more organized way using atoms, molecules, organisms, templates, and pages. 

For example, a search icon and an input box are two separate atoms. Put them together to form a search box, and you've got yourself a molecule. Add block content place-holders below the search box, and you just created a template. Fill the template with content text and images and you have a complete page.

Who introduced the atomic design methodology?

The atomic design methodology was introduced by designer Brad Frost to help designers craft reusable UI systems seamlessly. He is a web designer, speaker, writer, and consultant. His book, "Atomic Design," introduces the methodology for creating and maintaining effective visual identity systems.

“As the craft of web design continues to evolve, We’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. Atomic design is a methodology for creating design systems.” - Brad Frost

Speed Up & Scale DesignOps with Atomic Design

Get a complete overview of the atomic design methodology and how it's used by creative teams to maintain brand consistency across the marketing site.

Get The Ultimate Guide to Atomic Design

What are the five atomic design phases?

Like in science, atomic design starts from the smallest instance of any website page:

1. Atoms

Atoms are the smallest building blocks of a website page. In atomic design, atoms refer to basic HTML elements that provide the smallest units of a web page, such as buttons, labels, and input fields. Fonts, color palettes, and animations are also considered atoms.

2. Molecules

Atoms are bonded together to create molecules, representing the second smallest groups of a website page. An example of a molecule is a blog subscription box made up of a field label, an input field, and a button.

3. Organisms

Organisms are groups of molecules that are joined together to form more complex beings. In interface terms, the organism is any design sequence that appears on website pages. 

The header and footer of a website page consist of two or more molecules, making them both organisms. The search bar is an example of a molecule used to build a header component.

4. Templates

Website pages start to take shape in the fourth phase of the atomic approach. Templates are groups of organisms combined to form the structure of a page.

If we look at a homepage, the header and footer organisms we started with are found in the homepage template. These organisms join others to make up the homepage template, as shown in the image above.

Templates are effective because they ensure components of a visual identity system are crafted to look and function together. Atomic design templates can be viewed as a skeleton of a page.

5. Pages 

After the first four phases, designers have all the elements they need to build out pages for the UI of a website. 

If the previous four steps were done correctly, then the final step gives designers the freedom to drop in images, text, and all that good stuff to give them an idea of what the UI will look like. 

The final appearance of the pages dictates whether the site is ready to launch, or whether the developer needs to loop back and make changes to earlier design elements.

Applying Atomic Design to Build Visual Identity Systems

Atomic design methodology helps build a cohesive brand identity in the most shareable and efficient manner.

Yes–it is possible to build a visual identity system using other approaches. However, the atomic approach does not creates significantly less work for other internal teams who would be using the system.

What is a visual identity system?

A visual identity system, also referred to as a design system, is a comprehensive framework of visual elements, such as logos, color schemes, typography, and imagery, which consistently and coherently represent an organization's brand and values across various mediums. It serves to create a recognizable and memorable brand image, ensuring that all visual communications are aligned and effective in conveying the brand's message to its audience.

It provides designers and engineers with a single point of access to visual style guides, typography systems, color systems, tokens, templates, component libraries of documented and coded elements to be reused, design patterns, voice and tone guides, and much more.

The design system that emerges from the atomic way of doing things contains all of the components in use, as well as their corresponding codes. This can be a useful tool for both designers and developers.

The most important aspect of a design system is its documentation, which includes instructions on how to use each component. Well-designed systems can aid in the development of a stronger relationship between the user and the brand, as well as the maintenance of consistency across multiple digital products.

How do you build design components for your visual identity system?

Components are functional elements of design. Think of them as building blocks of your design system. Combined, the design components form libraries that designers refer to and use when they create products.

A component can be anything – a drop-down menu, icon, button, or something more complex. The most important thing is that it combines elements that solve a particular problem in your digital experience.

When you create a new component, begin by building its default state. Find the most essential aspects of the component and write a generalized, default version of it. Each component should be usable in this state. For example, a given Button component will require a minimum of: 

• a label (such as text, or an icon)

•  some form of color, size, visual pizzaz

•  an action to perform when triggered 

The default configuration of these characteristics will inform the base usage.

Next, modify the component to include other states. For Button, this may include handling errors, allowing for an icon to display alongside the text, and building a loading state. In most cases, these states should work independently of each other to maintain a separation of concerns.

Why atomic design?

Breaking down big projects into templates, organisms, and molecules is efficient in itself. Atomic design will not only let the designer focus on small details but allows them to see the bigger picture—the web application’s user interface. Doing so allows designers to avoid creating a component more than once, saving designers time and promoting a culture of reusability. 

Mix and Match Design Components

By breaking down components into basic atoms, it's easy to see what parts of a website can be reused and how they can be mixed and matched to form other molecules and even organisms.

Above, you’ll notice there are three different pages: a homepage, a blog page, and an article page. Each is using the same components created from the atomic design process. This allows designers to build pages faster all while remaining consistent.

Website Code is More Consistent

For developers, the atomic approach gives them the guardrails they need to take existing components and implement them properly.

Because design components follow an approach like atomic design, developers have an established language and structure that is universal.

Atomic design is also great for any developer that is assigned to a new project. Since all design components are organized and should match any mockups for new website pages, development teams can easily differentiate from component to component.

Fewer Design Components to Manage and Organize

The issue many teams run into before implementing a visual identity system that follows the atomic methodology is the creation of duplicate components.

It’s easy for designers to fall into the habit of creating net new components when a similar one already exists. This is because:

1. The designer forgets about existing components.

2. There is no documentation tracking existing components.

By using the atomic approach, designers keep track of every single atom they begin with and document each instance that each is used to create a larger being or organism. 

Faster Speed-to-Market

Visual identity systems make cross-browser/device, performance, and accessibility testing easier; vastly speeding up production time and allowing teams to launch higher-quality work faster.

This is because all teams are speaking the same visual language. The common workflow for building new website pages looks something like this:

1. Marketing teams suggest a new page using the components found in the atomic design system.

2. Designers take the request and build the mockup using the same components.

3. Developers take the design mockup and launch the page.

In addition, baking things like accessibility into a living visual identity system scales those best practices, allowing your interfaces to reach more users and maintaining brand consistency across all digital channels.

Speed Up & Scale DesignOps with Atomic Design

Get a complete overview of the atomic design methodology and how it's used by creative teams to maintain brand consistency across the marketing site.

Get The Ultimate Guide to Atomic Design

Atomic Thinking is Best Applied in Design

The atomic design methodology makes visual identity systems scalable, understandable, and efficient. At the end of the day, having a source of truth for all the creative work for new website pages promotes a culture of consistency that many websites today are missing.