What is Atomic Design?
“Atomic Design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.” – Brad Frost
Atomic Design is methodology for creating scalable systems, reusable components as well as design systems. There are five distinct levels in Atomic Design: Atoms, Molecules, Organisms, Templates and Pages.
Brad Frost’s Atomic Design approach starts with the smallest of parts: the atom. In a design context, an atom refers to the most elementary aspects of a design, for example, the HTML tags. These HTML tags make up details in a user interface – this includes commonly used icons or UI elements like checkboxes, toggles and radio buttons. Atoms become tangible once they are grouped together to form what are known as molecules. Molecules have a more understandable purpose as well as some form of functionality. A good example of what would be a molecule is a search bar with a button.
When built further and joined, these molecule components form organisms. Using the example of the search bar molecule, when you join a header or navigation bar at the top of the page design, it forms a larger component known as an organism. The organism is made up of atoms and molecules to form the building blocks of a layout. As you have learnt, consistency is key on the entire website or application, and to ensure this, the organism can be reused across the design.
When you group together multiple organisms, according to Brad Frost’s Atomic Design, you create templates. Illustrating the layout and relationship between the various organisms and their hierarchy is what is considered to be the template. A series of templates create a page, or in the case of a mobile application, a view.
Leave a Reply