From Template to Atoms.

Created on November 12, 2023 at 11:30 am

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.

Connecting to blog.lzomedia.com... Connected... Page load complete