Design Hacks with Stencils & Patterns

7,339 views
6,971 views

Published on

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).

0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,339
On SlideShare
0
From Embeds
0
Number of Embeds
360
Actions
Shares
0
Downloads
97
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide
  • Design Hacks with Stencils & Patterns

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

    ×