To make an attractive and effective UI Design of any app or a website coding is not the only concept needed. One has to think of or use a well-optimized designing system. So here we will tell you more about Atomic design. Atomic design compares web designing with chemistry for building perfectly balanced UIs.

It starts with the very basics and explains everything in the sense of small building blocks. Instead of taking up a whole webpage or a set of them it starts from buttons, menu items etc. called the atoms. And so on it sums it all up in four stages namely: molecules, organisms, templates and then pages.

Read Also:

Atomic design, the book (

Atomic design is written by Brad Frost with the sole purpose of making it easier to create and keep up high quality and fast websites. It is written up in the form of a book which you can read online for free. Or you can order it as an Ebook for $10 or paperback for $20. One can even order a package of both at $25.

If you are a web designer or intend to take it up this book is a must read for you. It takes up the concept of user interface design from a whole new angle. From the very basic introduction to the deepest explanation it has it all. Here we will tell you more about the book and its sub parts that it is divided into.

Atomic design hierarchy

So Atomic design relates web designing to chemistry, by stating that a webpage is made up with different components. It is all in one hierarchical order containing five stages of development. And each stage is made up with components from the previous one. And in the last stage, when all the components are added up, the interface designing is complete.

1. Atoms

So similar to chemistry atoms are the smallest building parts that make up a whole organism. Therefore in designing web pages they are the HTML elements such as buttons, text headings or labels etc. But not all basic HTML elements can be considered to be an atom. Like the semantic or section elements like

are not atoms of a



Atoms are not only the displaying elements on a webpage. The font style, colors and dimensions are also counted in it. And in the author’s own words “atoms show all your basic style at a glance”.

Here is an example from our website’s homepage. When you open the homepage you will find all the recent trending posts. The headings of each post are one type of atom that is used on the webpage. The text uses different font and color and can be easily differentiated from the rest of the page. Same is with the writer’s name right below the headline. And even though most of the websites, including ours, weren’t made with atomic designs in mind, it can still be divided into those stages.

2. Molecules

A group of atoms aligned together can be termed as a molecule on a webpage. It follows up the next stage of hierarchy and is made up by more than one HTML element. Being attached to one another the atoms fulfill their functions by complementing one another.

Here we give the same snapshot of our website and we have marked up one molecule in it. The post displayed constitutes of many atoms and together they form a molecule. The thumbnail or the text heading alone wouldn’t have made much sense. But together the thumbnail, title, caption and author’s name gives the best result together binded up as one.

3. Organisms

Organisms are made up of group of molecules and atoms and organisms itself. They have more complex UI designs and coding and are present as different sections in a webpage. Like a sidebar, header, footer or entering with an animation slider. A side section containing recommended articles on a website or tabs containing different types of widgets can come under organisms.

So, like in the above snapshot of the homepage of our website, tabs open when you hower your pointer on them. These pop up tabs are organisms containing molecules of same type; that is articles with headings and featuring image. Same is with the side bar you get which displays different articles you might be interested in.

4. Templates

The earlier stage is the last one, where the comparison between chemistry and UI designing ends. For this one and the last stage, normal terms are used for better understanding of the method. Templates are the architecture or the layout of the displaying content. It specifies how each atom, molecule and organism will be placed and functions together.

The above is an example of Time Inc. magazine’s website and it’s templates used. It shows up the dimensions of different layouts and the text style used, in this case lorem ipsum. All the components will be placed at their respective places schematically.

5. Pages

This is the last stage according to Atomic design hierarchy and it sums up all the made templates. Different templates are filled with content or organisms and are pall placed here in the product.

One of the main reasons why page stage is important is it makes template and page variation possible. One can choose the template and content displayed for different users in the cases of logging in. All the atoms and molecules should work according to the situations or scenarios.

Here again is an example of the Time Inc. webpage. It looks different with the templates filled in with all the content. The images and different posts on the website all of it is. It keeps on updating time to time and a lot of tests for new variations.