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

Jason Beaird

March 02, 2012
Tweet

Other Decks in Design

Transcript

  1. 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...
  2. 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
  3. BUT OF COURSE YOU ALREADY... •Love Web Standards •Write Semantic

    Code •Separate Style/Content/Behavior •Experiment with New Technologies •Constantly Hunting for Design Inspiration
  4. 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
  5. Illustration Source: Carpentry for Boys by J. S. Zerbe, 3/72007

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