The atomic design system is a methodology to structuring your design system and organizing your files. The components of the atomic design system are as follows: Atoms, Molecules, Organisms, Templates, and Pages.
The first three components base their thinking on chemistry. The laws of chemistry tell us atomic elements combine together to form molecules. Molecules can then combine to form complex organisms; and so can components of a web design file!
Our interfaces can be broken down into this simple structures, making us more organized and more likely for our user to understand patterns on our designs.
So let's get into each, shall we?!
Atoms are the basic building blocks of our interfaces, and include things like labels, buttons, colors, type styles, and other things that can't be broken down anymore without not working. Atoms show all your basic styles at a glance.
Molecules are groups of atoms working together as a unit. For example, an image, button, and subtext can join together to create a blog molecule. Combining these elements give atoms a purpose. You can reuse this molecule over and over again on your website to create patterns for a user.
Organisms are groups of molecules working together to form sections on a webpage. Going back to our blog molecule, you can combine 3 of these molecules together to create a blog section with multiple post snippets showing at once.
Now we move away from the chemistry analogies, and into design terms — yay! Templates are full page objects that combine multiple organisms and molecules to create a skeleton for you design. They serve as the basic structure of your webpage. A template can be long or short, and can be composed of atoms, molecules, and organisms!
A page is an instance of a temple, that shows what the UI will look like. A page is what users will see and interact with. Pages include photos, animations, colors, and other fun elements that bring a design to life!
I hope you learned something new, and will think of implementing the atomic design system in your next project! Come back weekly for more information on web design, branding, and design theory.
Get in touch
