atomic design, a problem of expectations
DESCRIPTION
We've focused on designing Web pages for long time. Pixel perfection & designing the same experience for all devices is not possible. Instead of page-based designs. We need design systems. Atomic design allows us to traverse from abstract to concrete. Creators can focus on the atoms and molecules and Clients can focus on pages and templates.TRANSCRIPT
![Page 1: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/1.jpg)
a problem of expectations
ATOMIC DESIGN
@zetareticoli
![Page 2: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/2.jpg)
Francesco Improta
![Page 3: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/3.jpg)
any designers in the room?
![Page 4: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/4.jpg)
Can you send me a preview of the site?
“
![Page 5: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/5.jpg)
![Page 6: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/6.jpg)
once upon a time
the PSD era
![Page 7: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/7.jpg)
we designed pages
![Page 8: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/8.jpg)
pixel-perfect pages
![Page 9: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/9.jpg)
![Page 10: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/10.jpg)
![Page 11: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/11.jpg)
standard web designer’s
workflow
![Page 12: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/12.jpg)
Can you send me a preview of the site?
“
![Page 13: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/13.jpg)
DESIGNER
PSD FULL-COMP MOCKUP
![Page 14: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/14.jpg)
“ want a banner here”
![Page 15: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/15.jpg)
“want a banner here”
“this up…”
![Page 16: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/16.jpg)
“want a banner here”
“this up…”
“…and this down”
![Page 17: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/17.jpg)
“want a banner here”
“this up…”
“…and this down”
“hmm, there’s too white…”
![Page 18: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/18.jpg)
It’s a
pathetic process
![Page 19: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/19.jpg)
• focused on details
![Page 20: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/20.jpg)
• focused on details
• you ‘re doing a presentation of your mockups
![Page 21: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/21.jpg)
• focused on details
• you ‘re doing a presentation of your mockups
• static mockups, no interactions
![Page 22: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/22.jpg)
• focused on details
• you ‘re doing a presentation of your mockups
• static mockups, no interactions
• time consuming
![Page 23: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/23.jpg)
![Page 24: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/24.jpg)
pixel perfect design
![Page 25: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/25.jpg)
–Dan Mall
A responsive design process is like a scandal.
“
![Page 27: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/27.jpg)
we have to rethink
our design process
![Page 28: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/28.jpg)
welcome to
the Post PSD Era
![Page 29: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/29.jpg)
1set the
right expectations
![Page 30: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/30.jpg)
expectations
• client
• team
• personal
![Page 31: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/31.jpg)
collaboration& conversation not presentation2
![Page 32: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/32.jpg)
![Page 33: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/33.jpg)
But we can't sell web sites like paintings
“
–Brad Frost
![Page 34: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/34.jpg)
design systems not pages3
![Page 35: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/35.jpg)
what’s a
design system?
![Page 36: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/36.jpg)
PAUL RAND
1914-1996
![Page 37: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/37.jpg)
![Page 38: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/38.jpg)
![Page 39: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/39.jpg)
![Page 40: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/40.jpg)
a design system
is a language
![Page 41: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/41.jpg)
• typography
• colors
• grid & layout
• shapes
![Page 42: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/42.jpg)
HTTP://DAVERUPERT.COM/2013/04/RESPONSIVE-DELIVERABLES/
![Page 43: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/43.jpg)
how should I design a system?
![Page 44: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/44.jpg)
style tiles1
![Page 45: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/45.jpg)
![Page 46: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/46.jpg)
–Samantha Warren
Style Tiles are a design deliverable consisting of fonts, colors and interface elements
that communicate the essence of a visual brand for the web.
“
![Page 47: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/47.jpg)
![Page 48: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/48.jpg)
![Page 49: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/49.jpg)
–Samantha Warren
Your client should not be expecting you to present a full
design comp.
“
![Page 50: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/50.jpg)
good
• speedy visual development of ideas
![Page 51: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/51.jpg)
good
• speedy visual development of ideas
• feedback ready
![Page 52: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/52.jpg)
good
• speedy visual development of ideas
• feedback ready
• ideal for responsive workflow
![Page 53: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/53.jpg)
not good
• vague
![Page 54: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/54.jpg)
not good
• vague
• don’t match expectations
![Page 55: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/55.jpg)
not good
• vague
• don’t match expectations
• lack global vision
![Page 56: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/56.jpg)
style guides2
![Page 57: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/57.jpg)
![Page 58: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/58.jpg)
![Page 59: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/59.jpg)
![Page 60: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/60.jpg)
![Page 61: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/61.jpg)
![Page 62: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/62.jpg)
![Page 63: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/63.jpg)
![Page 64: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/64.jpg)
![Page 65: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/65.jpg)
good
• structured workflow
![Page 66: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/66.jpg)
good
• structured workflow
• shared vocabulary
![Page 67: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/67.jpg)
good
• structured workflow
• shared vocabulary
• useful reference
![Page 68: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/68.jpg)
not good
• time consuming
![Page 69: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/69.jpg)
not good
• time consuming
• created after project launch
![Page 70: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/70.jpg)
not good
• time consuming
• created after project launch
• auxiliary project
![Page 71: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/71.jpg)
not good
• time consuming
• created after project launch
• auxiliary project
• internal tool
![Page 72: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/72.jpg)
design in the browser with frameworks3
![Page 73: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/73.jpg)
![Page 74: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/74.jpg)
good
• build a prototype
![Page 75: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/75.jpg)
good
• build a prototype
• easy to test
![Page 76: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/76.jpg)
good
• build a prototype
• easy to test
• faster development
![Page 77: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/77.jpg)
not good
• unneeded stuff
![Page 78: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/78.jpg)
not good
• unneeded stuff
• hard to customize
![Page 79: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/79.jpg)
not good
• unneeded stuff
• hard to customize
• using someone else structure, naming, style
![Page 80: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/80.jpg)
?
![Page 81: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/81.jpg)
![Page 82: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/82.jpg)
![Page 83: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/83.jpg)
![Page 84: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/84.jpg)
http://bradfrostweb.com/blog/post/atomic-web-design/
BRAD FROST—
ATOMIC DESIGN ELEMENTS
![Page 85: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/85.jpg)
atoms
![Page 86: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/86.jpg)
building blocks
abstract
global styles
atoms
![Page 87: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/87.jpg)
colors
![Page 88: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/88.jpg)
typography
![Page 89: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/89.jpg)
![Page 90: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/90.jpg)
images
![Page 91: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/91.jpg)
Label text
Placeholder text
BUTTON TEXT
Option 1
Option 2
Option 3
form
![Page 92: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/92.jpg)
molecules
![Page 93: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/93.jpg)
group of atoms
concrete
do one thing well
molecules
![Page 94: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/94.jpg)
Search the site
Type a text… Search
![Page 95: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/95.jpg)
![Page 96: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/96.jpg)
PROGRAMMA REGISTRAZIONE SPONSOR CONTATTI BLOG
![Page 97: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/97.jpg)
![Page 98: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/98.jpg)
organisms
![Page 99: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/99.jpg)
distinct section
group of molecules
ready for visual exploration
standalone, portable elements
organisms
![Page 100: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/100.jpg)
![Page 101: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/101.jpg)
![Page 102: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/102.jpg)
![Page 103: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/103.jpg)
templates
![Page 104: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/104.jpg)
context
HTML
increase fidelity
production code
templates
![Page 105: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/105.jpg)
![Page 106: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/106.jpg)
![Page 107: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/107.jpg)
pages
![Page 108: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/108.jpg)
specific instance of a template
highest fidelity
system effectiveness
make client happy
pages
![Page 109: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/109.jpg)
ABSTRACT
CONCRETE
atoms
molecules
organisms
templates
pages
![Page 110: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/110.jpg)
ABSTRACT
CONCRETE
atoms
molecules
organisms
templates
pages
![Page 111: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/111.jpg)
i loved this
![Page 112: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/112.jpg)
i loved this. do it.
![Page 113: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/113.jpg)
sketch the
site-wide templates1
![Page 114: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/114.jpg)
![Page 115: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/115.jpg)
![Page 116: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/116.jpg)
![Page 117: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/117.jpg)
set molecules & organisms directly in your browser
![Page 118: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/118.jpg)
![Page 119: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/119.jpg)
establish
the visual direction2
![Page 120: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/120.jpg)
design tool & deliverables
• 20 second gut test
![Page 121: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/121.jpg)
design tool & deliverables
• 20 second gut test
• visual inventory
![Page 122: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/122.jpg)
design tool & deliverables
• 20 second gut test
• visual inventory
• element collages
![Page 123: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/123.jpg)
style tiles
element collage
![Page 124: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/124.jpg)
design atmosphere
![Page 125: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/125.jpg)
![Page 126: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/126.jpg)
![Page 127: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/127.jpg)
![Page 128: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/128.jpg)
iterative improvement
![Page 129: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/129.jpg)
![Page 130: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/130.jpg)
![Page 131: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/131.jpg)
add context
![Page 132: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/132.jpg)
![Page 133: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/133.jpg)
WEBSITE.COM
WEBSITE.COM
WEBSITE.COMARCHIVE
![Page 134: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/134.jpg)
first do it, then do it right, then do it better.
![Page 135: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/135.jpg)
craft pages
when needed
![Page 136: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/136.jpg)
![Page 137: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/137.jpg)
3get design
in your browser
![Page 138: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/138.jpg)
![Page 139: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/139.jpg)
![Page 140: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/140.jpg)
TEST, TEST, TEST
![Page 141: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/141.jpg)
it worked!
![Page 142: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/142.jpg)
slowly
built fidelity
![Page 143: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/143.jpg)
dramatically reduced page design iterations
![Page 144: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/144.jpg)
worked in parallel
![Page 145: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/145.jpg)
client
loved this method
![Page 146: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/146.jpg)
• be involved in design process
• recognized work’s value
• received stuff every week
![Page 147: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/147.jpg)
what future?
![Page 148: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/148.jpg)
nobody is an expert
![Page 149: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/149.jpg)
experiment
![Page 150: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/150.jpg)
build your own
design process
![Page 151: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/151.jpg)
share
![Page 152: Atomic design, a problem of expectations](https://reader034.vdocuments.us/reader034/viewer/2022042601/546ef593af7959fa188b674a/html5/thumbnails/152.jpg)
thank you
Francesco Improta
designabile.com
@zetareticoli