Atomic Design

Home » Blog » Design » Atomic Design

Recently, I came across an interesting concept called Atomic Design. In a nutshell, Atomic Design favours systems of reusable components in lieu of monolithic pages.

Now, don’t get me wrong. This is nothing utterly new, of course. Style guides and brand guidelines always consisted of reusable and combinable components, fonts and colours. However, in traditional web design up to the mid-aughts designs used to be rather fixed, rigid and monolithic. It wasn’t until relatively recently that due to the responsive design movement things got more flexible and website designs were broken into smaller reusable components such as columns, rows and containers that allowed designs to work equally well on both mobile and desktop devices.

I really like the conceptual model of Atomic Design. It borrows terminology from chemistry and biology as metaphors for components as building blocks of larger elements:

  • atoms, e.g. buttons or labels
  • molecules, e.g. a button and a label that work as a search bar when combined
  • organisms, e.g. a page header
  • templates
  • pages

Atomic Design is a useful method for reducing complexity by not anticipating every possible requirement which might arise but by allowing design components to be assembled in a flexible manner to be able to accommodate possible future use cases.

Dave Rupert’s Responsive Deliverables is a useful guideline in that respect, too.

About the author: Bjoern
Independent IT consultant, entrepreneur

Leave a Comment