It is a methodology that constrain you to think about system of components instead of collection of web pages.
There are five distinct levels in atomic design:
They are the HTML tags like an h1, the smallest entities on a web page. Such as a form label, an input field or a button.
Atoms include also abstract elements like colours or fonts.
Molecules are groups of atoms bounded together. And they serve as skeleton for our design system.
When we combine molecules together we form organism. An organism is a complex, distinct section of an interface. For example a masthead consist of diverse components like a logo, a primary navigation, a search form.
Templates consist mostly of groups of organisms stitched together to form pages. It’s where we are able to see components in action being arrange in layouts. Templates are also where clients start seeing the final design in place.
Pages are specific instances of templates. It means that placeholder content is replaced with real representative content.
Building up from molecules to organisms encourages creating standalone, portable, reusable components. Specifically for the new university website this methodology allows us to build a pattern library that will help the project be maintainable and future friendly allowing the new website to evolve fluently.
- Pattern library demo
- Pittsburg Food Bank pattern library
- Kirby CMS pattern library
- Ushahidi pattern library
This document is heavily inspired by Brad Frost’s article on Atomic Design. Certain expression and all images are taken from his post.