Taking cues from chemistry

An example of a chemical equation showing hydrogen and oxygen atoms combining together to form a water molecule.

Atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. (Yes, it’s true atoms are composed of even smaller bits like protons, electrons, and neutrons, but atoms are the smallest functional unit.)

Molecules are groups of two or more atoms held together by chemical bonds. These combinations of atoms take on their own unique properties, and become more tangible and operational than atoms.

Organisms are assemblies of molecules functioning together as a unit. These relatively complex structures can range from single-celled organisms all the way up to incredibly sophisticated organisms like human beings.

Bringing a common language to the rescue

The atomic design methodology

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

Atoms

Atoms include basic HTML tags like inputs, labels, and buttons.

Molecules

A search form molecule is composed of a label atom, input atom, and button atom.

Is it a button with an icon a molecule or an atom?

Organisms

This header organism is composed of a search form molecule, logo atom, and primary navigation molecule.

Templates

The homepage template consists of organisms and molecules applied to a layout.

Wireframes with lorem ipsum content

Pages

The page stage replaces placeholder content with real representative content to bring the design system to life.

Almost Mockups with partially real content

Clean separation between structure and content

Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’.

Mark Boulton

Discussing design and content is a bit like discussing the chicken and the egg. Mark Boulton explains:

On the left we see the UI’s content skeleton, which consists of the same person block molecule repeated again and again. On the right we see what happens when we populate each instance of the person block molecule with representative content. 

Atomic design is for user interfaces

Atomic design applied to the native mobile app Instagram.

Pattern Lab

http://demo.patternlab.io/

https://auth0-cosmos.now.sh/docs​