Atomic Design is a method for organizing user interface components developed by Brad Frost. It is based on the idea that UI elements should be broken down into smaller, modular pieces that can be combined to create complex interfaces. This is a fundamental of designing interfaces.
Term | Definition |
---|---|
Atoms | These are the smallest, most basic elements of the user interface, such as buttons, inputs, and text. Atoms are the building blocks of all user interfaces. |
Molecules | Molecules are combinations of atoms that create more complex UI elements. Examples of molecules include forms and menus. |
Organisms | Organisms are combinations of molecules that create even more complex UI elements. Examples of organisms include header and footer sections. |
Templates | Templates are arrangements of organisms that represent the structure of a specific page or section of the UI. |
Pages | Pages are the final user interface, created using templates and filled with content. |