Atomic
Design
by zach fedor
What is Design?
which one of the two possible websites are you currently designing?
de - sign
/dəˈzīn/
noun:
- a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made.
- purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object.
Generic Design Process
- Discovery
- Atmosphere
- Layout
- Comprehensives
...now you can start to build it
Generic Design Process
- Discovery
- Atmosphere
- Layout
- Comprehensives
...now you can start to build it
...again.
What Could
Go Wrong?
Problems With current Process
- Developers Aren't Involved
- Users Don't Like Change
- Leads to Artifacts
- Page Metaphor
The Page
(3500 Years Ago)
The Page
(Today)
Design Systems
Are needed over a
Collection of Pages
Visual Identity is important
but will always be subjective
The Elements of Chemistry
The Elements of Interface
Atoms
- HTML elements
- Color, Animations, etc.
- Useless on it's own
Molecules
- Groups of bonded atoms
- Useful entity
- Does one thing well
Organisms
- Molecules are building blocks
- Added complexity
- Composed of similar or dissimilar parts
Templates
- Groups of organisms to form layout
- Low fidelity
- Start to see final design
Pages
- Instance of a template
- Context
- Allows testing
One
Two
Three
DesignEr to Developer Handoff
DesignEr And Developer System
What the Usual Process Looks Like
Isn't This just a new step?
You're Creating a Foundation
Tools
- Pattern Libraries
- Pattern Libraries
- Pattern Libraries
Time for a Demo
Credit:
Brad Frost
http://atomicdesign.bradfrost.com/