Designing at scale – saving time, money and resources using Atomic Design

What exactly is atomic design?

How do you keep your site current and consistent with your brand without incurring huge costs, consuming vast amounts of time or creating a less-than-ideal user experience that is.

Having spent years working at the frontier of web design and development, Proctors has an answer. It’s called Atomic design and it’s an approach our in-house team of digital designers, web developers, QA testers and dev-ops engineers have been applying with outstanding results for clients on a global scale.

In this first chapter of our Designing at Scale series, we’ll take you through the tried and tested methods we use to future-proof our clients’ websites and systems, and how we deliver digital success fit for an increasingly competitive world.

4 billion people are now online – that’s over half of the world’s population. Websites are getting larger, more complex and more information-dense as they fight to remain relevant.

It’s pretty commonplace for websites to have hundreds of pages, featuring thousands of products and multiple brands. While it’s great that businesses are continuing to grow their online presence, for many, it means keeping their websites consistent is proving to be a challenge for web designers: what’s good for business can be bad for brand.

If all of a sudden you want to make a ‘quick’ change to one part of your site, it easily becomes a very time-consuming project – for example, if your new brand guidelines state buttons on your company website must be of a specific size and colour.

Whether you need to ensure the change is implemented site-wide, or that any amends you make don’t impact the rest of your site’s elements, it’s easy to end up with a design that’s a little off-brand.

So, how can we make this process easier?

Atomic design is one solution which has delivered incredible success for our clients. It might sound like an idea born out of a Sci-Fi movie, but it’s a very real way of building modern websites.

The creator of this methodology, Brad Frost, wanted to find a simpler way to design and build websites that were secure, adaptable and scalable. And the process goes right back to basics.

In the same way the Universe can be broken down into its smallest components – atoms, molecules, organisms – at their simplest level, all websites, apps and intranet sites can also be broken down into a fixed number of HTML elements: a periodic table from which every website is built.

So, it makes sense that atomic design takes cues for its name from chemistry. ‘Atoms’, ‘molecules’ and ‘organisms’ comprising the different HTML elements come together with ‘templates’ and ‘pages’ to form a seamless web design and build approach. With this method, you can create a website which is fully customisable, easily scalable and beautifully designed.

Check out our explainer video to see how it works.

Atomic design saves your business time, money and resources.

The even better news? It doesn’t take a knowledge of alchemy to make it work.

For the future of your website, Atomic design means applying changes to one atom will apply the changes throughout all atoms on your website. So, if your brand management team decide the new corporate colours are changing from red to blue, you can reflect this in the design: quickly, smoothly and effortlessly.

The same process applies to your molecules, your organisms and so on. It’s time-saving, seamless and consistent, and makes updating your website in the future a much simpler process – even when it comes to scaling up or down.

At Proctors, we research, test and challenge our skills so we can continue to create world-leading websites for our clients.

This is the first blog in our Designing at Scale series. Keep up to date for more industry insights, and make sure you watch this space for our next instalment in the series, coming soon.

Want more information on best practice in web design and build? Have a digital project you’d like to bring to life? Let’s talk.