Brian Feeney

Path of Atomic Design

Josh Clark clarifies a misconception about Atomic Design, which helps explain exactly why its so useful. He explains:

Right from the start, when Brad was first developing his tools and methodologies in our designs of TechCrunch and Entertainment Weekly, our process constantly zoomed back and forth between page level and atomic level. It’s never a linear path from small to large; it’s a constant roundtrip between the two scales.

Atomic Design prescribes a small-first process, but, like Josh says, it's a cycle. Sometimes, it's pretty chaotic, with design play often driving the car. But the structure of Atomic Design means you're always going back to defining and redefining the smallest elements (atoms), which are then used to construct larger ones (molecules, organisms, etc.). By the time you have your sights on the finish line, you'll have a highly structured design and front-end code architecture for building out nearly anything else in the future.

I've seen this play out a half-dozen times or more now on large projects. If you pay close attention to the detail (the atoms), and maintain control over the depth and breadth of your style guide, what you build will be highly efficient and easy to work with going forward.

April 10, 2017