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 :(

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?

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

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

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!

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:

Tells you how and when to use auto- complete:

AUTOCOMPLETE YUI CODE The difference between a mockup and running code

The difference between a mockup and running code

BONUS! AUTOCOMPLETE ASTRA CODE (ASTRA is our Flash code library)

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

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

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.

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

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

Social Antipatterns and Antisocial Patterns … AND (TIME AND ATTENTION PERMITTING)

Social Antipatterns and

Antisocial Patterns

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”

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

Christian Crumlish

developer.yahoo.com/ypatterns