Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Pattern Craftsmanship

Design Pattern Craftsmanship

As designers and developers we all want to put our personal stamp on the web and solve problems in uniquely awesome ways. This mentality works fine for small jobs but tends to fall apart with big projects and team environments. In his talk, Jason will explain how MailChimp's pattern library helps their team prototype faster, promote collaboration and prevent code bloat. He'll also explore other pattern resources and share tools to help you craft your own modular, expandable set of interface patterns.

Presented at Etsy on February 29th, 2012

4c362c2f074e96a688cc8d04315e4e58?s=128

Jason Beaird

March 02, 2012
Tweet

Transcript

  1. DESIGN PATTERN CRAFTSMANSHIP Jason Beaird - February 29th, 2012

  2. None
  3. Hobbyist Illustration Source: Punch, or the London Charivari, Volume 93,

    October 15th 1887
  4. None
  5. None
  6. None
  7. None
  8. http://sitepoint.com/copy-great-designers-steal/

  9. THE PATH TO MASTERY •Apprentice •Journeyman •Master Craftsman •Hobbyists &

    Hackers
  10. Hobbyist Illustration Source: Punch, or the London Charivari, Volume 93,

    October 15th 1887
  11. Apprentice Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris,

    1769-74
  12. None
  13. 1. LAYOUT Asymmetrical Balance Symmetrical Balance

  14. 1. LAYOUT Unity via Proximity Unity via Repetition

  15. Emphasis Placement Continuance Isolation Contrast Proportion 1. LAYOUT

  16. Primary Navigation Block Logo Copyright Homepage Content Widget 1 Widget

    2 Widget 3 Footer Navigation Block 1. LAYOUT
  17. Primary Navigation Block Logo Copyright Homepage Content Widget 1 Widget

    2 Widget 3 Footer Navigation Block 1. LAYOUT
  18. Primary Navigation Block Logo Copyright Homepage Content Widget 1 Widget

    2 Widget 3 Footer Navigation Block 1. LAYOUT
  19. MONOCHROMATIC One color + Black/White 2. COLOR ANALOGOUS Adjacent 1/3

    of the “Pie” COMPLIMENTARY Opposite Sides of the Wheel Others: Split-Complimentary, Triadic, Tetradic, etc...
  20. 3. TEXTURE

  21. 1. BASELINE 2. CAP HEIGHT 3. CROSSBAR 4. SERIF 5.

    MEANLINE As with design principles, there are a lot of vocabulary terms to digest when first learning about the nuances of typography. Getting to know the 5 basic categories of fonts is a good foundation. 11. TERMINAL 12. ASCENDER 13. LEG 14. LIGATURE 15. X-HEIGHT 6. BOWL 7. DESCENDED 8. COUNTER 9. STEM 10. TITTLE 4. TYPOGRAPHY
  22. 5. IMAGERY

  23. http://demo.customtheme.com/?wptheme=Blogwave

  24. http://allrecipes.com/Recipe/Worlds-Best-Lasagna

  25. None
  26. “Seabreeze Shower” by Harold Newton, Date Unknown

  27. “Untitled” by Mary Ann Carroll, 1968

  28. “Afternoon Glow” by A.E. Backus, Date Unknown

  29. None
  30. Journeyman Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris,

    1769-74
  31. BUT OF COURSE YOU ALREADY... •Love Web Standards •Write Semantic

    Code •Separate Style/Content/Behavior •Experiment with New Technologies •Constantly Hunting for Design Inspiration
  32. http://creative.mailchimp.com

  33. http://unmatchedstyle.com

  34. convergese.com, warchild.org, jenierteas.com, electricpulp.com

  35. http://developer.yahoo.com/ypatterns

  36. http://patterntap.com

  37. http://twitter.github.com/bootstrap

  38. https://github.com/adactio/Pattern-Primer (more info: adactio.com/journal/5028)

  39. https://github.com/adactio/Pattern-Primer (more info: adactio.com/journal/5028) “Start designing from the content out

    rather than the canvas in.” - Jeremy Keith
  40. Master Craftsman Illustration Source: André Jacob Roubo, L'Art du Menuisier

    Paris, 1769-74
  41. http://pea.rs

  42. http://pea.rs “A good craftsperson builds their own tools.” - Dan

    Cedarholm
  43. None
  44. What would MacGyver Do?

  45. None
  46. None
  47. http://flic.kr/p/bmNhqC

  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. 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
  55. http://sass-lang.com http://lesscss.org

  56. Anna Debenham’s Front end styleguides collection - http://gim.ie/fZyK

  57. Illustration Source: Carpentry for Boys by J. S. Zerbe, 3/72007

    - gutenberg.org/ebooks/20763 Love + Patterns + Tools Jason Beaird @jasongraphix