Atomic Design
A methodology for creating design systems by breaking interfaces into fundamental building blocks.
Also known as: Brad Frost's Atomic Design, Atomic Design Methodology
Category: Methods
Tags: designs, ui-design, design-systems, components, methodology, frontend
Explanation
Atomic Design is a methodology developed by Brad Frost for creating design systems. It provides a mental model for crafting user interfaces in a more deliberate and hierarchical manner, inspired by chemistry's concept of atoms combining to form molecules and organisms.
The Five Levels of Atomic Design:
1. Atoms: The basic building blocks - HTML tags like labels, inputs, buttons, and other elements that can't be broken down further without losing functionality.
2. Molecules: Simple groups of atoms functioning together as a unit. A search form combining a label, input field, and button is a molecule.
3. Organisms: Complex UI components composed of groups of molecules and/or atoms. A website header containing a logo, navigation, and search form is an organism.
4. Templates: Page-level objects that place components into a layout and articulate the design's underlying content structure. Templates are like wireframes showing where content will live.
5. Pages: Specific instances of templates with real content in place. Pages are the final manifestation where users interact with the design.
Key Benefits:
- Promotes consistency across the interface through reusable components
- Creates a shared vocabulary between designers and developers
- Enables faster development through component reuse
- Makes designs easier to test and maintain
- Scales well as products grow in complexity
Atomic Design pairs well with component-based frameworks like React, Vue, and Angular, where the methodology's hierarchy maps naturally to component structures.
← Back to all concepts