advertisement

Design Hacks with Stencils & Patterns

71 %
29 %
advertisement
Information about Design Hacks with Stencils & Patterns
Design

Published on September 13, 2008

Author: xian

Source: slideshare.net

Description

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

 

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

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Stencils, Stencil patterns, wall pattern stencil kits ...

New Stencil Designs! Featured Stencils. Moroccan Stencils. Geometric / Allover ... Cutting Edge Stencils is delighted to introduce Wall Pattern Stencil Kits!
Read more

Wall Stencils, Stencil designs, Stencil Patterns by ...

Large collection of reusable decorative stencil designs and patterns, stencils for DIY decor. Illustrated stenciling tips from professional faux finishers.
Read more

Wall Stencils for Painting - Trendy & Classic Stencils for ...

Wall Stencils for painting are a great ... Our Palmedo Prairie Song Wall Stencil features a graphic geometric stencil pattern with a Western design, ...
Read more

Wall Stencils, Popular Designer Stencils for DIY Home ...

We offer exclusive stencil designs, including our popular Moroccan Wall Stencils, ... geometric stencil pattern that can be used for both modern or retro ...
Read more

Trendy Stencils Wall Stencil Patterns for by ...

Trendy Stencils - Wall Stencil Patterns for DIY decor ... We design and hand-assemble our stencils in New Jersey, ... Featured items from CuttingEdgeStencils
Read more

How to: Stencil on Pinterest | Design Studios, Stencil and ...

How to stencil tips, ... IKEA Stencil Hack How to Stencil a Vittsjo Table. ... Geometric Pattern | Royal Design Studio =How to stencil a recessed panel ...
Read more

Royal Design Studio Stencils on Pinterest

Royal Design Studio Stencils | Extraordinary Stencils for Inspired Home Decor. ... Pattern and MORE Pattern Royal Design Studio Stencils 4,733 Follow ...
Read more

33,686 Wall Stencils - Houzz - Home Design, Decorating and ...

Browse a large selection of wall stencil patterns on Houzz, including large wall stencils for painting, Moroccan stencils and damask stencil designs.
Read more

Designer Stencils- Over 3000 stencil designs for wall and ...

Designer Stencils has been designing and manufacturing Home ... All Over Wall Stencil Designs; ... We have created stencil patterns from wedding ...
Read more