Design Hacks with Stencils & Patterns

Christian CrumlishCurator, 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

1. Establish a grid

2. Block in fixed page elements

3. Use “canned” stencils where possible

4. Mix with other stencil libraries

5. Draw only what you have to

FIVE MINUTES LATER…

1. Establish a grid

2. Block in fixed page elements

3. Use “canned” stencils where possible

4. Mix with other stencil libraries

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