• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design Hacks with Stencils & Patterns
 

Design Hacks with Stencils & Patterns

on

  • 8,359 views

My talk at Yahoo!'s Open Hackday 2008, on working with stencils and patterns even if you don't have a designer handy (like if they're outside listening to Girl Talk).

My talk at Yahoo!'s Open Hackday 2008, on working with stencils and patterns even if you don't have a designer handy (like if they're outside listening to Girl Talk).

Statistics

Views

Total Views
8,359
Views on SlideShare
8,018
Embed Views
341

Actions

Likes
14
Downloads
95
Comments
0

12 Embeds 341

http://xianlandia.com 280
http://levidepoches.blogs.com 21
http://radiofreeblogistan.com 7
http://mediajunkie.com 6
http://x-pollen.com 5
http://www.slideshare.net 5
http://www.levidepoches.blogs.com 5
http://www.linkedin.com 4
http://www.xianlandia.com 4
http://www.levidepoches.fr 2
http://www.radiofreeblogistan.com 1
http://64.233.183.104 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design Hacks with Stencils & Patterns Design Hacks with Stencils & Patterns Presentation Transcript

  •  
  • Design Hacks with Stencils & Patterns Christian Crumlish Curator, Yahoo! Design Pattern Library
  • NO CODE SAMPLES SORRY
    • Great talks right next door!
    • I’d probably be in the Fire Eagle one!
    • or Xavier’s “building a Yahoo! app” one
    • or, dang… I’m missing Ian testifying about MyBlogLog :(
  • WE DON’T NEED NO STINKING UI DESIGNER?
    • You’re hacking. It’s late at night…
    • There are no ui designers around.
    • How do you prevent your website or app’s interface from looking like ass?
  • DESIGN STENCILS! http://developer.yahoo.com/ypatterns/wireframes/
  • WHAT’S A DESIGN STENCIL FOR?
    • Rapid mockup of UIs
    • Tied to YUI code where applicable
    • Tied to Design Patterns where possible
    • Allow me to demonstrate…
      • Example one: rapid mockup layout
      • Example two: autocomplete
        • Stencil
        • Pattern
        • Code
  • RAPID MOCKUP LAYOUT
    • Establish a grid
    • Block in fixed page elements
    • Use “canned” stencils where possible
    • Mix with other stencil libraries
    • Draw only what you have to
  • FIVE MINUTES LATER…
    • Establish a grid
    • Block in fixed page elements
    • Use “canned” stencils where possible
    • Mix with other stencil libraries
    • Draw only what you have to
  • STENCILS + PATTERNS + CODE (OH MY)
    • Some of the stencils have links to ui patterns in the Yahoo! Design Pattern Library ( http://developer.yahoo.com/ ypatterns )
    • Some of the stencils have links to the ui code in the Yahoo! User Interface Library ( http://developer.yahoo.com/ yui )
    • Some have both!
  • FOR EXAMPLE, AUTOCOMPLETE
  • AUTOCOMPLETE PATTERN
    • Tells you how and when to use auto- complete:
  • AUTOCOMPLETE YUI CODE
    • The difference between a mockup and running code
  • BONUS! AUTOCOMPLETE ASTRA CODE
    • (ASTRA is our Flash code library)
  • CHECK ’EM ALL OUT
  • THAT’S THE GIST OF IT
    • If you want to know more about the Yahoo! Design Pattern Library, stick around.
    • I’ll walk through a couple of different pattern types and explain how to use them.
  • ABOUT THE YAHOO! PATTERN LIBRARY
    • Relationship to YUI
    • Upcoming: Yahoo component patterns
    • Rich patterns (remember Bill Scott?)
    • Social patterns
    • Open patterns
  • PATTERNS ARE GUIDELINES
    • YUI is running code
    • Patterns + Code (+Stencils) = powerful
    • Patterns by themselves are just something to read (with examples) but can be used as a book of knowledge
    • Stencils let you refer to patterns in your mockups.
    • We try to match up patterns and YUI code whenever possible.
  • ONE Yahoo Components
  • Rich Interaction Patterns In which I attempt to impersonate Bill Scott
  • TRANSITIONS…
  • Social Patterns In which I attempt to impersonate Matt Leacock, Erin Malone, Christina Wodtke, Bryce Glass, and myself
  • REPUTATION…
  • VOTE TO PROMOTE
  • Buzz Pattern
  • User Card
  • “ Your,” vs. “My”
  • Open(ness) Patterns In which I attempt to impersonate Randy Farmer, Neal Sample, Matt Leacock, and myself
    • Enable interop
      • vs. antipattern: lock-in
    • Open APIs
      • expose your hooks
    • Honest broker
      • “ fire eagle” as example of ‘middlewhere’ ”
    • Provide utility
      • enable others to plug in
    • Build on existing practices
      • semantics and microformats, conventions such as rss, standards
    • Don’t try to own everything
    OPEN(NESS) PATTERNS
    • Social Antipatterns and
    • Antisocial Patterns
    … AND (TIME AND ATTENTION PERMITTING)
  • DON’T BREAK EMAIL! don’t: do:
  • natekoechley tweeted: @mediajunkie I hate that I need to spam my friends with adds/invites each time I join a new service. Painful bar to entry, often too tall.
  • Friends you may know / power-law
  • fimoculous tweeted: The “people you should know” list on Facebook is actually a list of people your hate.”
  • AUTO-FAUX-PAS PATTERNS
    • notification of rejection
    • unsubbing / delinking
      • or caught by the re-follow
    • relationship status changed to “it’s complicated”
  • Thank You!
    • Christian Crumlish
    • developer.yahoo.com/ypatterns