Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. There are:
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 collection of parts at the same time. Each of the five stages plays a key role in the hierarchy of our interface design systems.
Let’s dive into each stage in a bit more detail.
In here, that small element/modules in the system called atoms. They are like building blocks of the application. They are 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. For example, the input text field and button are combined as a search from and are able to do something together.
Now we have simple, functional, reusable components that we can put into a broader content. Enter organism!
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. For example, search the site and header combined as a navigation form and are able to do somethings together. This header organism is composed of a search form molecule, logo atom and primary navigation molecule.
Now that we have organisms defined in our design system, we can break our chemistry analogy and apply all these components to something that reassembles a web page!
The language of atoms, molecules and organisms carries with it a helpful hierarchy for us to deliberately construct the components of our design systems.
In this step, we will say goodbye to chemistry analogy. The template consists mostly of groups of organisms stitched together to form pages.
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
In this stage easy to visualize the organisms form the below sample design and how can they compose each of the pages. But not only that, breaking our design into these parts can help us to establish better design rules, and be more conscious of when and why we would want to overwrite those rules.
Now that we’ve establish better our pages’ skeletal system, let’s put some meat on them bones!
The final stage is pages. All templates are incorporate real responsive content it’s called page.
They are specific instances of templates that show what UI looks like real representative content in place. Otherwise pages are templates with final assets, video, photography and real content added in allowing us to review and iterate further on the design if needed.
In this article, we mentioned that how Atomic design provides a clear methodology for crafting design systems. Frameworks like atomic design allow us to focus our thinking and be explicit in what we create. It ensures our designs are consistent and manageable. Atomic design allows designers to think critically about each component of design on its own and as part of a larger whole.