Booklet

author

Laura Coughlan

Design

What is Atomic Design

design

Design

|

What is Atomic Design

Atomic Design is a methodology that can accelerate the process of creating modular designs.

As the craft of web design continues to evolve, We're recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. Atomic design is a methodology for creating design systems.— Brad Frost

Atomic Design has five stages to create interface design systems:

  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages
  1. Atoms

Atoms are like building blocks of the application.

The basic assets of our product. They are the foundational building blocks that comprise all our user interfaces such as type, labels, colours and spacing

  1. Molecules

Molecules are a group of atoms bonded together to take on new properties or to complete a function.

  1. Organism

The organism is groups of molecules joined together to form a relatively complex, distinct section on an interface.

These will be used as a distinct pattern across a product.

  1. Templates

Pages without real content. They combine organisms into a proper website layout. It's here where we start to see the design coming together and the layout in action.

These templates are used to make up the majority of a products touch points.

  1. Pages

The Final stage of atomic design. Pages are templates with final assets, videos, photography and real content added in, allowing us to review and iterate further on the design if needed.

Pages are essential for testing the effectiveness of the design system.

TO SUM IT UP:

Atomic design is a method to describe and practice design systems. These design systems allow teams to build better products faster. With this in practice we can work harder to focus on the most important parts of our products experience.

Reading List: Atomic Design by Brad Frost

More booklets by Laura Coughlan

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets