Introduction
Atomic Design is a web design theory pioneered by Brad Frost. It is based on the idea that every design system can be defined as a series of building blocks that coexist. Atomic Design is a visual identity system methodology that separates the entire process when developing visual systems in a more organised way using atoms, molecules, organisms, templates, and pages.
Interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic point of atomic design. Designers must create complex interfaces that function effectively across different screen sizes and environments.
The Atomic Design Methodology
Interfaces can be broken down into a similar finite set of elements. Josh Duck’s Periodic Table of HTML Elements articulates how all of our websites, apps, intranets are all composed of the same HTML elements.
Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:
- 1. Atoms
- 2. Molecules
- 3. Organisms
- 4. Templates
- 5. Pages
1. Atoms:
Atoms are the smallest building blocks of a website page. Atoms of interfaces serve as the foundational building blocks that comprise all of the UI. Atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further.
2. Molecules:
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.For example, a form label, radio button or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
3. Organisms :
Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. Organisms can consist of similar or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.
4. Templates:
Templates consist mostly of groups of organisms combined together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action. Templates are standardised layouts for organising atoms, molecules, and organisms across the product. At this stage, design teams will have templates that show the general patterns of the relevant pages. Product pages, search results pages, home pages and so on will all have their respective templates that show the content structure and general look for later use.
5. Pages:
Pages are specific instances of templates that show what a UI looks like with real representative content in place. The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.
Benefits of Atomic Design
Scalability:
The atomic design creates a scalable system, meaning that it can grow and adapt to meet the changing needs of a project. You can easily add or remove elements as needed by breaking the design down into its smallest components.
Consistency:
Defining your atoms, molecules, and organisms creates a consistent look and feel across your entire design system. This consistency makes it easier for users to navigate your website or application.
Reusability:
The atomic design creates a highly reusable system. Once you have defined your atoms, molecules, and organisms, you can reuse them across multiple projects, saving time and effort.
Collaboration:
Atomic design is a collaborative approach to design. By breaking the design into its smallest components, designers and developers can work together more effectively to create a cohesive system.
Implement “Atomic Design” in Project
Notice the common patterns on design:
Look for small and common things like colours, buttons, and fonts and have a folder full of buttons, like login, register, submit, and how and where to use the yellow, red, blue.
Change the atoms that don’t match:
Check the fonts and buttons that were not matching the design system and change them according to design.
Define “Molecules” so they can match in the entire project:
Create one component, use atoms to create molecules and reuse them in project
Make organism:
Create a uniform container, something like the header, the content container and then the footer.
Use Templates & Pages:
Using all the organisms together, can have a template, with a template will have a page, and by this will see the similarity between all the screens.
Conclusion
Atomic Design is a powerful set of tools that can be used together to improve design workflows and facilitate an effective design system framework. It provides several advantages for designers and developers, including consistency, scalability, reusability, and collaboration. However, it can also be complex, time-consuming. Like any design methodology, it is important to weigh the advantages and disadvantages before deciding whether to adopt Atomic design principles. Using the concept of atoms, molecules, and organisms as a component foundation, Atomic Design helps designers to unify during the creation of a product.