Atomic Design

  • atomic desing is not a linear process, but a mental model to help us think of user interfaces as a cohesive whole and collection of parts at the same time

Atomic Design Methodology1

  • five distinct stages to create interface design systems in a more deliberate and hierarchical way
  1. atoms
  • foundational building blocks - basic html elements
  • demostrate all basic styles at a glance
  1. molecules
  • simple groups of UI elements functioning together as a unit i.e. form label + search input + button = search form molecule
  • "do one thing and do it well"
  1. organisms - complex UI components composed of groups of molecules and/or atoms i.e. header component consisting of company logo, navbar, and search form
  2. templates
  • page level objects that place components into a layout
  • focus on page's underlying content structure
  • provides context for abstract molecules and organisms
  1. pages
  • instances of templates with real representative content in place
  • most concrete stage of atomic design
  • essential for testing the effectiveness of the underlying design system
  • provide a place to articulate variations in templates
  • reflect the dynamic nature of the content
  1. Atomic Design Methodology↩