How Atomic Design Found Brad Frost | UX Booth (2024)

8 years after Brad Frost discovered atomic design, we at R/GA still leverage it on countless projects. But how did it all start? Where did atomic design come from? How did it find Brad Frost?

There was something sticky about high school chemistry. No matter where else he turned for inspiration, something kept bringing Brad Frost back to that class with the periodic table.

Snow-covered R/GA New York’s courtyard in a thin white blanket. Inside, a warm, dark space welcomed a slew of coffee-slugging web developers. Nikes dripped as the ice melted. Whiteboards abounded. Keyboards clicked in harmony.

Brad Frost, designer, developer, design system consultant, speaker, writer

At R/GA, Brad Frost had the fortune of developing mobile websites right before the proliferation of smartphones. After all, they needed to accommodate more devices, more viewports, and more browsers than at any point in history.

Brad’s memories of high school chemistry class began crystallizing with his career as an early mobile web developer. He began noticing similarities, parallels really, between chemistry and the responsive websites he was building. R/GA’s office was famous for its display of outsider art, courtesy of then-CEO Bob Greenberg’s personal collection. Bob’s dolls adorned the office.


A doll from Bob Greenberg’s personal collection displayed at R/GA

Much like the Russian nesting dolls, chemistry, and web design, for that matter, there seemed to be a predictable pattern: a small, simple thing went into a larger, more complex thing. Then, that larger thing went into something even larger and more complex, and so on and so forth.

Chaos capitulated to order.

Size increased as the process perpetuated.

Simplicity surrendered to the inevitable complexity.

He realized that both chemistry and websites can be broken down into the same basic hierarchy! At the smallest level, you have atoms, which cannot be reduced any further. However, they can bond together to create molecules. Molecules can then combine to form organisms. All matter, it turns out, boils down to these same core components.

Exactly like matter, websites can also be constructed all the way up from atoms, to molecules, to the organism-level. For example, with websites, one can think of a simple button (like the one below) as an atom. On its own, a button cannot do much. If it has no label, you don’t even know what it does. Plus, if it doesn’t take you anywhere or accomplish an action, it’s fairly useless.


Example from Storybook

Yet, to design a website with functioning buttons, it is rather helpful to think of the button as an atom. Because once you design that one atom, you can apply it to the entire site in other areas where you need buttons. This way, you can limit the number of one-off components in your repository. Your buttons will all look consistent and you won’t have to reinvent the wheel every time you need a new button. This also mitigates the risk of writing duplicate code.


Example from Storybook

More interestingly, when combined with other atoms, such as a search bar, your button atom can now actually help the user achieve something very real and functional. This is when atoms bond together to form molecules.

Molecules are made up of multiple atoms that form a simple web component. They can be combined with other molecules and atoms to create even more complex sections of the website. For instance, a global navigation (like the one below) is an organism, consisting of multiple different atoms and molecules.

Here, atoms and molecules join forces to form an organism that is greater than the sum of its parts. The beauty of this approach is that anytime you need to update your button atoms across the site, you can just update that one atom, and that update can then be applied to the rest of your design system.
The focus of constructing a website, Brad began to understand, should be designing, not a set of webpages, but rather, a flexible system of components that can be reused nimbly across multiple pages: a modular design system.

“We’re not designing pages, we’re designing systems of components.”— Stephen Hay,Responsive Design Workflow

By 2013, Brad officially coined the term “atomic design.” It described this simple mental model for constructing web interfaces out of smaller components that together form the building blocks of larger components. Atomic design offered a durable, scalable, and reusable design methodology.

Brad understood that when you build a website from the ground up, from the atoms, to the molecules, to the organisms, and eventually, the templates and pages, you are afforded maximum flexibility. You are able to maintain cohesion in code and visual design while also still maintaining the modularity to quickly extend your components to various sections of the website.

Atomic design methodology helps limit the total number of components in your design system. It also helps establish and standardize a vocabulary around your design system. So when multiple developers are discussing a particular component, they’re all calling it the same exact thing.

By simplifying these complex components, new developers and third parties can more easily interpret technical documentation and familiarize themselves with a system’s architecture. This is more important than ever before, as our work now involves more parties than ever to design and develop experiences at the scale and complexity our users expect.

As the last snowflake wilted from R/GA’s courtyard, rock salt burning it to smithereens, Brad closed his MacBook Pro and signed off for good. He knew that the web would always be fluid and the need to innovate how we design for it would persist. But for now, atomic design seemed like the best model.
He was excited to move on to write and speak full-time about atomic design and other methodologies he picked up at work.

While the web continues to evolve, to this day, we at R/GA still leverage atomic design in countless projects. It is not a silver bullet meant to solve all problems, but it does help guide and ground our design. It allows us to iterate quicker while, at the same time, future-proofing our clients’ design systems.
8 years after Brad Frost first introduced atomic design to the world, I managed to track him down and ask him how his trademark methodology had held up over the years. His answer was quite pithy. “It’s still sturdy,” he said.

