The Art of Atomic Web Design

atomic-design
The Art of Atomic Web Design
Behlul M
September 29, 2017

The web continues to evolve further away from fixed-dimension ‘pages’, today we think of ‘systems’ that serve a variety of devices and users. Coined by Brad Frost, Atomic Design is a methodology that involves breaking a website layout down into its basic components, which are then reused throughout the site.

So why atomic design?

The bottom-up process is called atomic design because it was influenced by chemistry. These designers start with the smallest elements and move their way up to big-picture design, from the simple to the complex.

Atomic design is basically a mental model that makes designers think of web pages as a series of reusable components. It is a system that works together with multiple parts to create something unique. The hierarchy of atomic design is built up of five stages; each stage is made of a group of components from the previous stage. All the five stages together add up into a clear and logical interface design system.

Let’s start with the smallest and build our way up:

Atoms

These are usually building blocks of all user interfaces. A simple example of this is our HTML tags such as button, label or input.

atomic design

Molecules

As with all natural world atoms, interface atoms are pretty ineffective on their own but their applications become interesting with the right manipulations. For example, if we combine a button, label and an input, together it can create a ‘ADD TO CART’ bar.

molecules

Organism

Organisms are basically complex UI components made up of atoms, molecules and other organisms grouped together. These complex components are combined together to create a more workable and aesthetic website.

 

organisms

Templates

This is the first stage where one can see how the design works in full. Templates are objects found on a web page where specific user interface design components are placed and content should be created that fits within the layout’s components and style.

 

templates

 

Pages

The last stage in an interface design system is pages. Pages are basically a combination of template and content that come together to form a working model.

 

pages

 

Conclusion

Atomic Design provides designers with a mental model, enabling them to understand the user interface in a more holistic view than just individual parts. The whole influences the part and the part influences the whole. No part of the whole should be created in isolation.

This process is used to bring smaller modules and assemble them into completed elements. This process improves efficiency and communication between different departments so that they know there is a consistent message going across all teams. This leads to a more beautiful website overall.

We should also consider that atomic design is not completely substituted for the ‘linear’ method of website creation but instead utilising this method alongside your current design practice will keep your websites clean, consistent and efficient.

Tags:

Leave a Comment