Design Hacks with Stencils & Patterns

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    10 Favorites

    Design Hacks with Stencils & Patterns - Presentation Transcript

    1.  
    2. Design Hacks with Stencils & Patterns Christian Crumlish Curator, Yahoo! Design Pattern Library
    3. 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 :(
    4. 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?
    5. DESIGN STENCILS! http://developer.yahoo.com/ypatterns/wireframes/
    6. 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
    7. 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
    8. 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
    9. 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!
    10. FOR EXAMPLE, AUTOCOMPLETE
    11. AUTOCOMPLETE PATTERN
      • Tells you how and when to use auto- complete:
    12. AUTOCOMPLETE YUI CODE
      • The difference between a mockup and running code
    13. BONUS! AUTOCOMPLETE ASTRA CODE
      • (ASTRA is our Flash code library)
    14. CHECK ’EM ALL OUT
    15. 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.
    16. ABOUT THE YAHOO! PATTERN LIBRARY
      • Relationship to YUI
      • Upcoming: Yahoo component patterns
      • Rich patterns (remember Bill Scott?)
      • Social patterns
      • Open patterns
    17. 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.
    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
      • 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)
    28. DON’T BREAK EMAIL! don’t: do:
    29. 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.
    30. Friends you may know / power-law
    31. fimoculous tweeted: The “people you should know” list on Facebook is actually a list of people your hate.”
    32. AUTO-FAUX-PAS PATTERNS
      • notification of rejection
      • unsubbing / delinking
        • or caught by the re-follow
      • relationship status changed to “it’s complicated”
    33. Thank You!
      • Christian Crumlish
      • developer.yahoo.com/ypatterns

    + Christian CrumlishChristian Crumlish, 2 years ago

    custom

    3525 views, 10 favs, 7 embeds more stats

    My talk at Yahoo!'s Open Hackday 2008, on working w more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 3525
      • 3385 on SlideShare
      • 140 from embeds
    • Comments 0
    • Favorites 10
    • Downloads 65
    Most viewed embeds
    • 122 views on http://xianlandia.com
    • 7 views on http://radiofreeblogistan.com
    • 5 views on http://x-pollen.com
    • 2 views on http://mediajunkie.com
    • 2 views on http://www.xianlandia.com

    more

    All embeds
    • 122 views on http://xianlandia.com
    • 7 views on http://radiofreeblogistan.com
    • 5 views on http://x-pollen.com
    • 2 views on http://mediajunkie.com
    • 2 views on http://www.xianlandia.com
    • 1 views on http://www.radiofreeblogistan.com
    • 1 views on http://64.233.183.104

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories