Atomic Design (User Interface)

Atomic Design (by Brad Frost) is a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.

Atomic Design consists of five stages: 

Atoms – Molecules – Organisms – Templates – Pages


Atoms are the building blocks of matter. In web interfaces, they are our Html tags such as Input, form label, and buttons. They can also include abstract elements such as color palettes, fonts, and animations.


Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form – molecule. These are combinations of atoms brought together for reuse.


Molecules give us some building blocks to work with, and we can now combine them to form organisms. Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.


At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.


Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

What is Agile?

Agile is an interactive process in which you deliver value through a basic solution and then enhance it over time. You deliver quickly and you

Read More »

What is UI & UX Design?

When we talk about Design it is a very extensive stream and is not just restricted to Graphic Design. With time Product Design, UI Design,

Read More »

Leave a Reply

Close Menu