SlideShare a Scribd company logo
1 of 35
Download to read offline
 
Design Hacks  with Stencils & Patterns Christian Crumlish Curator, Yahoo! Design Pattern Library
NO CODE SAMPLES SORRY ,[object Object],[object Object],[object Object],[object Object]
WE DON’T NEED NO STINKING UI DESIGNER? ,[object Object],[object Object],[object Object]
DESIGN STENCILS! http://developer.yahoo.com/ypatterns/wireframes/
WHAT’S A DESIGN STENCIL FOR? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
RAPID MOCKUP LAYOUT ,[object Object],[object Object],[object Object],[object Object],[object Object]
FIVE MINUTES LATER… ,[object Object],[object Object],[object Object],[object Object],[object Object]
STENCILS + PATTERNS + CODE (OH MY) ,[object Object],[object Object],[object Object]
FOR EXAMPLE, AUTOCOMPLETE
AUTOCOMPLETE PATTERN ,[object Object]
AUTOCOMPLETE YUI CODE ,[object Object]
BONUS! AUTOCOMPLETE ASTRA CODE ,[object Object]
CHECK ’EM ALL OUT
THAT’S THE GIST OF IT ,[object Object],[object Object]
ABOUT THE YAHOO! PATTERN LIBRARY ,[object Object],[object Object],[object Object],[object Object],[object Object]
PATTERNS ARE GUIDELINES ,[object Object],[object Object],[object Object],[object Object],[object Object]
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
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],OPEN(NESS) PATTERNS
[object Object],[object Object],… 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 ,[object Object],[object Object],[object Object],[object Object]
Thank You! ,[object Object],[object Object]

More Related Content

Similar to Design Hacks with Stencils & Patterns

Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & CodeMolly Wilson
 
Stand Out Online and Land an Interview
Stand Out Online and Land an InterviewStand Out Online and Land an Interview
Stand Out Online and Land an InterviewHeather Steele
 
Declare social media 101 oh amanda
Declare social media 101 oh amandaDeclare social media 101 oh amanda
Declare social media 101 oh amandaAmanda White
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignCheryl Platz
 
Eating Disorder Analysis
Eating Disorder AnalysisEating Disorder Analysis
Eating Disorder AnalysisLaura Johnson
 
Social Media in the Real World
Social Media in the Real WorldSocial Media in the Real World
Social Media in the Real Worldmastermaq
 
Alice Phieu - UI/UX For Developers
Alice Phieu - UI/UX  For DevelopersAlice Phieu - UI/UX  For Developers
Alice Phieu - UI/UX For DevelopersAlice Phieu
 
Maxine Clarke's slides SciBlog2008
Maxine Clarke's slides SciBlog2008Maxine Clarke's slides SciBlog2008
Maxine Clarke's slides SciBlog2008Anna Kushnir
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature CreatureChristian Heilmann
 
Using Media and Other Personalized Communication to Advance Community Design
Using Media and Other Personalized Communication to Advance Community DesignUsing Media and Other Personalized Communication to Advance Community Design
Using Media and Other Personalized Communication to Advance Community DesignKristen Jeffers
 
Intel Brief
Intel BriefIntel Brief
Intel BriefKate
 
Social media welcome2
Social media welcome2Social media welcome2
Social media welcome2Dawn James
 

Similar to Design Hacks with Stencils & Patterns (20)

Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & Code
 
Module 07: Wireframes
Module 07: WireframesModule 07: Wireframes
Module 07: Wireframes
 
Stand Out Online and Land an Interview
Stand Out Online and Land an InterviewStand Out Online and Land an Interview
Stand Out Online and Land an Interview
 
Declare social media 101 oh amanda
Declare social media 101 oh amandaDeclare social media 101 oh amanda
Declare social media 101 oh amanda
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
 
Eating Disorder Analysis
Eating Disorder AnalysisEating Disorder Analysis
Eating Disorder Analysis
 
Hacking For Innovation
Hacking For InnovationHacking For Innovation
Hacking For Innovation
 
Social Media in the Real World
Social Media in the Real WorldSocial Media in the Real World
Social Media in the Real World
 
Alice Phieu - UI/UX For Developers
Alice Phieu - UI/UX  For DevelopersAlice Phieu - UI/UX  For Developers
Alice Phieu - UI/UX For Developers
 
Maxine Clarke's slides SciBlog2008
Maxine Clarke's slides SciBlog2008Maxine Clarke's slides SciBlog2008
Maxine Clarke's slides SciBlog2008
 
23 Things
23 Things23 Things
23 Things
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
 
Using Media and Other Personalized Communication to Advance Community Design
Using Media and Other Personalized Communication to Advance Community DesignUsing Media and Other Personalized Communication to Advance Community Design
Using Media and Other Personalized Communication to Advance Community Design
 
