"Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure."

This homepage template displays all the necessary page components functioning together, which provides context for these relatively abstract molecules and organism and focus on the page’s underlying content structure rather than the page’s final content



Templates

"Pages are specific instances of templates that show what a UI looks like with real representative content in place."

pages are essential for testing the effectiveness of the underlying design system.

Pages

"Atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional."

Atoms demonstrate all your base styles at a glance

Atoms (in Design)

"Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms."

Organisms (in Design)

"Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule."

Molecules (in Design)

Atomic design is a design ideology that breaks down the elements of an interface into smaller, generalizable features using
- Atoms
- Molecules
- Organisms
- Templates 
- Pages

University of Michigan - Ann Arbor

San Jose State University

Methods and techniques used to make an interface easier to use.

- Atomic Design
- Landing Page Best Practices

UI Design Methods

Atomic Design by Brad Frost. 
atomicdesign.bradfrost.com

Atomic Design, Brad Frost

Atomic Design

Landing pages exist to prompt conversion. And to achieve that it must eliminate distractions.


Learn Before

Related

Learn After