Settings Design Molecules

Atomic design

Molecules

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

Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.

In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. A search form molecule is composed of a label atom, input atom, and button atom.

The information contained in this page about atomic design ist taken partly from this author.

Men's Care Frankfurt's bibliothek

interface Molecules

The label atom now defines the input atom. Clicking the button atom now submits the form. The result is a simple, portable, reusable component that can be dropped in anywhere search functionality is needed.

Now, assembling elements into simple functioning groups is something we’ve always done to construct user interfaces. But dedicating a stage in the atomic design methodology to these relatively simple components affords us a few key insights.