Just like in chemistry, we can divide our design system into atoms, molecules, organisms and so on...
Overview
We base our design system into Brad Frost's Atomic Design paradigm. In its book Atomic Design, Brad Frost explains the parallelisms in between a framework or design system and that of chemistry.
Everything (whether solid, liquid, gas, simple, complex...) is comprised of atoms. Those units bond together to form molecules, which in turn combine into more comples organisms to ultimately create all matter in our universe.
Following this principle, we can divide all elements in our pages into atoms, molecules and organisms.
What is atomic design?
Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:
Atoms
Basic building block, anything less would have not meaning.
They include the basic HTML elements like buttons, form labels, form inputs... All the stuff that can't be broken down any further without ceasing to be functional.
Each atom has its own unique properties, like its dimensions, font size... these properties influence how each atom should be applied to the Design System.
Some atoms in our Design System:
Input
Button
Switch
More examples:
Molecules
Molecules are simple groups of atoms functioning together as a unit and, like in chemistry, they have new properties.
A label and a text input together form a molecule that suddenly has a purpose:
- The input get the search query
- The button submits the form
This simple molecule can be reused anywhere this kind of functionality is needed. The use of simple UI groups encourage reusability and promotes consistency throughout the interface.
Some molecules in our Design System:
Rating input
Button group
Breadcrumb
More examples:
Organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface with their own unique properties and functionality.
An organisms can be composed by the same molecule repeated over a grid, like an article list. Organisms demonstrate those smaller molecules in action and the pattern created that can be used again and again all over our projects.
Some organisms in our Design System:
Carousel
Modal
Did you know?
There Was a Successful Tinder Match in Antarctica in 2014.
More examples:
Templates
At this level we start loosing the parallelisms with our chemical analogy, to dive in to the design language that makes more sense for us. Templates are created, mostly, with groups of organisms (and/or molecules and atoms individually) that put together create pages and layouts for our project. They're a kind of HTML wireframe, but its fidelity can be increased, mostly through the use of pages.
Pages
Pages are instances of templates that show what the UI looks like with real content in place. This is the most definite stage of atomic design, where the system takes life and forms a beautiful and functional user interface.
