Design Pattern Craftsmanship

  • Published on
    11-Aug-2014

  • View
    456

  • Download
    16

Embed Size (px)

DESCRIPTION

Slides from my presentation at Front-End Design Conference, 2014

Transcript

  • DESIGN PATTERN CRAFTSMANSHIPJason Beaird - @jasongraphix - July 12th, 2014
  • Image CC by Nic McPhee - https://flic.kr/p/4U4h9Q
  • 1620-1830 Post & Beam Framing 1830-1930 Balloon Framing 1930-Now Platform Framing
  • 1620-1830 Post & Beam Framing 1830-1930 Balloon Framing 1930-Now Platform Framing The traditional building paradigm is to gather all the parts of a building on site and then assemble them piece by piece. Refabricating Architecture
  • https://flic.kr/p/9v2Pgx
  • Master Craftsman Illustration Source: Andr Jacob Roubo, L'Art du Menuisier Paris, 1769-74
  • http://maban.co.uk/projects/front-end-style-guides/
  • DIFFERENT STROKES... Traditional Style Guide Editorial Guidelines Boilerplate or Bootstrap Pattern Library Page Templates or Theme
  • http://blog.mailchimp.com/new-mailchimp-is-here/
  • http://ux.mailchimp.com
  • 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
  • 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 le-manager // Shared Items nav localnav header // Sigh IE @media print { print } theone.less
  • http://theuxnewsletter.com
  • http://pea.rs A good craftsperson builds their own tools. - Dan Cedarholm
  • http://getbootstrap.com, http://patternlab.io, https://developers.google.com/web/starter-kit
  • Illustration Source: Carpentry for Boys by J. S. Zerbe, 3/72007 - gutenberg.org/ebooks/20763 Love + Patterns + Tools Jason Beaird @jasongraphix