Atomic Design

What’s it all about and should you be bothered about it?

You may think that designing websites is all about the way it looks, taking into consideration colours, fonts and images all to display clients content in a aesthetically pleasing way, but that’s old hat these days. For us we go deeper than that looking at a webpage as considered structure, targeted content and intuitive design. In fact this isn't a new trick - it's actually been about for a while… it’s a methodology that we have been working with for some time now but with a bit more conscious thinking into our processes it can become something rather powerful.

We all know that the digital world is developing at an ever faster rate with millennials coming of age and becoming the dominate user profile - they know what they want and more importantly what they don’t want. From a designers perspective its got to go deeper than the superficial look of a site to keep up - in today’s world web design is all about usability. The attention has shifted to focus on the experience that the user has and the engagement a website has to offer at various stages of the site.

Let me introduce to you UX Design and the Atomic Design Methodology. UX Design is the design of User Experience and essentially how a user moves around a site, and Atomic Design breaks down the construction of elements on a page to become reusable assets. Together they are two very powerful tools. Today we are going to focus on the value and importance of Atomic Design.

  • Atomic Design: It’s a simple concept really, essentially it’s comparing your approach of a design (website) in the context of chemistry in terms of atoms, molecules and organisms and how they are built and combined to create something greater together.

Atom Design is the method of building from the inside out - let me explain what is meant by this…

Here is a diagram put together by Brad Frost defined in the Atomic Design principle - It’s a great visual representation as to what we are talking about…DETc-aS9lxLqpA6uZXWSCpIRSUvTNY-VX-Kv0RSpkwU7Qy15cIffhGt5WQQU86qq5__zrkeKKzoHazK7IhjakSdEJVBPxqeIS4EnFnXjUqihQZkm6Vo3xtSY-ZkpOZrN5HMjzvav

Atoms - molecules - organisms - templates - pages

We are going to reword their titles to fall more in line with a design environments terminology.

Elements (Atoms - the smallest unit on a page) - Components (Molecules - the combining of single elements to create a component) - Complex Components  (Organisms - A collection of components joint together) An example in the content of a website - the components that make up a website header for example housing logo, text, search etc -  Combining all three of the above makes a ‘template’ - Placing all these templates together builds pages - something that can be used throughout the site with predefined style guide.  


Looking at the bigger picture. It’s about creating consistency within the design, usability and patterns that can solve similar problems without having to find new ways for each problem. You build a library of these components which can be used throughout a sites design.

This library benefits all those involved with creating the website - both designers and developers, but also future participants that might not have been involved with this stage of the site creation.

This way of thinking takes time to get use to and implement into your daily routine but by doing so your work will without a doubt become more efficient.

But why do we need to care about this I hear you ask….. Efficiency. There are lots of other factors that Atomic Design helps with but it’s ultimately the largest cog in building an efficient system when designing a website - Clients are the same the world over and want their sites up and running yesterday. With this Atomic Design methodology in place it allows our designers and developers to work alongside each other in a more uniformed and considered manner.

It’s funny really - what has just been said is nothing new and is something that we have consciously been creating for years. It’s a methodology that we can use to create continuity within design. Within terms of responsive this methodology allows customers to understand the scalability of responsive design and how designs behave across various screen sizes. Anyone who understands the pressures that website building can bring - having this component library which will evolve and grow as the design progresses developers gives a transparent design set up ready for developers to hit the ground running is an invaluable tool and it will be the way all web and design agencies will be working - mark our words!