What is Atomic Design?

Often, the process of creating websites involves a detailed step by step checklist of what you should be creating and when. This supposedly enables the creators to compartmentalise and categorise the different elements of a site from the beginning to end. ‘Atomic Design’, as discussed by Brad Frost, is one of the hottest trends in design and development thinking and applies a somewhat different method. Instead of understanding website creation as a linear process, Frost suggest we should take a more holistic view, seeing websites as a large and complex entity which can be broken down into smaller properties composed of increasingly fewer elements. Let’s start with the smallest and make our way up:

Atoms

Are our HTML tags. These could be a button, a label or an input. Like this search icon:

Molecules

Atoms are pretty useless by themselves, but combine them and they’ll make something useful. A button, label and input creates a search bar:

Organism

Formed of groups of molecules, organisms combine complex elements that might otherwise appear very distinct.

Templates

The first point at which we can see the how the design works in full. At this stage content should be being created which fits the layout design and style.

Pages

Put simply, pages are the template plus the content. This is where all the components come together to form the working model. 

Sounds simple enough doesn’t it?
After considering the list above, you’d be forgiven for thinking that the most logical way to begin building a website would be to start with atoms and work your way up. Humans have a tendency to categorise workloads into chunks because it makes things easier to understand. In many ways this a logical method, but having a picture idea of what you want your page to look like at each stage is imperative. For example, you cannot create page content without knowing the parameters of the design it fits into. Similarly, having an idea of what your molecules will look like will encourage you to create simple atoms. Atomic Design theory helps us understand why making clear-cut distinctions between stages is limiting to the process of website building as a whole.

Why adopt Atomic Design?

Understanding websites as made of many functioning parts, each one comprised of ever smaller elements keeps the creative methodology simple (especially when working on the smallest parts). Keep your atoms and molecules simple will mean the overall website is as efficient it can be.

Atomic Design provides us with a mental model, enabling us to understand the user interface as a cohesive whole and a collection of parts all at the same time. The whole influences the part and the part influences the whole. Nothing that is created, from the ‘button’ to the ‘content’, should be done so in isolation. That way the emphasis is on the finished product, not solely what you see in front of you as a designer or developer.

Atomic design should not necessarily be adopted as a substitute for the linear method of website creation. After all, working stage by stage has merits of its own. However, utilising this technique alongside your current design and development practice will keep your websites clean, efficient, and consistent.

If you are thinking about creating or redesigning a website, why not have a look at our web design and development services and get in touch.

 

We're recognised by
Digital Marketing Agency London +Mike Grindy