Atomic Design — Intro

Atomic Design is an approach to organizing UI elements into groups with increasing levels of abstraction — atoms, molecules, organisms, templates, and pages.

Atomic Design, from http://atomicdesign.bradfrost.com/

For example, a search icon and an input box are two separate atoms. Put them together to form a search box, and you got yourself a molecule. Add block content place-holders below the search box, and you just created a template. Fill the template with content — text and images, and you have a complete page.

Simple enough. Yet powerful. The approach invites you to think about each digital experience as a system, and adopt a reasoning framework to help you break down complex experiences into workable units.

The benefits run deeper. Adopting Atomic Design helps a team not only reason about the experience in simple terms, but also —

  • Establish a shared language, which helps a large number of designers build cohesive, consistent products faster.
  • Convert design to code faster. Design elements in Atomic Design can map nicely to components in front-end code. This means precious time is saved when translating design to code, as both parties describe the building blocks of the product using the same terms.
  • Save time with re-usable, easily maintainable design building blocks.

To learn more about the concept, check out Brad Frost’s Atomic Design website and book. As an advisor with Brand.ai, Brad Frost has been helping our team build the tools to effectively use and manage an Atomic Design system.