Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Atomic design, a problem of expectations

1,818 views

Published on

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.

Published in: Design

Atomic design, a problem of expectations

  1. 1. ATOMIC DESIGN a problem of expectations @zetareticoli
  2. 2. Francesco Improta
  3. 3. any designers in the room?
  4. 4. “ Can you send me a preview of the site?
  5. 5. once upon a time the PSD era
  6. 6. we designed pages
  7. 7. pixel-perfect pages
  8. 8. standard web designer’s workflow
  9. 9. “ Can you send me a preview of the site?
  10. 10. PSD FULL-COMP MOCKUP DESIGNER
  11. 11. “ want a banner here”
  12. 12. “want a banner here” “this up…”
  13. 13. “want a banner here” “…and this down” “this up…”
  14. 14. “want a banner here” “…and this down” “this up…” “hmm, there’s too white…”
  15. 15. It’s a pathetic process
  16. 16. • focused on details
  17. 17. • focused on details • you ‘re doing a presentation of your mockups
  18. 18. • focused on details • you ‘re doing a presentation of your mockups • static mockups, no interactions
  19. 19. • focused on details • you ‘re doing a presentation of your mockups • static mockups, no interactions • time consuming
  20. 20. pixel perfect design
  21. 21. “ A responsive design process is like a scandal. –Dan Mall
  22. 22. http://opensignal.com/reports/fragmentation-2013/
  23. 23. we have to rethink our design process
  24. 24. welcome to the Post PSD Era
  25. 25. 1 set the right expectations
  26. 26. expectations • client • team • personal
  27. 27. collaboration & conversation not presentation 2
  28. 28. “ But we can't sell web sites like paintings –Brad Frost
  29. 29. design systems not pages3
  30. 30. what’s a design system?
  31. 31. PAUL RAND 1914-1996
  32. 32. a design system is a language
  33. 33. • typography • colors • grid & layout • shapes
  34. 34. HTTP://DAVERUPERT.COM/2013/04/RESPONSIVE-DELIVERABLES/
  35. 35. how should I design a system?
  36. 36. style ti1les
  37. 37. “ 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
  38. 38. “ Your client should not be expecting you to present a full design comp. –Samantha Warren
  39. 39. good • speedy visual development of ideas
  40. 40. good • speedy visual development of ideas • feedback ready
  41. 41. good • speedy visual development of ideas • feedback ready • ideal for responsive workflow
  42. 42. not good • vague
  43. 43. not good • vague • don’t match expectations
  44. 44. not good • vague • don’t match expectations • lack global vision
  45. 45. style gu2ides
  46. 46. good • structured workflow
  47. 47. good • structured workflow • shared vocabulary
  48. 48. good • structured workflow • shared vocabulary • useful reference
  49. 49. not good • time consuming
  50. 50. not good • time consuming • created after project launch
  51. 51. not good • time consuming • created after project launch • auxiliary project
  52. 52. not good • time consuming • created after project launch • auxiliary project • internal tool
  53. 53. design in the browser with frameworks 3
  54. 54. good • build a prototype
  55. 55. good • build a prototype • easy to test
  56. 56. good • build a prototype • easy to test • faster development
  57. 57. not good • unneeded stuff
  58. 58. not good • unneeded stuff • hard to customize
  59. 59. not good • unneeded stuff • hard to customize • using someone else structure, naming, style
  60. 60. ?
  61. 61. BRAD FROST — ATOMIC DESIGN ELEMENTS http://bradfrostweb.com/blog/post/atomic-web-design/
  62. 62. atoms
  63. 63. building blocks abstract global styles atoms
  64. 64. colors
  65. 65. typography
  66. 66. images
  67. 67. Label text Placeholder text BUTTON TEXT Option 1 Option 2 Option 3 form
  68. 68. molecules
  69. 69. group of atoms concrete do one thing well molecules
  70. 70. Search the site Type a text… Search
  71. 71. PROGRAMMA REGISTRAZIONE SPONSOR CONTATTI BLOG
  72. 72. organisms
  73. 73. distinct section group of molecules ready for visual exploration standalone, portable elements organisms
  74. 74. templates
  75. 75. context HTML increase fidelity production code templates
  76. 76. pages
  77. 77. specific instance of a template highest fidelity system effectiveness make client happy pages
  78. 78. CONCRETE ABSTRACT pages templates organisms molecules atoms
  79. 79. CONCRETE ABSTRACT pages templates organisms molecules atoms
  80. 80. i loved this
  81. 81. i loved this. do it.
  82. 82. sketch the site-wide templates 1
  83. 83. set molecules & organisms directly in your browser
  84. 84. establish the visual direction 2
  85. 85. design tool & deliverables • 20 second gut test
  86. 86. design tool & deliverables • 20 second gut test • visual inventory
  87. 87. design tool & deliverables • 20 second gut test • visual inventory • element collages
  88. 88. style tiles element collage
  89. 89. design atmosphere
  90. 90. iterative improvement
  91. 91. add context
  92. 92. WEBSITE.COM WEBSITE.COM WEBASRICTHEIV.CE OM
  93. 93. first do it, then do it right, then do it better.
  94. 94. craft pages when needed
  95. 95. get design in your 3 browser
  96. 96. TEST, TEST, TEST
  97. 97. it worked!
  98. 98. slowly built fidelity
  99. 99. dramatically reduced page design iterations
  100. 100. worked in parallel
  101. 101. client loved this method
  102. 102. • be involved in design process • recognized work’s value • received stuff every week
  103. 103. what future?
  104. 104. nobody is an expert
  105. 105. experiment
  106. 106. build your own design process
  107. 107. share
  108. 108. thank you Francesco Improta @zetareticoli designabile.com

×