An Introduction to Atomic Design for Web Designers
Modularity, reusability, and scalability are not only coding concepts but you can also make use of them to create better-optimized design systems. Atomic design is a new methodology for building effective UIs from the bottom up, using a chemistry analogy.
Read Also: 10 Reasons Why You Need Code Optimization
Instead of designing collections of web pages, atomic design starts with the simplest UI components called atoms (buttons, menu items, etc.), and builds the whole UI up via four more stages: molecules, organisms, templates, and pages.
The book
The methodology was created by designer Brad Frost with the aim of “crafting successful UI design systems”. Atomic design was released as a book that you can read online for free, or order as a paperback ($20.00) or an ebook ($10.00) as well.
Atomic design approaches user interface design from a fresh new perspective that hopefully will shake up the web design landscape a little bit. This article intends to give an intro into this methodology but the book goes into the explanation much-much further, so read it if you can, it’s worth it.
Atomic design hierarchy
Atomic design is basically a mental model that makes designers think of web pages as a hierarchy of reusable components. The hierarchy of atomic design is built up of five stages; each stage is made of a group of components from the previous stage. The five stages add up into a clear and logical interface design system. They are as follows:
1. Atoms
Just like in chemistry, atoms are the smallest building blocks that cannot be further decomposed. Therefore, atoms are the basic HTML elements, such as buttons, labels, and input fields, that provide the smallest units of a web page.
Of course, not all HTML elements are atoms, for instance, sectioning elements (<article>, <section>, etc.) aren’t (cannot be) the smallest units of a web page.
Atoms are not simply the HTML elements but also their belonging styles: fonts, colors, dimensions, and other CSS style rules. With Brad’s own words, atoms “demonstrate all your basic styles at a glance”.
Atoms – Example
Here’s an example from our website. The headlines of recommended posts may account for one type of atom; they use the same HTML and CSS code and can be easily distinguished from the rest of the content.
Note that Hongkiat.com wasn’t designed with atomic design in mind, here it is only used for demonstration purposes.
The essence of atomic design is to design the UI from the bottom up using these five stages, not to identify the atomic design components afterwards.
2. Molecules
A molecule is formed by a group of atoms. Molecules constitute the next stage in the atomic design hierarchy. Think about simpler UI elements that are already made of more than one HTML elements, such as a search form or a recommended post in the sidebar.
Being organized into a molecule gives a purpose to each atom. In a bigger group (molecule), atoms must support and complement each other, they must work well together in order to create a usable design.
For instance, the title (one atom) must get more emphasis (bigger fonts, more weight, etc.) than the author’s name (another atom) in the recommended post block. This way, the two atoms are “meant” to work as a team to get the best result.
Molecules – Example
Using our previous example, you can see that in Hongkiat’s sidebar, one block of recommended post could be seen as a molecule. A recommended post molecule is built up of three atoms: a thumbnail, a title, and an author’s name atom.
3. Organisms
Organisms are composed of a group of molecules, atoms (and sometimes other organisms). In web design, organisms are more complex UI components that represent definitive sections of the page, such as a header, a footer, or a sidebar.
Organisms can be either made up of different types of molecules, for instance a sidebar may consist of a search bar and different kind of widgets, or of the same molecule repeated several times, for instance a handful of related post blocks under each other. And, it can be the combination of these two.
Organisms – Example
On Hongkiat’s website, the sidebar could be an organism. It’s composed of a search bar (one type of molecule, displayed only once) and several recommended posts (another type of molecule, displayed many times).
However, the sidebar organism can also be seen as the composition of a molecule (the search bar) and another organism (the recommended post widget with several recommended posts). Atomic design is a flexible model, the rules are not very strict, so in this case we can define the same building block both as a molecule and an organism.
4. Templates
The next stage in the atomic design hierarchy are templates. As you can see, this is when atomic design stops using the chemistry analogy. Brad refrains from the terminology at this point as he thinks it’s less understandable for clients and other stakeholders, and it’s essentially the two last stages (templates and pages) that designers need to sell.
Templates are built up of organisms. They are page-level objects but without the final content. The purpose of templates is to represent the structure of the underlying content.
Templates display how different atoms, molecules, organisms “function together in the context of a layout”. They basically represent the skeleton of a page.
Templates – Example
For an example, think about a home page template with placeholder images and lorem ipsum text blocks.
Below, you can see an example from the Atomic Design book. It is the home page template of the TimeInc magazine. Atoms, molecules, and organisms are all at their place but only with schematic content.
5. Pages
Pages represent the last stage of the atomic design hierarchy. Pages are the “specific instances of templates”. In the page stage, templates get populated with real content (copy, microcopy, images, videos, etc.), just as they will appear in the real UI.
Pages allow designers to see how the final user experience will look like, to test the design with real users, and to measure how well it performs in terms of usability, conversion, accessibility, and other metrics.
Pages & template variations
The other goal of the page stage is to make template variations possible. We speak about template variations when the underlying template is the same but the populating content is (slightly) different. For instance, if you want to show different content to different user groups (e.g. for visitors versus logged in users), or when one headline is much longer than the others.
Using template variations is crucial if we want to create consistent and resilient user interfaces. Smaller components (atoms, molecules, organisms) must function well in different scenarios.
For instance, a button must look clickable with whatever surrounding elements around. If it doesn’t look actionable in a certain variation, you need to redesign the button atom until it fits all use cases.
Pages – Example
Below, you can see the page stage of the previous TimeInc home page template. Looks different, huh? This is just one template variation, though. To have an effective UI, the design team has to think hard about what may change in the real site. Then, they need to test the design for that template variation (page), too.
Read Also: A Look Into Proper HTML5 Semantics