Atomic Design: Building from ground up

Atomic Design: Building from ground up

Atomic design is a methodology of creating design systems built out of core components. These core components are then joined together (with additional components) to create fully functional pages. It works from the bottom up using primary component in the early stages. This consists of five levels from the smallest unit to the largest component, namely;

  • Atoms

  • Molecules

  • Organisms

  • Templates

  • Pages

 

atomic design

 

Atoms: These are the smallest units, acts as the basic building blocks and are in the simplest form. As the smallest unit, they cannot be broken down any further. Some examples of atoms are input fields, checkboxes, field labels and radio buttons.

Molecules: Molecules are next in line where it consists of a collection/group of atoms to create something meaningful. Atoms such as an input field and a button are combined together to create a molecule namely; a site search block.

Organisms: These take multiple molecules to create a complex section of an interface. Some examples are navigation menu and a site header.

Templates: When organisms are created, we can begin to see how these fit together to produce a template. Templates are groups of organisms combined which demonstrates how various sections look and function together. With templates, it gives a clearer definition of the content structure and makes more sense of what the final design will look like (e.g like a wireframe). An example is a home page type with a skeleton layout.

Pages: These are instances of the template where placeholders are replaced with real content and features for an accurate representation of what the user will see. An example is a homepage.

Below is an illustration through the levels from an Atom to a Page;

 

 

Atomic design has its benefits during development and design. Some are;

Reusability: As it involves using components, these components can be created and re-used on various areas/pages of the site. They can also be mixed and matched to create different looks and feel. This also helps to speed up product deliveries as it cuts down the process of re-creation.

Quick Prototype: With Atomic design, it acts as a style-guide in creating mockups before implementation. Users are able to have a visual direction of what the site will look like. Although this is a mockup, it is open for refinement as time passes which leads to the next point of Adaptation.

Adaptation: At some stages, some refinement or change of requirements may occur. As Atomic design takes the “component-based” approach, it is able to handle change. An example may be a change/update on an atom (e.g button) on various pages. Because this atom has been re-used, changing this atom will reflect on the pages it has been used.

Using the Atomic design approach has not only helped speed up team’s workflow by reusing already created features but also helped to keep code consistent and clean due to avoiding duplication of components that exist. It has also helped on keeping code more modular which makes it easier to find and update when necessary.

See Atomic design book by Brad Frost.

Also see pattern lab