Intel Brief
Intel BriefIntel Brief
Intel Brief
 
IT Workshop
IT WorkshopIT Workshop
IT Workshop
 
Get your hands dirty with Social Software
Get your hands dirty with Social SoftwareGet your hands dirty with Social Software
Get your hands dirty with Social Software
 
Class19 Online
Class19 OnlineClass19 Online
Class19 Online
 
Class19 Online
Class19 OnlineClass19 Online
Class19 Online
 
Social Networking Tools for Novices
Social Networking Tools for NovicesSocial Networking Tools for Novices
Social Networking Tools for Novices
 
Social media welcome2
Social media welcome2Social media welcome2
Social media welcome2
 

More from Christian Crumlish

Designing Social Interfaces - IxDA LA meetup, July 10, 2013
Designing Social Interfaces - IxDA LA meetup, July 10, 2013Designing Social Interfaces - IxDA LA meetup, July 10, 2013
Designing Social Interfaces - IxDA LA meetup, July 10, 2013Christian Crumlish
 
Designing for Play (at Web Directions @media)
Designing for Play (at Web Directions @media)Designing for Play (at Web Directions @media)
Designing for Play (at Web Directions @media)Christian Crumlish
 
Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010Christian Crumlish
 
Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010Christian Crumlish
 
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)Christian Crumlish
 
Yahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design PatternsYahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design PatternsChristian Crumlish
 
Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009Christian Crumlish
 
Ukulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic ScalesUkulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic ScalesChristian Crumlish
 
Social Design For Patternistas
Social Design For PatternistasSocial Design For Patternistas
Social Design For PatternistasChristian Crumlish
 
Designing with patterns in the real world
Designing with patterns in the real worldDesigning with patterns in the real world
Designing with patterns in the real worldChristian Crumlish
 
Presence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecturePresence, identity, and attention in social web architecture
Presence, identity, and attention in social web architectureChristian Crumlish
 
Social Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern LibrarySocial Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern LibraryChristian Crumlish
 
Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Christian Crumlish
 

More from Christian Crumlish (20)

Designing Social Interfaces - IxDA LA meetup, July 10, 2013
Designing Social Interfaces - IxDA LA meetup, July 10, 2013Designing Social Interfaces - IxDA LA meetup, July 10, 2013
Designing Social Interfaces - IxDA LA meetup, July 10, 2013
 
Product is Big IA
Product is Big IAProduct is Big IA
Product is Big IA
 
Playful design-uxlx-2011
Playful design-uxlx-2011Playful design-uxlx-2011
Playful design-uxlx-2011
 
We are all Leonardo now
We are all Leonardo nowWe are all Leonardo now
We are all Leonardo now
 
Designing for Play (at Web Directions @media)
Designing for Play (at Web Directions @media)Designing for Play (at Web Directions @media)
Designing for Play (at Web Directions @media)
 
Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010Designing for Play at WebVisions 2010
Designing for Play at WebVisions 2010
 
Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010Designing for Play at Web 2.0. Expo SF 2010
Designing for Play at Web 2.0. Expo SF 2010
 
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
Ukulele For Geeks: Secrets of the Pentatonic Scales (sxsw 2010)
 
Yahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design PatternsYahoo! Pattern Library & Social Design Patterns
Yahoo! Pattern Library & Social Design Patterns
 
Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009Designing Social Interfaces at Web Directions South 2009
Designing Social Interfaces at Web Directions South 2009
 
Ukulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic ScalesUkulele For Geeks: Secrets of the Pentatonic Scales
Ukulele For Geeks: Secrets of the Pentatonic Scales
 
Social Design For Patternistas
Social Design For PatternistasSocial Design For Patternistas
Social Design For Patternistas
 
Designing with patterns in the real world
Designing with patterns in the real worldDesigning with patterns in the real world
Designing with patterns in the real world
 
Presence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecturePresence, identity, and attention in social web architecture
Presence, identity, and attention in social web architecture
 
Grasping Social Patterns
Grasping Social PatternsGrasping Social Patterns
Grasping Social Patterns
 
Social Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern LibrarySocial Design and the Yahoo! Pattern Library
Social Design and the Yahoo! Pattern Library
 
State of the Patterns 2008
State of the Patterns 2008State of the Patterns 2008
State of the Patterns 2008
 
Heads In Space
Heads In SpaceHeads In Space
Heads In Space
 
Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)Social Media Design Patterns (BarCampBlock)
Social Media Design Patterns (BarCampBlock)
 
Failure *Is* an Option
Failure *Is* an OptionFailure *Is* an Option
Failure *Is* an Option
 

Recently uploaded

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 

Recently uploaded (19)

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 

Design Hacks with Stencils & Patterns