My journey with Atomic Design (part 1)

Finding the atoms, molecules and organisms of the website #atomicdesign

I’ve recently gone through a name change for my business. With a fantastic new web design and branding by Creative/Art Director and friend, Jacalin Ding, it was time to get started on the building blocks of the site.

I’d read Brad Frost’s Atomic Design book earlier in the year and I was keen to use the methodology for my own site. In short, Atomic Design is about taking the idea of a pattern library/style guide to a broader definition and seeing your website as a complete set of components that can be defined as atoms (e.g. icon), molecules (e.g. search bar) and organisms (e.g. navigation menu). From there you can build page templates and eventually, pages.

I think of it similar to a Lego set that allows you to build up different designs based on particular blocks that differ in size, colour and complexity but at their heart they can be broken down into various sized components.

There is also a whole lot of information in the book about implementing the philosophy in the broad context of a team. The interaction between the team members is a lot more organic than a clearly defined hierarchy of one team handing the project onto the next team down the line. Now wouldn’t that be nice to have an opportunity to be genuinely collaborative on a web project from the get go?

Step 1: Find the website components
Supplies: post-it notes, textas, laptop

With my laptop open with all the page designs, I started to find all of the individual components and categorise them into atoms, molecules and organisms. Soon I had a collection of post-it notes scattered on the floor that resembled my website! Now to actually build it…

Step 2: Start building the style guide/pattern library in code
Supplies: coffee, text editor

One of my navigation molecules

This is the fun part. Coding up all of your atoms first, that form the basis of your molecules, which then form the basis of your organisms. I’m still working my way through the organisms right now but I wanted to share with you some learnings from my experience so far:

  • be in the mindset that you’re actually building your new site, not just a pattern library. Everything should be ready to pick up and drop into a page template when ready
  • Assign classes and ids based on the components so they’re ready and available to be used anywhere (i.e. keep them as generic as possible, avoiding the assumption of which page they might be used on)
  • use comments in your html to describe each component — this is particularly useful if you don’t want to label everything publicly (due to time/budget) or need to version control changes as you update the pattern library.

I’m really excited to see how my site comes together once all of the groundwork has been done. And I’d love to hear about your own experience of the technique and how it’s changed the way you build for the web.

If you’re interested in learning more about Atomic Design and the story behind it, I recommend checking out this talk by Brad Frost.