What is the Atomic Design method? | Agile Partner
share on

What is Atomic Design ?

atomic design steps

Nicolas Vardavas, co-founder of the Luxembourg company SWIPE and an expert in UX design, will present to you the benefits, details and examples of the Atomic Design method.

Atomic Design is a component design method designed by Brad Frost, an American designer who participated in the projects: This is Responsive, Styleguide.io.

This method, inspired by Modular Design, came from the analogy between web and books, which shows that the concept of page is no longer relevant. Indeed, with the multitude of media and screen sizes we are exposed to today, this concept is no longer realistic.

atomic design

Brad Frost proposes a method based on a biological metaphor to create modular component systems that adapt to any type of support. It defines 5 design steps to cut an interface: atoms, molecules, organisms, template and page.

The Atomic approach in details

  • The atoms
  • The molecules
  • The organisms
  • The templates
  • The pages

The atoms

atomic design step 1 atoms

In life, atoms are basic elements of matter. In atomic design, they are the basic elements of our interface. These atoms are the smallest elements of our system of components, they are therefore indivisible without losing their primary function.

In practice atoms are basic HTML elements such as titles (h1, h2, h3 ...), form elements (input, label, button ...) or images (logo, icon ...). Each atom of interface has its own unique properties. For example: a label will have its own font size and font, a form field a background color and a border and a button will have its background color and a font color.

atomic design search example

Example of interface atoms: label, text field, button

Within a styleguide, the atoms give a global view of your style and determine the identity of the brand.

atomic design screen example

If we break down this example, we find an atom for the logo, an organism / molecule for navigation and a molecule for the search form.

The molecules

atomic design step 2 molecules

In chemistry, molecules are atoms linked to each other. The same atom, when linked to another atom of different natures, have distinct properties.

In an interface, the molecules are groups of  HTML elements (atoms) which have a function between them. For example, a form label associated with a text field and a button will create a search form. The result is a simple, portable and reusable component that can be dropped wherever a search feature is needed.

atomic design search example

Example of an interface molecule "search form"

Assembling simple functional group elements is not new, but it helps designers and developers to adhere to the principle of single responsibility. The creation of simple interface molecules facilitates testing, encourages reuse and promotes consistency throughout the interface.

The organisms

atomic design step 3 organisms

Organisms are more complex interface elements, composed of several groups of molecules and / or atoms and / or other organisms. In general they form very different sections of an interface, such as a header, a list of products, search results.

Let's take a look at the example of a header. A header type organism forms an autonomous section of an interface. It can consist of a logo, navigation and a search form.

atomic design navigation example

Exemple of an interface organism "header"

The templates

atomic design step 4 templates

This is where the analogy with the world of chemistry ends. This analogy has served us to set up our hierarchy and build the elements of our system components.

Templates are areas of a page that provide context to the organisms they contain. This context determines the visual rendering of the elements that compose the template according to the space granted by the screen.

When developing a system of components, it is essential to define how these components fit  and work together in different contexts. This is the role of page templates.

Templates focus on the structure of the content and not the content itself. A component system must take into account the dynamic nature of the content. It is therefore important to be able to see the evolution of a title, an image or a list according to its context.

atomic design template example

Exemple of an interface template "Home page"

The pages

atomic design step 5 pages

The pages are like templates but with real content. So, if we fill our previous example with real content, we will get a page.

atomic design full example

Exemple of a page with real content

The page is the final step of the atomic design. It is essential for testing the effectiveness of our component system. Real content may highlight potential design issues for our components. If a problem arises, we should go back and iterate to correct it.

Finally, the pages provide the necessary framework to materialize the different variations of the templates. For example, some information is hidden when the user is not connected to the website or some news has a shorter introductory text than others or simply does not have one.

The advantages of Atomic Design

It is true that other systems of components like Boostrap or Foundation already exist but they also have their limits:

  • Everything that is produced with these systems tend to resemble itself
  • We must deal with many useless components
  • We must also often complete some features
  • We use the logic (naming, style ...) of someone else

Using Atomic Design allows you to:

  • Moving quickly from the abstract to the concrete: we can simultaneously see our decomposed interfaces in their atomic elements and observe how these elements combine to form our final experiences.
  • Put in place a common language within the teams and facilitate a better communication between them (designer, developers, product owner ...).
  • Define a component system within a company providing the necessary bricks for the materialization and testing of prototypes in a real context. These prototypes can be realized during workshops (Design Sprint, LEAN UX).
  • Provide a styleguide (atoms and molecules) to the whole of the company making it possible to ensure a global coherence on all the interfaces while avoiding the duplicate components.
  • Structure developments: the SASS tree can integrate the 5 levels of the atomic design by defining a directory for each level. In the "atoms" directory, we will put a form.scss file, a typography file and so on. In the directory "molecules", we will place all the molecules of our site, and so on for the following organisms and levels.
  • Save time by avoiding to decline all the screens of our applications or websites.

To conclude

Atomic Design therefore provides the necessary steps to design a modular component system. This method makes a real difference with a more traditional operation that starts from the design of an interface and then dissect the most atomic elements. Here we will first create these atomic elements to arrive to an interface as a whole.

However, it is never easy to design component systems and styleguides. Atomic Design gives us some keys to achieve this. Like any method, it will be necessary to know how to adapt it to our needs and our context. A very good example is an article by Jeff Crossman outlining the method that GE uses to design their applications: https://medium.com/ge-design/ges-predix-design-system-8236d47b0891

Do you need help with your design process?

Sources

share on