Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

Atomic design

All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.

MO’ PATTERNS, MO’ PROBLEMS๏ Time
consuming to create๏ Treated as a auxiliary project๏ Often created after a project launches๏ Often too abstract๏ Seen only as a designer/developer tool๏ Often incomplete/only serving present cases๏ Lacking a methodology

ATOMS๏ Building blocks of an
interface๏ Can’t be broken down any furtherwithout losing their meaning๏ Abstract๏ Often not too useful on their own๏ Good as an at-a-glance reference๏ See all your global styles laid outat once

MOLECULES๏ Group of atoms bonded
together๏ Smallest fundamental units of acompound๏ More concrete than atoms๏ Encourage a “do one thing anddo it well” philosophy๏ Often serve as the backbone for amore complex system

PAGES๏ Specific instance of a
template๏ Highest fidelity.Template contentis replaced with real/samplecontent๏ The hub for most people involvedin the process.๏ Test the effectiveness of thesystem๏ Test variations in the template:design/content tweaks, include/exclude organisms, etc.

WHY PATTERN LAB๏ Serves as
a hub for the entire design process๏ Useful tool for everyone: information architects, designers,developers, clients๏ Can easily traverse from abstract to concrete๏ Write HTML/CSS/JS as you please. Name things as youplease.๏ Start with a system rather than deconstruct later๏ Encourages flexibility๏ Document as you go