ATOMIC DESIGN PROCESS FOR RESPONSIVE SITES
•
7 likes•2,026 views
The document discusses the need for a new design process called "atomic design" in the post-PSD era. It outlines some of the problems with the traditional pixel-perfect PSD workflow and presents atomic design as an alternative. Atomic design involves designing systems rather than pages by breaking interfaces down into reusable atomic elements like atoms, molecules and organisms. This allows for faster, more collaborative and responsive design processes.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to ATOMIC DESIGN PROCESS FOR RESPONSIVE SITES
Similar to ATOMIC DESIGN PROCESS FOR RESPONSIVE SITES (20)
Recently uploaded
Recently uploaded (20)
ATOMIC DESIGN PROCESS FOR RESPONSIVE SITES
- 1. ATOMIC DESIGN a problem of expectations @zetareticoli
- 3. any designers in the room?
- 4. “ Can you send me a preview of the site?
- 6. once upon a time the PSD era
- 11. standard web designer’s workflow
- 12. “ Can you send me a preview of the site?
- 13. PSD FULL-COMP MOCKUP DESIGNER
- 14. “ want a banner here”
- 15. “want a banner here” “this up…”
- 16. “want a banner here” “…and this down” “this up…”
- 17. “want a banner here” “…and this down” “this up…” “hmm, there’s too white…”
- 18. It’s a pathetic process
- 19. • focused on details
- 20. • focused on details • you ‘re doing a presentation of your mockups
- 21. • focused on details • you ‘re doing a presentation of your mockups • static mockups, no interactions
- 22. • focused on details • you ‘re doing a presentation of your mockups • static mockups, no interactions • time consuming
- 25. “ A responsive design process is like a scandal. –Dan Mall
- 27. we have to rethink our design process
- 28. welcome to the Post PSD Era
- 29. 1 set the right expectations
- 30. expectations • client • team • personal
- 31. collaboration & conversation not presentation 2
- 33. “ But we can't sell web sites like paintings –Brad Frost
- 34. design systems not pages3
- 35. what’s a design system?
- 40. a design system is a language
- 41. • typography • colors • grid & layout • shapes
- 43. how should I design a system?
- 44. style ti1les
- 46. “ Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. –Samantha Warren
- 49. “ Your client should not be expecting you to present a full design comp. –Samantha Warren
- 50. good • speedy visual development of ideas
- 51. good • speedy visual development of ideas • feedback ready
- 52. good • speedy visual development of ideas • feedback ready • ideal for responsive workflow
- 53. not good • vague
- 54. not good • vague • don’t match expectations
- 55. not good • vague • don’t match expectations • lack global vision
- 56. style gu2ides
- 65. good • structured workflow
- 66. good • structured workflow • shared vocabulary
- 67. good • structured workflow • shared vocabulary • useful reference
- 68. not good • time consuming
- 69. not good • time consuming • created after project launch
- 70. not good • time consuming • created after project launch • auxiliary project
- 71. not good • time consuming • created after project launch • auxiliary project • internal tool
- 72. design in the browser with frameworks 3
- 74. good • build a prototype
- 75. good • build a prototype • easy to test
- 76. good • build a prototype • easy to test • faster development
- 77. not good • unneeded stuff
- 78. not good • unneeded stuff • hard to customize
- 79. not good • unneeded stuff • hard to customize • using someone else structure, naming, style
- 80. ?
- 84. BRAD FROST — ATOMIC DESIGN ELEMENTS http://bradfrostweb.com/blog/post/atomic-web-design/
- 85. atoms
- 86. building blocks abstract global styles atoms
- 87. colors
- 88. typography
- 90. images
- 91. Label text Placeholder text BUTTON TEXT Option 1 Option 2 Option 3 form
- 92. molecules
- 93. group of atoms concrete do one thing well molecules
- 94. Search the site Type a text… Search
- 96. PROGRAMMA REGISTRAZIONE SPONSOR CONTATTI BLOG
- 98. organisms
- 99. distinct section group of molecules ready for visual exploration standalone, portable elements organisms
- 103. templates
- 104. context HTML increase fidelity production code templates
- 107. pages
- 108. specific instance of a template highest fidelity system effectiveness make client happy pages
- 109. CONCRETE ABSTRACT pages templates organisms molecules atoms
- 110. CONCRETE ABSTRACT pages templates organisms molecules atoms
- 111. i loved this
- 112. i loved this. do it.
- 113. sketch the site-wide templates 1
- 117. set molecules & organisms directly in your browser
- 119. establish the visual direction 2
- 120. design tool & deliverables • 20 second gut test
- 121. design tool & deliverables • 20 second gut test • visual inventory
- 122. design tool & deliverables • 20 second gut test • visual inventory • element collages
- 123. style tiles element collage
- 124. design atmosphere
- 131. add context
- 134. first do it, then do it right, then do it better.
- 135. craft pages when needed
- 137. get design in your 3 browser
- 140. TEST, TEST, TEST
- 141. it worked!
- 143. dramatically reduced page design iterations
- 144. worked in parallel
- 145. client loved this method
- 146. • be involved in design process • recognized work’s value • received stuff every week
- 147. what future?
- 148. nobody is an expert
- 149. experiment
- 150. build your own design process
- 151. share
- 152. thank you Francesco Improta @zetareticoli designabile.com