As devices and screen sizes transform, reshaping online environments, as new social media, gaming, and streaming platforms arise, the systems we design against are only becoming more complex, not less. Brad Frost didn’t change this fact. He embraced it and invented a model that leaned into that truth.
The web is only getting more complicated, not less. So why not design systems in a way that takes all of that complexity and makes everything really simple? Why not reduce the complexity into the smallest, most manageable pieces?

Maybe there was a reason Brad kept coming back to chemistry class. Maybe there was a reason chemistry worked exactly as it did. Maybe it wasn’t an accident. Maybe when it comes to design systems, Mother Nature knows best.

How Atomic Design Found Brad Frost | UX Booth (2024)

FAQs

What is the summary of atomic design? ›

Atomic design is a product design methodology that's based on a hierarchy of varyingly complex components. Its creator Brad Frost classified it into five stages: atoms, molecules, organisms, templates, and pages. According to this theory, a change at any stage will affect all stages that come after it.

What is the atomic approach in design system? ›

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.

What does the atomic design principle imply? ›

Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems. Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.

What is the difference between pages and templates in atomic design? ›

Pages in atomic design are instances of templates in your user interface but in high fidelity. Pages are what your users will see in the finished product. Pages take on multiple template forms and help designers think about the different states our base atoms and molecules would acquire.

How do you summarize the atomic theory? ›

Summary
  1. All matter is composed of extremely small particles called atoms.
  2. Atoms cannot be subdivided, created, or destroyed.
  3. Atoms of a given element are identical in size, mass, and other properties. ...
  4. Atoms of different elements can combine in whole number ratios to form chemical compounds;
Aug 3, 2022

What is the main idea of atomic theory? ›

It involves the following postulates: (1) Elements consist of indivisible small particles (atoms). (2) All atoms of the same element are identical; different elements have different types of atom. (3) Atoms can neither be created nor destroyed.

What are the 3 main atomic models? ›

What are the different atomic models? The better known atomic models are Dalton's atomic model, Thomson's atomic model, Rutherford's atomic model, Bohr's atomic model, and the quantum atomic model.

What are the 4 main parts of the atomic model? ›

Atomic Structure - Electrons, Protons, Neutrons and Atomic Models.

Why is atomic design good? ›

Atomic design methodology is a powerful process for creating design systems that are modular, reusable, and scalable. The concept, developed by Brad Frost, is based on the idea that a design can be broken down into its smallest parts or 'atoms,' which can then be combined to form more complex components.

What is your understanding to the atomic theory? ›

Atomic theory states that matter is composed of discrete units called atoms, as opposed to the obsolete notion that matter could be divided into any arbitrarily small quantity. It began as a philosophical concept in ancient Greece (Democritus) and India and entered the scientific mainstream in the early 19th century.

Is atomic design a design pattern? ›

Atomic design is a powerful and effective design pattern for e-commerce site development. By breaking down your interface into smaller, reusable components, you can ensure that your site is more maintainable and scalable over time, and that it has a consistent look and feel.

What are the 3 kinds of design templates? ›

What are the three types of templates?
  • The office doc template. Examples of office doc templates include: Slide decks, letterhead, agreements, and policy templates. ...
  • The digital template. Examples of digital templates include: Online advertisements, email banners, social banners, social posts. ...
  • The print template.
Oct 9, 2019

Why use design templates? ›

A design template is a reusable asset that defines a set of layouts for an application. It is a way of separating data from its presentation. Design templates can be used for individual sections or for entire pages.

What are template designs? ›

Design templates are pre-made designs and documents that can be customized. Templates are often designed to meet specific standards or specs so they're consistent between users and mediums. You can use pre-designed templates from template libraries and websites or create custom templates for future use.

What is the summary of the atomic structure? ›

Atoms consist of an extremely small, positively charged nucleus surrounded by a cloud of negatively charged electrons. Although typically the nucleus is less than one ten-thousandth the size of the atom, the nucleus contains more that 99.9% of the mass of the atom.

What is atomic habits a summary? ›

Atomic Habits, written by James Clear, is a bestselling self-help book that focuses on the power of small, consistent changes to improve one's life. The book provides practical strategies and tools for creating and maintaining positive habits, and for breaking negative ones.

What is the summary of an atom? ›

Atoms are the smallest unit of matter (something which can be physically touched) that retains all the chemical properties of an element. They combine to form molecules (which in turn form solids, gases, and liquids).

What is the summary of the modern atomic theory? ›

The basics of the atomic theory are that atoms are the smallest units of chemical matter. Elements are the simplest chemical substances that cannot chemically break down any further. Each element is made up of its own atoms, different from atoms of all other elements.

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Terrell Hackett

Last Updated:

Views: 5594

Rating: 4.1 / 5 (72 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Terrell Hackett

Birthday: 1992-03-17

Address: Suite 453 459 Gibson Squares, East Adriane, AK 71925-5692

Phone: +21811810803470

Job: Chief Representative

Hobby: Board games, Rock climbing, Ghost hunting, Origami, Kabaddi, Mushroom hunting, Gaming

Introduction: My name is Terrell Hackett, I am a gleaming, brainy, courageous, helpful, healthy, cooperative, graceful person who loves writing and wants to share my knowledge and understanding with you.