From Template to Atoms.

By admin
I’m definitely not trying to single this particular article, but it’s a common misconception about atomic design that’s persisted over

the years
DATE

:

Starting Point: The initial stage of

Atomic
PERSON

design begins with the smallest design elements, such as buttons, labels, form inputs, and error messages. These are the atomic units of design that serve as the foundation for the entire system.

This is an incorrect interpretation of atomic design. Atomic design is not a sequential process, which is something I’ve made it clear from

Day 1
DATE

. From my book:


Atomic
PERSON

design provides us a structure to navigate between the parts and the whole of our UIs, which is why it’s crucial to reiterate that atomic design is not a linear process. It would be foolish to design buttons and other elements in isolation, then cross our fingers and hope everything comes together to form a cohesive whole. So don’t interpret the

five
CARDINAL

stages of atomic design as “Step

1
CARDINAL

: atoms; Step

2
CARDINAL

: molecules; Step

3
CARDINAL

: organisms; Step

4
CARDINAL

: templates; Step

5
CARDINAL

: pages.” Instead, think of the stages of atomic design as a mental model that allows us to concurrently create final UIs and their underlying design systems.


Atomic
PERSON

design is a mental model that allows people to consider the whole and the parts of the whole at the same time. The linked article invokes a painter:

In contrast to

Atomic
PERSON

design, the process of creating

UI
ORG

screens often resembles the work of a painter drawing a portrait. While both

Atomic
PERSON

design and

UI
ORG

screen creation aim for cohesive and visually pleasing results, the approach differs significantly.

Again, this misrepresents atomic design. Turns out I also invoke a painter when describing atomic design (with some great help from the great

Frank Chimero
PERSON

):

In his book

The Shape of Design
WORK_OF_ART

,

Frank Chimero
PERSON

beautifully articulates the power this traversal provides: The painter, when at a distance from the easel, can assess and analyze the whole of the work from this vantage. He scrutinizes and listens, chooses the next stroke to make, then approaches the canvas to do it. Then, he steps back again to see what he’s done in relation to the whole. It is a dance of switching contexts, a pitter-patter pacing across the studio floor that produces a tight feedback loop between mark-making and mark-assessing.

Frank Chimero
PERSON

Atomic design lets us dance between contexts like the painter

Frank
PERSON

so eloquently describes. The atoms, molecules, and organisms that comprise our interfaces do not live in a vacuum. And our interfaces’ templates and pages are indeed composed of smaller parts. The parts of our designs influence the whole, and the whole influences the parts. The

two
CARDINAL

are intertwined, and atomic design embraces this fact. When designers and developers are crafting a particular component, we are like the painter at the canvas creating detailed strokes. When we are viewing those components in the context of a layout with real representative content in place, we are like the painter

several feet
QUANTITY

back from the canvas assessing how their detailed strokes affect the whole composition. It’s necessary to

zero
CARDINAL

in on

one
CARDINAL

particular component to ensure it is functional, usable, and beautiful. But it’s also necessary to ensure that component is functional, usable, and beautiful in the context of the final

UI
ORG

. Atomic design provides us a structure to navigate between the parts and the whole of our UIs, which is why it’s crucial to reiterate that atomic design is not a linear process. It would be foolish to design buttons and other elements in isolation, then cross our fingers and hope everything comes together to form a cohesive whole. So don’t interpret the

five
CARDINAL

stages of atomic design as “Step

1
CARDINAL

: atoms; Step

2
CARDINAL

: molecules; Step

3
CARDINAL

: organisms; Step

4
CARDINAL

: templates; Step

5
CARDINAL

: pages.” Instead, think of the stages of atomic design as a mental model that allows us to concurrently create final UIs and their underlying design systems.

It’s been fascinating to see this buzzword take off and take on a life of its own. I ultimately don’t care about these misinterpretations all that much, but occasionally I like to remind folks that atomic design is a mental model for thinking about user interfaces as interconnected, hierarchical systems. Atomic design helps people consider the whole and the parts of that whole at the same time.