Over the years, we’ve cultivated a straightforward and effective starting point for our website designs that consistently gets us results. And it begins with atoms; the idea that by starting with the most basic elements, things can snowball into a great outcome.

First popularised by Brad Frost, ‘atomic design’, as it’s become known, is now the gold standard of web design. It allows complex systems to emerge from tiny, individual elements, all whilst keeping a tight and regimented style.

An ‘atom’ in this instance is really just designer slang for the most basic component of a site, for example, a button. Atoms are usually single elements on a page, and in and of themselves, don’t do much to impart style or substance.

Here’s an example of three ‘atoms’:

By themselves, they don’t convey much ‘brand’ or any distinct visual style, however by assembling them into more complex ‘molecules’, we start to see how they all start to impart some identity:

Putting three distinct atoms into a search bar, for example, gives us a molecule. We now have enough visual information to be able to judge where the style is heading, and adjust accordingly if required. If one atom looks a little out of place, we tinker and massage its design until it starts to feel like part of the family.

And so on we go creating atoms, molecules, and organisms, all on the way to creating more and more complex templates.

One extra advantage we have at our disposal is specialised design software that has evolved to complement this approach. It allows us to globally alter atoms in a single stroke, updating every corresponding instance of the design across all molecules and organisms instantly. It’s an incredibly powerful and efficient way of working and allows us to test new ideas rapidly.

Designing websites with this simple approach way eliminates the dreaded ‘blank canvas’ effect, whereby the artist or designer has no idea where to begin. It’s proven time and again that it’s both efficient and capable of delivering superior results.