Atomic design framework
Atomic Design Framework: This framework assert that when designing a user interface for a website or mobile app, the process should begin by creating individual Atoms. These Atoms are then utilized to construct Molecules, which, in turn, form the basis for building Organisms. Organisms are assembled to create Templates, and these Templates serve as the foundation for crafting the final Pages of the interface.
The Atomic Design Framework comprises five distinct stages, namely:
Atoms: These are elements of your website that cannot be further broken down into two functional parts independently. Popular examples of atoms include text, color, and buttons.
In web design, atoms are the basic building blocks that constitute the fundamental visual and functional elements of a user interface. They are the smallest, indivisible components that make up a design. Atoms are typically simple and specific, representing the most basic UI elements like individual text labels, icons, buttons, or form inputs.
The concept of atoms in design is part of the Atomic Design methodology, which suggests breaking down the design system into smaller components for better organization, reusability, and consistency throughout the interface. By starting with atoms, designers can create a library of elemental components that can be combined to form more complex structures like molecules, organisms, templates, and pages in the overall design hierarchy.
Molecules: These are combinations of two or more atoms, representing the integration of two functional elements. Popular examples of molecules include a search bar composed of a text input atom and a button atom.
In the context of web design, molecules are slightly more complex than atoms. They involve the grouping or combination of individual atoms to create more meaningful and functional units. A molecule could consist of two or more atoms working together to perform a specific task or convey a particular piece of information.
For instance, a search bar on a website could be considered a molecule, formed by combining a text input atom and a button atom. The synergy between these atoms creates a functional unit with a specific purpose, allowing users to enter search queries and initiate the search process.
By organizing a design system into atoms and molecules, designers can enhance modularity and reusability. Molecules serve as the next level of abstraction, offering a way to build more complex components while maintaining consistency and efficiency in the overall design structure.
Organisms: In the context of design, organisms are more complex structures formed by the combination of molecules. An organism can be seen as a group of molecules working together to create a distinct and functional component of a user interface.
For example, a “product card” on an e-commerce website can be considered an organism. This organism may be composed of various molecules, such as an image molecule, a title molecule, a price molecule, and a button molecule. Individually, these molecules represent specific functionalities or content elements. When combined as an organism, they form a cohesive unit that showcases a product with its image, title, price, and an action button, creating a meaningful and self-contained module.
The concept of organisms allows designers to think about larger sections of a website or application, bringing together various functional elements to fulfill a specific purpose. Organisms contribute to consistency and maintainability in design systems by offering a structured way to assemble complex components from simpler building blocks (atoms and molecules).
Templates: Templates are structures that govern the layout and arrangement of organisms on a larger scale. They serve as a higher-level design composition, defining the overall page structure and the placement of various organisms within it. Templates provide a consistent framework for presenting content, ensuring a harmonious and cohesive user experience.
For example, a “two-column layout template” could be employed on a blog website. This template might define the arrangement of two main content areas, one for the main blog post and another for supplementary information such as related articles or author details. The template sets the overall structure, indicating where different organisms like headers, footers, and sidebars should be placed.
Pages: Pages represent the final and complete user interface that a person interacts with. They are built by populating templates with specific content. Pages are the culmination of the entire design hierarchy, incorporating atoms, molecules, organisms, and templates into a seamless and functional user experience.
Continuing with the blog website example, a specific “blog post page” would utilize the two-column layout template mentioned earlier. On this page, you would find the header organism, the main blog post organism, the sidebar organism, and the footer organism, all arranged according to the predefined structure of the template. The page is the ultimate output visible to users, presenting a cohesive and well-organized design.
In summary, templates provide a framework for organizing organisms, and pages are the actual instances where templates are filled with content, resulting in a fully realized user interface. This hierarchical approach enhances consistency, efficiency, and maintainability in web and app design.
In conclusion,
- Atoms: Basic, indivisible elements like text, color, and buttons.
2. Molecules: Combinations of atoms, forming more complex and functional units.
3. Organisms: Collections of molecules working together to create distinct components, like a product card.
4. Templates: Structures defining the layout and arrangement of organisms on a larger scale.
5. Pages: The final user interface, where templates are populated with content, providing a complete and cohesive user experience.