Brad Frost: Atomic Design

Brad Frost is a front end Web Developer and UI designer based in Pittsburgh in the USA. He is renowned for his “Atomic Design” theory which is primarily based around chemistry. Much like all the matter in our universe is comprised of atoms and molecules, he based a design theory around this fact.

Frost’s design principles apply the atom to a UI design, in the fact that a UI or web page can be broken down into smaller principles which bond together to make a larger construct.

The “atom” related to web design are the HTML elements, the building blocks of a web page. On their own, these elements are not very substantial but by combining them together they become “molecules” to create larger portions of a UI design or web page.

Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

Drawing the same parallel from Science, these “molecules” are again linked together to create “organisms” which are larger collections of molecules to create bigger aspects of a UI design. An example of this would be HTML elements styled in a specific way through CSS to appear as a navigation bar on web page.

Designs completed by the Atomic Design theory are created from “atoms” upwards to organisms, which are grouped together to formulate a primitive user interface design. When several organisms are collected an initial design concept can be produced to the client.

Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.

With enough of these “organisms” grouped together you can move into creating a template of the page in a traditional UI design sense, based around the previous atomic structure.

Atoms, Molecules and organisms grouped together to form a template based design page to produce to the client.

With the atomic template created, the designer can continue to increase the fidelity of the design, replacing the placeholder images with actual page content such as background images and colour schemes.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.