Save 37% off PRO during our Black Friday Sale! »

Atomic Design (Brad Frost)

Atomic Design (Brad Frost)

Brad Frost erklärt auf der vierten Lean UX DUS was es mit "Atomic Design" auf sich hat.

5816c25e9ed4e0eedebebb3c0a927952?s=128

Lean UX DUS

May 28, 2015
Tweet

Transcript

  1. ATOMIC DESIGN @brad_frost

  2. PAGES GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/

  3. None
  4. None
  5. None
  6. None
  7. WHAT IS AN INTERFACE MADE OF?

  8. http://bradfrost.github.com/this-is-responsive/patterns.html

  9. We’re not designing pages, we’re designing systems of components. -Stephen

    Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  10. http://foundation.zurb.com/

  11. getbootstrap.com

  12. THESE THINGS ARE GREAT, BUT...

  13. None
  14. FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all ๏ Lookalike issues ๏ Potential

    for bloat/unneeded stuff ๏ Might not do everything you need ๏ Compatibility with existing sites ๏ Subscribe to someone else’s structure, naming, style
  15. Tiny Bootstraps, for every client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/

  16. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style

    systems custom tailored for your clients’ needs. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
  17. http://maban.co.uk/projects/front-end-style-guides/

  18. BENEFITS OF FRONT-END STYLE GUIDES ๏ Promotes consistency and cohesion

    ๏ Easier to test ๏ Better workflow ๏ Creates a shared vocabulary ๏ Useful reference ๏ Future-friendly foundation http://24ways.org/2011/front-end-style-guides/
  19. http://brettjankord.com/projects/style-guide-boilerplate/

  20. http://patternprimer.adactio.com/

  21. http://barebones.paulrobertlloyd.com

  22. None
  23. None
  24. http://style.codeforamerica.org/

  25. None
  26. http://ux.mailchimp.com/patterns/

  27. http://yelp.com/styleguide

  28. http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/

  29. None
  30. None
  31. None
  32. I LOVE THESE.

  33. http://styleguides.io/

  34. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create ๏

    Treated as a auxiliary project ๏ Often too abstract ๏ Seen only as a designer/developer tool ๏ Often created after a project launches ๏ Often incomplete/only serving present cases ๏ Lacking a clear methodology
  35. ATOMIC DESIGN

  36. 2H2 + O2 → 2H2 0 C + O2 →

    CO2  CH4 + O2 → CO2 + H2 O C8 H18 + O2 → CO2 + H2 0 C2 H6 + O2 → CO2 + H2 O
  37. None
  38. 2H2 +O2→2H2 0

  39. None
  40. None
  41. None
  42. None
  43. None
  44. http://joshduck.com/periodic-table.html

  45. None
  46. None
  47. None
  48. None
  49. None
  50. ENTER KEYWORD SEARCH THE SITE SEARCH

  51. ENTER KEYWORD SEARCH THE SITE SEARCH

  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. You can create good experiences without knowing the content. What

    you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. -Mark Boulton http://www.markboulton.co.uk/journal/structure-first-content-always
  62. None
  63. None
  64. None
  65. None
  66. None
  67. ABSTRACT CONCRETE

  68. ABSTRACT CONCRETE CREATORS CLIENTS

  69. REFERENCE BUILD REVIEW

  70. The idea of designing components like this, out of context

    and without layout, might sound strange— particularly if you’ve been used to designing Web pages the traditional way. But we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble. -Andy Clarke http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
  71. None
  72. None
  73. DAVE OLSEN @dmolsen

  74. WHAT PATTERN LAB IS ๏ A design system builder ๏

    Your comprehensive interface design system ๏ A style guide starter kit ๏ A design toolkit (viewport resizer and other tools)
  75. WHAT PATTERN LAB AIN’T ๏ A UI framework ๏ Language,

    library, style, workflow dependent ๏ Incredibly rigid ๏ “Just” a pattern library, but also not a production-ready static site generator
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. MOLECULE GUTS code block <div class="block block-post"> <a href="{{ url

    }}"> <div class="b-img"> {{> atoms-thumb }} </div> <h3 class="b-title">{{ headline }}</h3> <p class="b-excerpt">{{ excerpt }}</p> </a> </div>
  87. BASIC INCLUDE code block {{> molecules-block-post }}

  88. None
  89. None
  90. ORGANISM GUTS code block <header class="header" role="banner"> {{> atoms-logo }}

    {{> molecules-primary-nav }} {{> molecules-search }} </header>
  91. BASIC INCLUDE code block {{> organisms-header }}

  92. None
  93. None
  94. None
  95. TEMPLATE GUTS code block {{> organisms-header }} <main role="main"> {{#

    hero }} {{> molecules-hero-video }} {{/ hero }} <section class="section"> {{# experience }} {{> organisms-story-feature }} {{/ experience }} </section> <section class="section"> {{# factoid-advertising }} {{> organisms-factoid }} {{/ factoid-advertising }} </section>
  96. None
  97. CONTENT STRUCTURE ACTUAL CONTENT

  98. None
  99. None
  100. None
  101. PIPING IN REAL CONTENT code block { "title" : "Time

    Inc.", "bodyClass": "home", "hero" : { "headline": "Moving People" "img": { "src": "/images/hero_beyonce.jpg", "alt": "Beyonce" } }, …
  102. PIPING IN REAL CONTENT code block "experience" : { "heroClass"

    : "experience", "hero-main": { "src": “/images/hero_skater.jpg", "alt": "Olympic Figure Skater" }, "eyebrow" : "Experiences", "headline" : "Champions at the Olympics", "excerpt" : "Time Inc’s brands cover every aspect of the Sochi XXII Winter Olympic Games. From the best athletes to the best viewing parties." } }
  103. None
  104. PSEUDO-PATTERNS

  105. code block dashboard.json DEFAULT DASHBOARD

  106. code block dashboard~first-run.json ADMIN DASHBOARD

  107. SWITCH OFF CERTAIN MODULES code block { "recentActivity" : false

    }
  108. code block dashboard~admin.json ADMIN DASHBOARD

  109. SWITCH OFF CERTAIN MODULES code block { "userIsAdmin" : true

    }
  110. VIEWER

  111. 320PX.

  112. 320PX. 480PX.

  113. 320PX. 480PX. 768PX.

  114. 320PX. 480PX. 768PX. 1024PX.

  115. 320PX. 480PX. 768PX. 1024PX. THE FOLD.

  116. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.

  117. RESOURCE http://bradfrostweb.com/demo/ish/

  118. None
  119. None
  120. ANNOTATIONS

  121. None
  122. None
  123. LINEAGE

  124. None
  125. None
  126. A BUNCH OF OTHER STUFF ๏ Code view (source and

    rendered HTML) ๏ Pattern status ๏ Media query display ๏ New version coming soon! Choose your own templating engine, plugins, and more
  127. http://patternlab.io

  128. IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME @DMOLSEN.

  129. None
  130. None
  131. None
  132. None
  133. SET EXPECTATIONS

  134. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg

  135. As an industry, we sell websites like paintings. Instead, we

    should be selling beautiful and easy access to content, agnostic of device, screen size, or context. -Dan Mall http://danielmall.com/articles/the-post-psd-era/
  136. COMPLEX NAVIGATION DEATH TO THE WATERFALL

  137. None
  138. None
  139. None
  140. None
  141. None
  142. GATHER

  143. http://stylifyme.com/

  144. None
  145. http://bradfrostweb.com/blog/post/interface-inventory/

  146. None
  147. None
  148. None
  149. None
  150. None
  151. None
  152. None
  153. ๏ Document your interface ๏ Highlight inconsistencies ๏ Establish scope

    of work for translating to a responsive environment ๏ Lay the groundwork for a future style guide/pattern library INTERFACE INVENTORY
  154. ESTABLISH DIRECTION

  155. None
  156. None
  157. None
  158. None
  159. None
  160. RESOURCE http://styletil.es/

  161. None
  162. None
  163. None
  164. None
  165. None
  166. None
  167. None
  168. ROLL UP OUR SLEEVES

  169. None
  170. None
  171. None
  172. None
  173. None
  174. None
  175. None
  176. None
  177. None
  178. None
  179. None
  180. http://trentwalton.com/2011/07/14/content-choreography/

  181. http://www.flickr.com/photos/15609463@N03/7854373494/

  182. None
  183. None
  184. None
  185. None
  186. None
  187. None
  188. None
  189. None
  190. AGILE http://cognition.happycog.com/article/diy-process

  191. COLLABORATION AND COMMUNICATION TRUMP PROCESS

  192. COLLABORATION AND COMMUNICATION TRUMP DELIVERABLES

  193. None
  194. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.

  195. THIS IS FUN!

  196. atomicdesign.bradfrost.com

  197. atomicdesign.bradfrost.com ONLY $10!!!

  198. THANKS! @brad_frost