Image for post
Image for post

Atomic Design and Its Modular Application in UX/UI Design

How to grasp the concept quickly

Eva Schicker
Jan 27 · 5 min read

UX Design Essentials: Atomic design and modular thinking

The concept of atomic design is every visual designer’s dream tool box. It is a simple, modular design system for the digital screen. It uses single elements (atoms) to build entire landscapes (interactive screens).

The system is borrowed from chemistry.

(*Atoms break down into smaller units, but for the purpose of Atomic Design, we will not delve deeper into the structure of an atom here.)

Each atom has a specific shape formed by its properties

Image for post
Image for post
In UI, single atoms are unique vector shape elements, such as a square rectangle, a circle, a triangle, or a round-corner rectangle.

One atom = one UI element = one building block

Image for post
Image for post
This illustrates one atomic symbol performing one UI function. The particular symbols can be assigned to any UI function.

The use of single elements to create an interface from scratch allows us to validate the details early on in the design process. The combined elements or atomic structures can be kept simple.

In chemistry, atoms combine to form molecules

In a modular design process, elements combine to form a unique unit with a clear function.

UI elements combine to form a clear function

Image for post
Image for post
The number of atoms/elements used depend on the function of the molecule/UI unit.

A molecule in the form of a modular UI unit

Image for post
Image for post
In this example, the UI unit is clearly defined by its three elements.

On the left, we can sense that these three atoms could be arranged in many different ways. However, the UI unit on the right show us that this arrangement is the best functional design for the user to understand what the interaction implies.

From molecules to organisms

Organisms are formed by combining UI units and single elements/atoms that take up particular parts of the screen.

The combination of UI units formulate the user’s interaction, or intent of interaction on the screen.

Remember, UI units are built of elements (atoms), thus, an organism can contain many individual elements, either in a repeat pattern, or in a unique single formulation.

Image for post
Image for post
An example of a repeat pattern of one UI unit.

This organism is composed as a repeat pattern, consisting of 9 UI units. For the user, the interface function is easy to understand (touch the numbers).

From pattern to template

Image for post
Image for post
On the left, we see the atomic structures of the molecules, which combine to from organisms in a repeat pattern. On the right, we see the user interface as the task is being implemented. The repeat pattern allows for a clean and structured template.

Distinct compositional organisms form the template for this screen interface. It remains consistent throughout the user’s path, until certain criteria are met, such as the display of a ten-digit number.

Thus, we created an interactive screen with a clear organism structure based on UI units and elements.

Creating clean interactive prototypes by utilizing UI units and elements with modular template design

Image for post
Image for post
Two varying design options based on the same number of UI units achieve the same outcome. Each set up allows the user to tap a ten-digit number which engages the green “call” button to dial the number.

Here we can see a different pattern approach with the equal number of UI units. Each design has its own distinct interface approach, although the user’s end point remains the same, ie, to tap a ten-digit number that allows the green phone button to engage.

Note: In these options, the green dial up button has a prominent position on the page, an interesting UX aspect

Through user testing, the best design option will be implemented. However, the number of atoms, or single elements, the set up of the molecules, ie, UI units, and the shape of the organisms which build the template pattern is determined by the function of the user’s interaction.

In this design sample, we want the user to tap a ten-digit phone number with the least number of steps. Even though this is a simple user interaction, once the elements (atoms) are established, there are many design variations that can achieve this task.

To remember

Multiple atoms combine to form molecules

Molecules are UI units with a specific functional purpose

Multiple molecules/UI units combine to form organisms

These organisms combine together screen templates, sometimes with the addition of single atoms and/or molecules.

Break it down and rebuild

When we interact with individual screens, we can easily break a screen design into molecules and atoms. The challenge lies in editing out unwanted elements and add-ons that create data clutter. As UX designers, we want the user to have the fullest experience with the least interactive resistance.

For that, we need to understand the principle behind atomic design.

We are designing digital UX systems, not individual book pages

In summary

Read up on more UX design tools here:

Thank you!

The Startup

Medium's largest active publication, followed by +775K people. Follow to join our community.

Eva Schicker

Written by

Welcome. I write about design, UX, UI, animation, creative entrepreneurship, art, & life in NYC. UX Director Lelantos Press, Artist, UX GA NYC Bootcamp grad.

The Startup

Medium's largest active publication, followed by +775K people. Follow to join our community.

Eva Schicker

Written by

Welcome. I write about design, UX, UI, animation, creative entrepreneurship, art, & life in NYC. UX Director Lelantos Press, Artist, UX GA NYC Bootcamp grad.

The Startup

Medium's largest active publication, followed by +775K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store