The document discusses the use of design stencils and patterns to improve UI mockups for web applications, emphasizing rapid prototyping without needing a UI designer. It highlights various resources from the Yahoo! design pattern library, including links to relevant coding examples and the benefits of utilizing established patterns in design. The speaker, Christian Crumlish, also covers topics such as social patterns, interoperability, and the importance of adhering to open standards.

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

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

29. Social Antipatterns and Antisocial Patterns … 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 notification of rejection unsubbing / delinking or caught by the re-follow relationship status changed to “it’s complicated”

35. Thank You! Christian Crumlish developer.yahoo.com/ypatterns