Atomic design: the chemistry between structure and interface

Atomic design, digital chemistry

Brad Frost, US web designer, came up with the concept of atomic design. He defines it as a new way of thinking of page structure, specifically for web pages. Atomic design is different from classic design, because it relies heavily on the use of patterns. It uses a rational and methodical approach that extends beyond subjective visual elements, like themes and colours.

Atomic design is the structure that supports an effective and pleasant user experience. It defines a vocabulary and framework with a reusable and modular structure. This allows you to work on each part of a page independently, while keeping it coherent overall. Atomic design is not a linear process, with each component acting independently of the others. Rather, it’s a flexible and modifiable system. This translates abstract, or “molecular” structures, into a concrete page; from a mix of parts into a complete and reasoned whole.

Brad Frost uses chemistry terms to describe atomic design and the ideas behind it. He uses the analogy to compare page creation to chemical interactions. The creation of a structured user interface combines five distinct levels extending from the atom to the final page.

Web material and architecture

Atoms and molecules blocks

Atoms are the building of interface design. Concretely, these are groups of HTML components—a button, for example.  They may include more abstract elements that influence the user interface such as colours. In the example below, the molecule is the combination of atoms forming the search bar.

Les molécules sont des groupes d'atomes. http://bradfrost.com/blog/post/atomic-web-design/

Molecules are groups of atoms.

Organisms and Templates

Templates and organisms aim to support the page structure. Establishing a clear and structured vocabulary is independent of the content’s meaning. The template is an outline or skeleton that can display any sort of content. The structure is important for the final integration of the content on the page.

Templates consist mostly of groups of organisms stitched together to form pages. http://bradfrost.com/blog/post/atomic-web-design/

Templates are groups of organisms that make up pages.

Pages

Finally, pages are the tangible, concrete, and user-facing final product. The user interacts with them; they are the aggregation of other elements coming together to create an effective user experience

Atomic design applied to the native mobile app Instagram http://atomicdesign.bradfrost.com/chapter-2/#clean-separation-between-structure-and-content

Atomic design of the Instagram app

This approach promotes coherency and adaptability. The structures resulting from this methodology maintain flexibility and are easily modifiable, without entirely revisiting the page. With vector images and fonts, atomic design is highly compatible with responsive design.

Beyond responsive design

Atomic design provides the basic building blocks for responsive websites. By providing the architecture for responsive sites, this approach allows you to modify, improve or easily develop a site in this manner.

Atomic design translates the abstract into the concrete—from parts to a coordinated whole. It is possible to modify every element independently in order to improve the final structure, like a painter stepping back from their canvass to see the big picture and make changes. The artist works to perfect the details while keeping the final, whole product in mind.

Atomic design and apply to all user interfaces, such as Instagram or Keynote, and isn’t limited to the web or responsive design.

Finally, as Steve Jobs said, design isn’t simply visual or the expression of a feeling, but derives its value from its function.

Get in touch to take advantage of our expertise or learn more about atomic design!