Understanding the Basics of Atomic Design in 3 Minutes

Design is a creative discipline, but interface (UI) design is at the crossroads of worlds between creativity, logic, functionality, and technique.

To make it easier to reuse graphic elements across multiple interfaces (pages, screens, etc.) and thus save time, instead of freely "drawing" an interface, we will instead create a "Design System."

A Design System represents a set of visual components built on rules of typography, layout, shapes, and colors.

Atomic Design is a special design method for creating design systems, based on the notions of nesting and reuse, often dear to developers.

Atomic Design

As its name suggests, Atomic Design draws inspiration from nature and chemistry to describe its organization, including 5 different levels of complexity:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Atoms represent the primary components of the design system, while pages represent the highest-level, most complex structures.

Atoms

Atoms are the basic, non-composite components of the system.

They can be a button, an icon, a title, a link, a field or a label... In HTML, atoms correspond to the simplest tags, which can be styled, animated, and contain text, but no other atomic component.

Molecules

Molecules represent the first level of composition. On their own, atoms aren't very interesting, but if you combine an icon, a label, a field, and text, you get a first, more complex piece: a complex form field with all the necessary indications.

Organisms

If you bring several molecules together, the resulting organism becomes a truly independent section of the system.

Take several molecules and a few independent atoms like a title (atom), form fields (molecules), and a button (atom), and you get a new organism: a sign-up form.

Templates

Logically, a template is therefore a set of organisms organized in such a way as to make all the information and functionalities accessible to the end user.

An example of a template could include the following organisms:

• A header (navigation bar)
• The user profile
• The content of an article (the template's main organism)
• A list of related articles
• A footer

Each of these organisms is itself made up of molecules, which are themselves made up of atoms.

Pages

Unlike the previous elements, pages are not made up of several templates; rather, a page implements a template and incorporates the information (text, etc.) and content (images, etc.), making it the final version of the interface.

If you want to learn more about Atomic Design, I invite you to read the full article by its creator Brad Frost, where you will also find the link to his book.