Website Creation Process: Atomic Design

Do you like saving time and money? Yes or no?

Everyone who works on custom website projects should read Brad Frost’s book Atomic Design. You can read it for free online! And it’s short! With pictures!

TL;DR (too long, didn’t read)

If you’re strapped for time, I suggest starting with chapter 4, Atomic Workflow. (And when you want to read the rest, feel free to skip the coder-y chapter 3!)

Still TL;DR

Okay, I get it, ain’t got time: just read the sections in Chapter 4 about redefining design for the web, and death to the waterfall/linear process. (But I personally wouldn’t want to miss the part using an analogy about organizing Legos and how it relates to web process.)

The Gist

Using design systems promote consistency and cohesion, speed up your team’s productivity, establish a more collaborative workflow, establish a shared vocabulary, provide helpful documentation, make testing easier, and serve as a future-friendly foundation. The “atomic design” system consists of atoms, molecules, organisms, templates, and pages. The book goes into not-overwhelming detail about what atomic design is, how to get client buy-in, a workflow process, and how it helps after the site is launched.

Two tidbits that caught me by surprise (both in Chapter 4)

  • a compelling case for creating initial content and display patterns with… a spreadsheet
  • the assertion that “If developers aren’t coding from day one of the project, there’s something wrong with the process.”

There are LOTS of good tidbits in there nestled in among the big ideas that could be a real game-changer if something doesn't feel quite right with your website projects.

Read it with an open mind and let your gears start turning…


Earlier Post: Taming the email beast

Later Post: The Morning Habit, Part 1

All Posts