We’ll go through the basics of Atomic Design, created by Brad Frost.
We created web apps by building pages, which worked well for a long time. Then, it got more complex as pages needed to be served to a variety of devices. It was necessary to break these giant responsibilities into smaller and easier to manage elements.
Imagine a Lego house ?, built with only one big piece. This architecture, only allows us to build that house since we only have one Lego piece. However, if we break down the house into pieces as brick, door, and so on… We end up with a set of Lego pieces that will help us build literally anything.
Innovation is looking at things from a different angle. And that’s exactly what Brad Frost did when he took a totally different approach based on another field: chemistry.
In chemistry, atoms combine together to form molecules. Then, molecules can combine further to form relatively complex organisms.
Atomic design is a methodology to create user interfaces. It helps us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. It is composed of five elements:
- Atoms: The basic HTML elements as label or button. They can’t be broken down any further.
- Molecules: A composition of atoms functioning together as a unit. For example, a label and two radio buttons can create together a form item molecule.
- Organisms: They are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. For example, a header, list or footer organisms.
- Templates: They provide context for these molecules and organisms by focusing on the page’s underlying content structure (page’s skeleton) rather than the page’s final content. For example: How the header, list, and footer would look like together.
- Pages: Specific instances of templates that show what a UI looks like with real content in place. Example: we would have a page with the template shown above and real content.
Atomic Design is a powerful methodology that provides a collection of independent and reusable web components that can be assembled together to build any user interface in a better and faster manner.