There are different types of methodologies we are using in our design world to study the principles, best practices, and procedures of designing, so here I am talking about an interesting one, The Atomic Design. Coined by Brad Frost, The Atomic Design Systems methodology considers creating and maintaining design systems while providing an attractive way of explaining itself using chemistry. This methodology is very helpful and less time consuming to UX designers while they design or create a style guide. Atomic design is created with five distinct stages

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Atoms

Atoms are the basic building components in this design system. in atoms, all elements are individual items consisting of labels, icons, buttons, Radio buttons, Checkboxes fonts, etc.

Molecules

Molecules are the second stage in this methodology. It is a combined group of atoms. For example, an input field, input field is created with individual atoms like buttons, fields, and labels. Notification toasts, dropdown menus, data values are some examples of molecules.

Organisms

Third stage is Organisms. The combined group of molecules is called organisms, this is a bigger component it includes navigation, sidebars, pop ups, etc.

Templates

Templates are the combined group of organisms and this will eventually be forming as a proper web/mobile layout like wireframes.

Pages

Pages are the final stage of this process, once you create the templates you can add actual contents and images to the page, now you have a page containing all the atomic design elements like atoms, molecules, and organisms, etc.

Why atomic design is important

These design methodologies allow teams to create a product or system quicker than before. We can see interfaces broken down to their atomic component, and also see how those components combine to form the final output. If you have a list of atoms before site creation begins, then you can create mock-up pages quickly and easily, and eventually, the design will be a less time-consuming process.

About the author