Atomic Design

Atomic design is the framework that can help you accelerate your process for creating amazing design systems.

It consists of 5 different stages


  • We start with the basic or most fundamental elements that can’t be broken down further anymore.
  • form labels, inputs, buttons, colors, etc.


  • Molecules are formed by grouping atoms and can make a new UI element. Molecules function together as Units.
  • a search bar


  • Organisms are further formed by grouping molecules to make a relatively complex UI.
  • Navigations, Sidebars, etc.


  • Templates are the layout for the website without any real content. They combine organisms into a proper website layout.


  • Pages are the instances of the Templates, we can make many pages from the same template. Pages are the templates with the final assets or real content placed in the proper position.




Developer by Degree | Designer by Passion

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is a UX Writer?

Building. Design, emotion, for the ages.

Plan 2017: Reading

🚀 The Best Espresa yet

DAIRO: Behind the Scenes in Title Sequence Creation

Ready Player One but for the Elderly

Sketch of VR UI for how users can decorate their room, with contacts and furniture selections

Sustainable Retail Design By Ashish Deshpande — VMRD Cover Story

I quit UX to become an Art Teacher

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Developer by Degree | Designer by Passion

More from Medium

The understanding of UI and UX design.

Storytelling Through Designed User Journeys for a Seamless User Experience

Challenge 1: Design Thinking

Why UX designers should be pragmatic dreamers.

An illustration of people designing a user interface with a picture of a unicorn behind them.