Create user interface design using atomic design methodology

Atomic design

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design :

1. Atoms

If atoms are the smallest, most basic building blocks in the world of chemistry, what would they be in the world of design? Atoms are the simplest elements on pages. They can’t be broken down anymore. Atoms are buttons, input fields, field labels, checkboxes, radio buttons, and text paragraphs. Like atoms, each is not useful just on their own.

2. Molecules

To create meaning and new properties, atoms bond together to form molecules. In our restaurant example from above, we could combine the atoms of a few drop-down menus and a button to form a date and time selector for booking dinner reservations. On an employee portal, it could be as simple as a field label, an input field, and a button that combine to form a global site search feature.

3. Organisms

If molecules are the smallest fundamental units of a compound, organisms allow us to combine them into a relatively complex section of an interface. In the restaurant’s case, it could be putting the reservation date picker molecule together with an hour of operation molecule. For our employee portal, it’d be adding the search molecule with a logo molecule and navigation molecule to form a site header organism.

4. Templates

Chemistry only gets us so far. Once you have organisms created, you can explore how these might fit together to create templates. It’s here where we begin to see the layout and flow of a page. Templates provide additional context to the abstract molecules and organisms. For our neighborhood restaurant, we might combine a header molecule with the date and time selection molecule, a prix fixe menu item molecule, and other page features to form a template for dinner reservations.

5. Pages

Finally, pages are the highest level of fidelity. They take our templates and incorporate real representative content. Pages allow us to test the system we created with different inputs to ensure that things don’t break. They allow us to test variations of the template. What if the prix fixe menu is twice as long? What if it only has one item? These are the kinds of changes that are difficult to do quickly and cost-effectively in more traditional, mockup-based design systems.