Atomic Design

13.11.2017

Oskar Lebuda
Front-end Developer
Oskar Lebuda

As the craft of Web design continues to evolve, we are recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.

What is atomic design?

Atomic design is a design methodology proposed by Brad Frost in 2013. This methodology is for creating design systems. There are five distinct levels in atomic design:

  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages

Atoms

Atoms are the basic and smallest block of matters. They are our HTML tags such as buttons, inputs, form labels, images, but also icons and typography. For example:

Molecules

Molecules are the groups of the atoms for example icon with counter of notifications or user profile element.

Organisms

Molecules give us some building blocks to work with, and we can now combine them together to menu organisms. Organisms are groups of molecules joined together to element a relatively complex, distinct section of an interface. In our example it is a left side menu created from many molecules.

Organisms can consist of similar and totally different molecules. In our menu example we use logo (as atom), app drawer and many menu elements consisting of typography and icon.

 

Templates

Templates consist mostly of groups of organisms stitched together to form pages. It represents our site without final content.

Pages

The pages are our pre-prepared templates filled with finished content.

Why atomic design?

Are you wondering why exactly atomic design? Let me start by saying that you probably already have a similar solution in your applications. Many frameworks work this way by defining smaller elements from which they build larger and more complex. Atomic design helps you create your own design. It does not impose a specific structure on the elements, but rather helps to systematize the work.