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

Transcript

1. DESIGN PATTERN CRAFTSMANSHIP Jason Beaird - February 29th, 2012
3. Hobbyist Illustration Source: Punch, or the London Charivari, Volume 93, October 15th 1887
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
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
26. “Seabreeze Shower” by Harold Newton, Date Unknown
27. “Untitled” by Mary Ann Carroll, 1968
28. “Afternoon Glow” by A.E. Backus, Date Unknown
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
44. What would MacGyver Do?
47. http://flic.kr/p/bmNhqC
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