Atomic Design (Brad Frost)

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

Transcript

1. ATOMIC DESIGN @brad_frost
2. PAGES GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/
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...
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
24. http://style.codeforamerica.org/
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/
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
38. 2H2 +O2→2H2 0
44. http://joshduck.com/periodic-table.html
50. ENTER KEYWORD SEARCH THE SITE SEARCH
51. ENTER KEYWORD SEARCH THE SITE SEARCH
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
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
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
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 }}
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 }}
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>
97. CONTENT STRUCTURE ACTUAL CONTENT
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." } }
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/
120. ANNOTATIONS
123. LINEAGE
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.
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
142. GATHER
143. http://stylifyme.com/
145. http://bradfrostweb.com/blog/post/interface-inventory/
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
160. RESOURCE http://styletil.es/
168. ROLL UP OUR SLEEVES
180. http://trentwalton.com/2011/07/14/content-choreography/
181. http://www.flickr.com/photos/15609463@N03/7854373494/
190. AGILE http://cognition.happycog.com/article/diy-process
191. COLLABORATION AND COMMUNICATION TRUMP PROCESS
192. COLLABORATION AND COMMUNICATION TRUMP DELIVERABLES
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