Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
 
Design Hacks  with Stencils & Patterns Christian Crumlish Curator, Yahoo! Design Pattern Library
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><...
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 desig...
DESIGN STENCILS! http://developer.yahoo.com/ypatterns/wireframes/
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...
RAPID MOCKUP LAYOUT <ul><li>Establish a grid </li></ul><ul><li>Block in fixed page elements </li></ul><ul><li>Use “canned”...
FIVE MINUTES LATER… <ul><li>Establish a grid </li></ul><ul><li>Block in fixed page elements </li></ul><ul><li>Use “canned”...
STENCILS + PATTERNS + CODE (OH MY) <ul><li>Some of the stencils have links to ui patterns in the Yahoo! Design  Pattern Li...
FOR EXAMPLE, AUTOCOMPLETE
AUTOCOMPLETE PATTERN <ul><li>Tells  you  how  and  when  to  use  auto- complete: </li></ul>
AUTOCOMPLETE YUI CODE <ul><li>The difference between a mockup  and running code </li></ul>
BONUS! AUTOCOMPLETE ASTRA CODE <ul><li>(ASTRA is our Flash code library) </li></ul>
CHECK ’EM ALL OUT
THAT’S THE GIST OF IT <ul><li>If you want to know more about the Yahoo! Design Pattern Library, stick around. </li></ul><u...
ABOUT THE YAHOO! PATTERN LIBRARY <ul><li>Relationship to YUI </li></ul><ul><li>Upcoming: Yahoo component patterns </li></u...
PATTERNS ARE GUIDELINES <ul><li>YUI is running code </li></ul><ul><li>Patterns + Code (+Stencils) = powerful </li></ul><ul...
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
<ul><li>Enable  interop </li></ul><ul><ul><li>vs. antipattern: lock-in </li></ul></ul><ul><li>Open APIs </li></ul><ul><ul>...
<ul><li>Social Antipatterns  and </li></ul><ul><li>Antisocial Patterns </li></ul>… 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....
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 <ul><li>notification of rejection </li></ul><ul><li>unsubbing / delinking  </li></ul><ul><ul><li>or...
Thank You! <ul><li>Christian Crumlish </li></ul><ul><li>developer.yahoo.com/ypatterns </li></ul>
Nächste SlideShare
Wird geladen in …5
×

Design Hacks with Stencils & Patterns

8.787 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design, Technologie, Unterhaltung & Humor
  • Als Erste(r) kommentieren

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>

×