Atomic
Design
by zach fedor
What is Design?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2954392/choose-one.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2854877/later.jpg)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2853342/Cuneiform__2.jpg)
The Page
(Today)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2853344/chrome-webpage.png)
Design Systems
Are needed over a
Collection of Pages
Visual Identity is important
but will always be subjective
The Elements of Chemistry
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2854827/periodic-table.png)
The Elements of Interface
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2854834/atomic-design-process.png)
Atoms
- HTML elements
- Color, Animations, etc.
- Useless on it's own
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2853544/atoms.jpg)
Molecules
- Groups of bonded atoms
- Useful entity
- Does one thing well
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2853546/molecule.jpg)
Organisms
- Molecules are building blocks
- Added complexity
- Composed of similar or dissimilar parts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2853556/organism2.jpg)
Templates
- Groups of organisms to form layout
- Low fidelity
- Start to see final design
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2853558/template1.jpg)
Pages
- Instance of a template
- Context
- Allows testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2853566/page1.jpg)
One
Two
Three
DesignEr to Developer Handoff
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2856554/waterfall-1.png)
DesignEr And Developer System
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2856557/waterfall-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2856611/lego-2.png)
What the Usual Process Looks Like
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2856613/lego-3.png)
Isn't This just a new step?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/368294/images/2856614/lego-4.png)
You're Creating a Foundation
Tools
- Pattern Libraries
- Pattern Libraries
- Pattern Libraries
Time for a Demo
Credit:
Brad Frost
http://atomicdesign.bradfrost.com/
Atomic Design
By zach fedor
Atomic Design
An overview of Brad Frost's philosophy on designing systems of components as opposed to a collection of pages.
- 1,497