Atomic Design and Its Modular Application in UX/UI Design

How to grasp the concept quickly

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.

In chemistry, an atom is the smallest unit* which combines with other atoms to form molecules, which then combine to form organisms.

(*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

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

In UI design, we take one atom at a time and assign it a unique property, such as button, label, text field, and others.

One atom = one UI element = one building block

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

To form a molecule, atoms must unite for a greater purpose. This is equally true for the screen elements. Thus, elements combine to form a clear UI unit function.

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