The Atomic design Modules.
That methodology has five distinct stages and ordered to hierarchy way to create interface design systems. There are,
- Atoms
- Molecules
- Organisms
- Templates
- Pages
- In here, That small element /modules in the system called “Atoms”. Atoms are like building blocks of the application.
- They’re the different UI elements by themselves such as buttons, forms elements and label as well as defined in typography, color and iconography once atom bind together.
- Molecules which provide more functionality and molecules are groups of atoms bonded together to be the smallest fundamental units.
- These atoms by themselves are pretty basic but once grouped together provide meaning and functionality allowing the user to know what’s the current step they’re in which steps lays ahead and a way to navigate those steps as in nature when interfaces grown complexity and molecules bind together.
- The organism is groups of molecules joined together to form a relatively complex, distinct section on an interface.
- The search from molecules combined with navigation molecules to form a header organism.
- Organisms demonstrate those smaller, simpler components in action and serve as distinct patterns that can be used again and again.
- From the front-end perspective, organisms are good candidates for separating their HTML parts into partials.
- The template consists mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and the layout in action.
- This is not only a matter of creating a specification document to capture how the modules need to be built, or writing guidelines that capture high-level definitions such as brand colors and font families.
- The Final stage is the atomic design module is pages. All Templates are incorporate real representative content it’s called Page.
- Pages are the highest level of fidelity.
- Pages are templates with final assets, videos, photography and real content added in, allowing us to review and iterate further on the design if needed.
- pages are essential for testing the effectiveness of the underlying design system.
These five distinct stages concurrently work together to produce effective user interface design systems. To sum up atomic design in a nutshell:
- Atoms are UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
- Molecules are collections of atoms that form relatively simple UI components.
- Organisms are relatively complex components that form discrete sections of an interface.
- Templates place components within a layout and demonstrate the design’s underlying content structure.
- Pages apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.
