Atomic Design – from nature to User Interface

Atomic Design

Brad Frost has created a methodology that’s not so much of a linear process as a mental model to help us think of UI as a cohesive whole and yet, a collection of parts. In Atomic Design, from all the atoms, you can start building blocks to relatively complex UI components with unique properties.

All interfaces are broken into fundamental blocks on which we build on. It’s about atomic construction. Since the whole universe can be divided into smaller parts (atomic elements), the same may be done for user interfaces. And this is precisely what happened. 

Atomic Design methodology – the beginning of all

In the end, Atomic Design was one of the first ways to group and make a coherent structure for design systems. Later on, because of its dynamic nature, it the has evolved and took a different form. There’s now an extended version of this methodology.

If you want to know all about the process, I recommend reading from the very source of Atomic Design – Brad Frost himself. He covers everything you’d like to know about the methodology in his book, including the tools for building Atomic Design systems, such as Pattern Lab. But now, let’s focus on the basics – Atomic Design principles, its relation to design systems, and see how it can benefit your business during the design process.

Atomic Design principles

Atomic Design is a methodology based on modularity, and it’s composed of five distinct stages (atoms, molecules and organisms, templates, pages) that can create whole user interface systems. Let’s take a look at the Atomic Design methodology’s elements.

Atoms

Compared to other elements, they’re the smallest functional units that provide a base for all the other UI components. Only one atom can be used for foundational building blocks for site layout. Basic atoms involve UI elements like a label, input, a button. 

Molecules

Two or more atoms form molecules, and atoms bonded are no longer basic components. Now, they have distinct new properties and functions. In other words, molecules are more advanced, like a simple form with a label or a button.

Organisms

According to Atomic Design principles, even more complex organisms built from various atoms, molecules, create organisms. In web design, these elements make up for distinct user interface sections like footers or navigation menus. 

Templates

This is where the chemistry analogy stops. Now we move on to the industry jargon, so let’s start with templates. They’re the skeleton of the pages, the design’s underlying content structure and ultimately, one of the highest elements of them all. You can build templates for views or whole user paths in a page layout because of them.

Pages

Pages are the last, most complex UI components composed of all the elements (atoms, molecules, organisms, templates). This is the page stage when designers create the final UI. They’re the templates, but with applied real representative content that’s visible by users. What’s more, they have many versions of the same template created by the design team. This template stage part is great for testing the entire system that’s been created.

When talking about atomic elements in the design system, I believe it’s worth examining other instances of the use of Atomic Design. There’s an interesting concept proposed by Jina in the Lightning Design System. Here, we’re talking about design tokens that Brad has adapted to the system as components of atoms. Why he did that? Because, as he states, in the natural world, atoms are the smallest functional units of matter, but they’re composed of even smaller particles like neutrons, protons, electrons. And this is precisely the role of design tokens in the UI sphere. These subatomic particles have to be applied to something, like an atom, to be functional. 

What is Atomic Design used for

There are many ways in which you can use Atomic Design. It can serve as an inspiration for building your design system and a foundation for a style guide. I wrote “inspiration” because it’s worth mentioning how Brad wrote about his conception in one of his blog posts:

” “Atomic design” as a buzzword encapsulates the concepts of modular design and development, which becomes a useful shorthand for convincing stakeholders and talking with colleagues. But atomic design is not rigid dogma. Ultimately, whatever taxonomy you choose to work with should help you and your organization communicate more effectively in order to craft an amazing UI design system.”

So, take the idea and use it as a tool to create your solution. Thus, from Atomic Design can benefit everybody that need reusable and repeatable elements. Thanks to that, it’ll save time for the team as they’ll have an organized system to base their work on.

Atomic Design & design systems

What does Atomic Design methodology have to do with design systems? As I wrote in the previous article about a design system, various businesses may use Atomic Design as a foundation for creating simple collections of reusable components and, ultimately, building a cohesive experience as a brand.

Atomic Design principles provide its users with a system, a structure of sort, not only to create our designs, but at the same time, it also allows specific instances. These involve building blocks for creating our UI design systems, pattern libraries and many more.

What’s in for you

Since the idea of Atomic Design is still growing and evolving, it’s no surprise that this phenomenon is gaining more and more followers. It gives a lot of valuable insight into UI interfaces. So the question is – what’s so special about it?

Focus on details

Thanks to dividing the components into smaller parts, designers create the system with a focus on details. This, in turn, has long term benefits. Because of Atomic Design, the creative team saves time and effort on working on something from scratch.

Comprehensive approach

From atoms to pages, you can see all the elements from their basic form to the most advanced. Together, you can form a final unified experience for the user with responsive design. 

More importantly, Atomic Design broadens the outlook – team members see everything connected to the project – the overall picture, design direction and its goals.

Reusability

Atomic Design involves mapping out the foundational components, building them into more significant organisms, testing them and ultimately, adapting them across different arrangements. From there on, you have basic and functional UI elements that can be used for the future.

This may influence the prototyping process since all we have to do is pick required elements and combine them. The mockup can be further customized and refined on the final website. As you can see, Atomic Design can significantly improve later processes of building other products and subpages.

Cohesive brand image

Atomic Design is dedicated to web-based interfaces, but it can be applied to any software. You can get inspired by the atomic elements, customize them according to your needs, and build your systems. And because this methodology is for pattern libraries, it helps a business form a cohesive brand image.

A perk for developers

As you can see, Atomic Design brings a lot of long-term benefits. Another one is for developers – it facilitates their job by organizing all the elements, so they don’t have to create a new code every time something new comes up. This, in turn, prevents situations with duplicate code. The process of designing pages is consistent, and you can see which UI components are used on a given part of the website.

Final words

Atomic Design is a methodology for grouping and building pattern libraries as well as design systems. Thanks to its analogy to chemistry, we get to see its organized and evolving nature. Hence, you can design UI interfaces effectively, do it component by component, and consider different element arrangements.

As designers, we draw inspiration from everything we can, including various methodologies such as Atomic Design. One of the most recent cases was when we were working on redesigning our new website. This approach of looking at every UI component as a living organism that eventually forms an entire interface has helped us build our design system.

Want to see some of the designs that we did? Check out our Dribbble profile.