Atomic Design is
not mad science
It’s a way of thinking about digital products.
A methodology.
A predictable and reusable method for splitting & categorizing the parts that make up a visual interface.
You do not need to know design or have design sense.
Atomic Design is a cross-disciplinary, method for a digital team creating visual interfaces no matter the underlying libraries.
Explode App & Site Designs Into Atomic Components
Split
Components are grouped into…
Atoms do not contain other Atoms.
Molecules do not contain other Molecules.
Organisms contain other Organisms.
Pages (with unique content) implement Templates (with a prescribed visual rhythm).
Implement
Similar to an organic ecosystem, smaller components are assembled to make common compounds and parts within larger systems.
Atomic Design acts as a sieve, separating the abstract from the contextual.
Abstract Components
Contextual
Parts
Evolve & Iterate
Atomic Design helps products evolve cohesively, across-features as a result of work on one feature.
Once built, Atomic Design helps us right-size work, lean on and iterate on existing work, apply fixes and accessibility improvements across the system and more.
Reduces…
Atomic Units
Atoms
The most simplified interface pieces like Paragraphs, Buttons and Boxes.
Molecules
The most common design unit creating parts agnostic of purpose like search fields and cards.
Organisms
Top-level parts of an interface and larger subgroups including Headers, Product Cards and Email Signup Boxes.
Templates
Provide the wireframe or visual rhythm for Pages. Templates contain the spacing, order and proportion of other components.
Pages
Description for this block. Use this space for describing your block. Any text will do.
How Atomic Design Applies in WordPress Products
Plugins
Admin Widgets, Dashboards, Config plus Public UIs.
Interfaces in the Admin including widgets, dashboards, settings pages, config wizards and more can be created Atomically.
Themes
Templates, Partials and Ecosystem Compatibility
Interfaces including Home Pages, Post Templates, Archives, Products and more can be assembled Atomically.
Blocks & Editor
Admin Widgets, Dashboards, Config plus Public UIs.
In addition to “thinking in Blocks” you can assemble blocks using Atomic Design (not to be mistaken with the Atomic Blocks plugin)
Headless
Just like WordPress Themes, headless sites powered by an API can have an Atomic-based frontend, perhaps sharing components with Blocks to make marrying the two easier.
