Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Atomic design explained

Saturday, September 14th, 2013 by Servage

Web design constantly evolves and takes on new shapes daily. We range from simple to complex in each design. Therefore, we need a system that allows our designs to be created in a methodical way. This permits a solid foundation for doing things rapidly and accurately rather than roaming in the abstract.

Our contemporary thinkers have charted out paths to obtain that foundation by looking at nature for inspiration. They have made the atom their role model because these particles are the fundamental blocks of the entire univers. Furthermore, chemical scientists have manifested a periodic table for the all atoms on earth.

Atomic Table

If we translate the same in our web design or programming field, we can clearly define a periodic table for our design components, which can be grouped as such:

  • Root Elements: html tag
  • Meta Data & Scripting: head, title, link, script, etc. tags
  • Embedding Content: image, map, object, video, etc.
  • Text Level Semantics: b, I, a, span, em, etc. tags
  • Grouping Content: hr, ul, ol, li, etc. tags
  • Forms: like label, input, button, output, textarea, etc. tags
  • Document Section: body, h1, h2, … h6, etc. tags
  • Tabular Data: td, tr, th, caption, etc. tags
  • Interactive Elements: menu, summary, etc. tags


You might question the ultimate benefit of such groupings and arrangements. Like atoms, if you have a clear vision of the fundamental components, you can place them in one place, such as in a CSS file or elsewhere. From here you can control the changes globally, for the entire website, be it small or big. This way you save time and effort from having to revisit all codes each time you need some global changes.


Now, let’s observe the direct impact of such organization in our daily lives as coders. Like in chemistry, where atoms are forming the molecules our web programming tags, such as label, input or button, can build a functional unit. For instance, if we want to create site search functionality, we would have a label like “search the site,” along with an input field to enter the keywords, and a button to trigger the search action.


From this, we will have a molecule called “site search” consisting of three atoms. Similarly, we can assemble other molecules like a logo and navigation bar, along with site search. We can then formulate the top most heading block of modern websites, like Yahoo!, Tumbler and CNN all have. These arrangements of molecules form our organism, similar to what is found in nature.


Now, we get some tangible items in our interface design because we have components situated on a page in various layouts as distinct sections of the interface. Here our organisms vary in nature due to the different molecular types. For instance, your masthead organisms might have logo, main navigation, search and social media components, containing different molecules with different atoms. In contrast, the product grid organism might consist of the same molecules, like product image, title or price, which repeat themselves on an entire e-commerce website.


When a group of organisms are bound in a particular layout, performing some specific functions, they will formulate a template that your client can see in the form of wireframes or HTML mockups.


When a web designer places the real and specific components of the placeholders in the template, they become the pages. Thus, pages represent the accurate concept of the designated website, specifically designed for intended purposes.

In short, like atoms in chemistry, we designers have some fundamental building blocks. These offer us rapid creation of various web styles and allow us to design with a clear methodology. This way we journey from the abstract to a solid approach, and thus, can obtain outstanding results in the long run.

References & More Reading

Atomic Design
Pattern Lab
Responsive Comping: Obtaining Signoff without Mockups

Atomic design explained, 2.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials, Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.