Atomic Design in WordPress

An Overview & Resource Guide

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
  • Molecules
  • Organisms
  • Templates
  • Pages.

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

  • Paragraphs
  • Cards
  • Lists
  • Filter Search

Contextual
Parts

  • Product Cards
  • Event Lists
  • Site Header
  • Portfolio Filter Search

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…

  • Knowledge silos
  • Talent bottlenecks
  • Bloated, chaotic codebases
  • Training Time

Atomic Units

1

Atoms

The most simplified interface pieces like Paragraphs, Buttons and Boxes.

2

Molecules

The most common design unit creating parts agnostic of purpose like search fields and cards.

3

Organisms

Top-level parts of an interface and larger subgroups including Headers, Product Cards and Email Signup Boxes.

4

Templates

Provide the wireframe or visual rhythm for Pages. Templates contain the spacing, order and proportion of other components.

5

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.


Product Owners

  • Shared Vocabulary
    Discipline-agnostic framework for describing and sizing interfaces.
  • Shared Gains
    All features improve when their underlying atomic components get updated.
  • Right-Size Frontend Work
    Estimate work more accurately by evaluating components that need created and modified.

Developers

  • Codebase Organization
    A predictable, consistent approach to directory structures and code-splitting.
  • Remove Bottlenecks
    Prevent knowledge silos in specific people and teams. Empower designers to make edits. Empower developers to assemble.
  • Improved Speed, Testing & Consistency
    Chefs have mise en place to help them move quickly, produce consistently. Same idea.

Designers

  • Future & Big-Picture Focus
    Free designers to focus on big picture, focus on optimization and system-wide iteration instead of constant maintenance and feature sign-off.
  • Near-Universal Compatibility
    Works with JS, PHP, etc. Works with Bootstrap and whatever custom rig you’ve designed. Works with agile. Works with legacy codebases.
  • The X-Factor
    Sometimes we need to spend money to make money, use time to make time. Investing in an Atomic strategy can free you to do more.

My Slides from WordCamp San Antonio

The Book Is Great.

Get the book. It’s free. Support the Author.