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.

Design Pattern Craftsmanship

2,851 views

Published on

Slides from a presentation I gave at Front-End Design Conference and ForgeConf in 2014. My first Design Pattern Craftsmanship talk in 2012 was presented at Etsy's Code as Craft series and I talked about MailChimp's original UI Pattern Library. Since then, we've redesigned and rebuilt our pattern library, so V2 of the talk covers the history, challenges, and benefits of our exploration of front-end patterns.

Published in: Design
  • Be the first to comment

Design Pattern Craftsmanship

  1. 1. DESIGN PATTERN CRAFTSMANSHIP Jason Beaird - Forge Conference - Sept 26th, 2014
  2. 2. 1620-1830 Post & Beam Framing 1830-1930 Balloon Framing 1930-Now Platform Framing
  3. 3. 1991-2003 The Wild Wild Web 2003-2012 Web Standards 2012-Now Responsive Design
  4. 4. 1991-2003 The Wild Wild Web 2003-2012 Web Standards 2012-Now “The traditional building paradRiegspmons iivse D etsoign gather all the parts of a building on site and then assemble them piece by piece.” – Refabricating Architecture
  5. 5. Typical Construction Timeline
  6. 6. https://flic.kr/p/9v2Pgx
  7. 7. Master Craftsman We realized that by focusing on creating systems, instead of always starting from scratch, we have more time to focus on important details. Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74
  8. 8. http://maban.co.uk/projects/front-end-style-guides/
  9. 9. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
  10. 10. http://blog.mailchimp.com/new-mailchimp-is-here/
  11. 11. http://ux.mailchimp.com
  12. 12. A DESIGN PATTERN LIBRARY? •Specific to a Project or Application* •LEGO-Like Sets of Markup & Style •For Elements Used 3 or More Times •Should Be Adaptable & Extendable •Serves as a Testbed & Style Guide
  13. 13. CSS ARCHITECTURE // Core! mcvariables! mcmixins! dijit/.../variables! reset! extend! ! // Global! reset! typography! grid! freddicons! forms // Components! media-list! feedback! forms! misc! sprites! tables! subscriber-table! hover-list! dotted-list! stat-block! buttons! widgets // Pages! login! account! main-search! autoresponders! lists! campaigns! dashboard-styles! chatter! wizard! reports! neapolitan! file-manager! ! ! // Shared Items! nav! localnav! header! ! // Sigh! IE! ! @media print {! print! } theone.less
  14. 14. “We’re not designing pages. We’re designing systems of components.” - Stephen Hay Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74
  15. 15. http://theuxnewsletter.com
  16. 16. getbootstrap.com, foundation.zurb.com, patternlab.io, developers.google.com/web/starter-kit
  17. 17. “A good craftsperson builds their own tools.” - Dan Cedarholm http://pea.rs
  18. 18. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
  19. 19. http://thestandardsmanual.com
  20. 20. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
  21. 21. http://voiceandtone.com
  22. 22. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
  23. 23. http://html5boilerplate.com Hello world! This is HTML5 Boilerplate.
  24. 24. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
  25. 25. http://boagworld.com/design/pattern-library/
  26. 26. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
  27. 27. http://themebeans.com
  28. 28. Illustration Source: Carpentry for Boys by J. S. Zerbe, 3/72007 - gutenberg.org/ebooks/20763 Love˝ +˝ Patterns˝ +˝ Tools˝ Jason Beaird @jasongraphix

×