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.