Craft By Zen

Curation  /  Lindy Library  /  Atomic Design

Book cover for Atomic Design
Book cover for Atomic Design
When designing from the ground up, create small, atomic components that can be combined into bigger components. Using biology as a guide, the complexity is organized into molecules, organisms, then pages. Templates are also used as layouts for those pages.

Prior to reading Atomic Design, I was set on designing websites through pages. You think about the page as a whole, maybe breaking them apart into smaller sections. When I started with wireframing, I didn’t think in the framework of design systems. I took what I knew from looking at websites all day and emulating what I saw.

Brad Frost breaks down this into chapters about where we are coming from, what to do instead, and how to organize our components. This has been fuel for what was to come next as UI view frameworks made it easier to conceptualize and implement components. Web Components made it compliant with web standards. Sketch and Figma paved the way for that integration between design and code.

While not every project should hold the folder concept of atomic design, its idea echos in the front-end ecosystem. For smaller projects, I use atoms, single-level. For larger projects, adding molecules, and maybe organisms, helps with breaking down the necessary parts. Even better is a design system that has many of these integrated so I don’t have to think about them.

While the book is older now, it’s still a great read and a great way for me to brush up on how to start a project with components in mind.