Atomic Design: Revolution or Recycled Jargon?

A buzzy new concept that’s been popping up recently in my design and front-end programming readings is Atomic Design. It’s the philosophy created and championed by web designer Brad Frost. In his own words, the gist of Atomic Design is that “we can break entire interfaces down into fundamental building blocks and work up from there.”

In the same way that all physical matter can be broken down into chemical molecules, and those molecules can in turn be broken down into elemental atoms, so can a website or app be thought of as an interconnected collection of views that are themselves just different arrangements of components pulled from a common bank–these “atoms” being such things as labels, inputs, and buttons. If a website is a book, then these basic components are the words that get strung into sentences, that form paragraphs, that form chapters, that comprise the whole book.

In his introduction to Atomic Design, Frost himself acknowledges the notion of design systems, which might also be called modular design, a paradigm that precedes not just Atomic Design, but web design altogether. When thinking about the basic definition of a design system or modular design, I find that it is not too far from that of Atomic Design. Ultimately, each approach concerns itself with defining a basic set of components–which can include not just functional user interface elements like the aforementioned labels, inputs, and buttons, but more subjective things like color, texture, and typographic choices–and clearly defining rules for their usage.

Properly developed, this lexicon of components and rules comprises a coherent design language. Design as System is a mode of thinking about design, an overarching framework. Atomic Design is similar but, with its focus on streamlining and synthesizing the historically separate processes of designing and programming for the web, can therefore be thought of not as a subset or evolution of thinking of design as a system, but rather as a method for the practical application of the same fundamental ideas in the specific domain of web design. In other words, practicing Atomic Design might not make you a great web designer, but it’ll help ensure that the grammar and spelling of your design language, as it were, are consistent.

This is not to discount the valuable lessons to be gleaned from Atomic Design. If Atomic Design merely echoes established ideas about design, restating them in a way that is tailored to the practical concerns of web designers, then those ideas are nevertheless worth espousing. Designing a website or application as a modular system, whatever you call the method, benefits all the people who will interact with it–the designer, the programmer, and, most importantly, the user.

A rational and coherent design built on modular components benefits the designer by being scalable and extendible, the front-loaded work paying dividends in the long run; it benefits the programmer by making implementation more efficient and the code more maintainable; and it benefits the user with its consistency, making the underlying patterns of the design readily apparent and establishing reasonable expectations that will be fulfilled by the design (in ecommerce parlance, “reducing friction”). In short, it makes the interface more usable.

Atomic Design might not be the revolution in web design that its evangelists believe it is, however it nevertheless provides a useful framework for thinking of design as a system or language–an idea that applies not just to web design, but graphic design in general. Ultimately, Atomic Design is based on the core distinction of design versus art–that form follows function.