Your website under the microscope
Brainchild of Brad Frost, the Atomic Design web-building method allows flexibility and consistency from the very beginning.
It uses ‘atoms’, ‘molecules’ and ‘organisms’ to create a website that’s completely scalable.
Atoms
In chemistry, atoms are your most basic components which form everything. Buttons, fonts, search fields – these are the ‘atoms’ of your website design.
Molecules
A number of atoms together form molecules. These could be heroes, alerts or search navigations. They’re still portable, and can be dropped in anywhere on your site.
Organisms
Multiple molecules, or atoms and molecules together, form organisms. Think headers, footers and stack forms.
Templates
Consist mostly of groups of organisms stitched together to form pages.
When we get to this stage, we can start to see our design system coming together and our layout in action. Templates are concrete, and they provide context for all of those relatively abstract molecules and organisms. The design can evolve from wireframes to visual design comps and/or prototypes.
Pages
Specific instances of templates with actual content.
This stage has the highest level of fidelity, and it’s essential. This is our chance to test our design system’s effectiveness. 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. Here, we can also test variations in templates.
