Atomic design and why it works
Feb 20 2019
It’s no secret atomic design has had a huge impact on ways of working, but we wanted to join the discussion and evaluate the principles from our making-based perspective. The atomic approach sees an interface broken down into its individual components so they can be built on and replicated throughout the rest of the build.
Now, here’s our take on why it works for us…
Before we begin, here are the fundamentals of the approach:
Atoms - the building blocks (e.g a button)
Molecules - groups of two or more atoms
Organisms - collections of molecules that function as one
Templates - where the layout and structure is outlined
Pages - what the users will see
1. It's versatile
The most basic component is the atom, they can be adapted and multiplied to form molecules. It’s about starting from the bottom and building an atom library so we can experiment with layouts to develop the best molecules and organisms for a specific purpose.
2. It’s quick
Many of the development projects we work on go through rapid prototyping phases, so the component-based system allows for quick amends and updates. It’s a case of adapting, not knocking everything down and starting from scratch
3. We can be reactive
Once we’ve reached final designs and the product is live, that doesn’t mean it’s finished. We don’t draw a line in the sand, we continue to evolve as needed. If part of the design or structure changes it’s easy to locate where those updates need implementing. An evolution of the interface doesn’t necessarily mean a big overhaul, it’s a series of tweaks that mean we can be constantly reactive.
4. It’s consistent
As always, once we’ve designed a style it needs to be implemented seamlessly and the atomic system gives us complete control over the look and feel of an interface. Through the construction of the atoms and molecules we can reinforce the style guide.
5. It’s efficient
Atomic design principles allow multi-disciplined teams to work collectively. Collaborating on a project from start to finish means teams can create the interface together.
So, by adopting the atomic process for the appropriate projects, we are able to move at pace through to execution. Through improving efficiency, flow and reactivity we allow our design and build process to be more creative.
Adam, Creative Director