Why we love “Atomic Design” for web design

We’ve been offering web design for around 15 years now and have refined our process over time from presenting full mockups to clients to getting them involved early and often with what Brad Frost terms ‘Atomic design’. Read on to find out why this is such a powerful way of working.

From mockups to design systems

Way back when before websites were mobile friendly, pages were often a lot more complex than they are now. Many graphic designers moved into web design and as the pages didn’t need to change shape for all kinds of devices, they often looked like posters or other print materials. We often spent hours and hours working on these to present to the client. Most of the time it went fine, but sometimes they would recoil in horror as we’d gone in the wrong direction!

As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.
Brad Frost

With the advent of responsive web design and ‘flat design’, these complex designs morphed into cleaner, more adaptable interfaces and away from the idea of a fixed ‘page’.  Starting with their logo, colours and fonts, we started to produce elements like buttons, forms and content panels that could be remixed into the various pages on their new site. We still present example pages and clients soon see how it all fits together.

Atomic Design

This way of working was described by Brad Frost in his excellent book Atomic Design. He talks about Atoms (like buttons), Molecules (like a search form), Systems (like a header or footer), Templates (like a news listing) and Pages (like a homepage). This granular approach builds up from simple elements into larger and larger things to make the website.

The whole book is available for free if you’d like to read more! https://atomicdesign.bradfrost.com/table-of-contents/

Benefits

This was an opportunity to start showing the client things earlier on in the design process, getting feedback and ensuring we were on the right track. This made our clients happier as they could see things gradually develop as well as showing that we were getting on with it!

Designing for mobile devices and using Atomic Design has also helped focus on what is most important to the user. With very limited space on phones, the fancier designs we used to use would obscure the content. Stripping things back can focus the client on what they want to say, and focus us designers on clarity rather than design for its own sake.

Another benefit to this approach it fits in nicely with the way HTML and CSS are used to code websites, which makes life easier for developers. We use Advanced Custom Fields to create various panels in a simple page builder, which matches perfectly with the Atomic Design ‘Templates’.

Summary

Tying in with the need for websites to work on screens of all sizes, Atomic Design has helped us involve clients earlier, focus on what matters to their customers and and build cleaner, more modular websites. Thanks Brad!