SlideShare a Scribd company logo
1 of 20
WIREFRAMES, UI, AND UX
                           Get out of your clients’ heads, and into your users’


                                       By Patrick Harrington
                              Senior UX Analyst at Velir (www.velir.com)



                                             @MildlyGeeky




Thursday, March 31, 2011
Wireframes
                                      Text

        The only time it is OK to use Comic Sans.




                             What are they?

Thursday, March 31, 2011
Paper Sketches and Prototypes

                              - Quickly drawn up
                              - Quickly torn up
                              - Completely portable




                                            http://www.flickr.com/photos/collylogic/4970484077/
Thursday, March 31, 2011
Digital wireframes can be low fidelity…




Thursday, March 31, 2011
Or high fidelity with detailed UI…




Thursday, March 31, 2011
Learn to wireframe
                           - www.boxesandarrows.com
                           - www.konigi.com
                           - www.wireframeshowcase.com
                           - wireframes.linowski.ca
                           - OmniGraffle for Mac OS X
                           - Axure for Windows and Mac OS X
                           - Balsamiq, iPlotz, and FlairBuilder

Thursday, March 31, 2011
The importance of
                           User Interface (UI) Design




Thursday, March 31, 2011
Bad User Interfaces




Thursday, March 31, 2011
Beautiful User Interfaces




Thursday, March 31, 2011
UI patterns help make
                      your sites instantly usable




Thursday, March 31, 2011
Learn more about UI best
             practices and design patterns
                           - developer.yahoo.com/ypatterns
                           - ui-patterns.com
                           - patterntap.com
                           - dribbble.com
                           - www.useit.com (general usability)
                           - Don’t Make Me Think by Steve Krug

Thursday, March 31, 2011
UX
          User experience cannot be designed;
             we can only hope to affect it.




Thursday, March 31, 2011
User Experience
             - What do you think this page is trying to get
                   its users to accomplish/feel/do?
             - What does the client say they want this
                   page to accomplish/feel/do?




Thursday, March 31, 2011
User Experience
             - Get into the soft and fuzzy side
             - How does the site make someone feel? Do
                   they feel like the site was designed just for
                   them?
             - Do they want to tell their friends about your
                   site?
             - To find this out, we need to get to know who
                   our users are
Thursday, March 31, 2011
User Experience




Thursday, March 31, 2011
User Experience




Thursday, March 31, 2011
User Experience




                              Palm Pre commercial
Thursday, March 31, 2011
User Experience




                              Droid commercial
Thursday, March 31, 2011
User Experience




                              iPhone 4 commercial
Thursday, March 31, 2011
THANK YOU!

                             Questions?
                           Your experience?

                                     By Patrick Harrington
                            Senior UX Analyst at Velir (www.velir.com)




                                         @MildlyGeeky


Thursday, March 31, 2011

More Related Content

Viewers also liked (12)

Компьютертэй багшийн судалгаа
Компьютертэй багшийн судалгааКомпьютертэй багшийн судалгаа
Компьютертэй багшийн судалгаа
 
Test
TestTest
Test
 
б лхагвасүрэн1
б лхагвасүрэн1б лхагвасүрэн1
б лхагвасүрэн1
 
Intro to Wireframing
Intro to WireframingIntro to Wireframing
Intro to Wireframing
 
өгүүлбэр зүй
өгүүлбэр зүйөгүүлбэр зүй
өгүүлбэр зүй
 
Automating reports with ssrs subscriptions
Automating reports with ssrs subscriptionsAutomating reports with ssrs subscriptions
Automating reports with ssrs subscriptions
 
Group Buying White Paper
Group Buying White PaperGroup Buying White Paper
Group Buying White Paper
 
б лхагвасүрэн1
б лхагвасүрэн1б лхагвасүрэн1
б лхагвасүрэн1
 
ReachOut! Visual Guide
ReachOut! Visual GuideReachOut! Visual Guide
ReachOut! Visual Guide
 
7 r angi
7 r angi7 r angi
7 r angi
 
Eh hel ba dayarshil
Eh hel ba dayarshilEh hel ba dayarshil
Eh hel ba dayarshil
 
Acute Abdomen Ppt
Acute Abdomen PptAcute Abdomen Ppt
Acute Abdomen Ppt
 

Similar to Wireframes, User Interfaces, and User Experience

Wibiya founders at The Junction
Wibiya founders at The JunctionWibiya founders at The Junction
Wibiya founders at The Junction
Daniel Tal
 
Peter Dalsgaard, information visualization, Headstart Morgenseminar 31.3.2011
Peter Dalsgaard, information visualization, Headstart Morgenseminar 31.3.2011Peter Dalsgaard, information visualization, Headstart Morgenseminar 31.3.2011
Peter Dalsgaard, information visualization, Headstart Morgenseminar 31.3.2011
Seismonaut
 
TAG Recruiting Atlanta - 3 Phases of Mobile Recruiting Strategy
TAG Recruiting Atlanta - 3 Phases of Mobile Recruiting StrategyTAG Recruiting Atlanta - 3 Phases of Mobile Recruiting Strategy
TAG Recruiting Atlanta - 3 Phases of Mobile Recruiting Strategy
Kane Cochran
 

Similar to Wireframes, User Interfaces, and User Experience (20)

JavaScript Secrets
JavaScript SecretsJavaScript Secrets
JavaScript Secrets
 
Wibiya founders at The Junction
Wibiya founders at The JunctionWibiya founders at The Junction
Wibiya founders at The Junction
 
Android Apps Success and Store trend
Android Apps Success and Store trendAndroid Apps Success and Store trend
Android Apps Success and Store trend
 
web标准化交流会上海站bobby分享
web标准化交流会上海站bobby分享web标准化交流会上海站bobby分享
web标准化交流会上海站bobby分享
 
web标准化交流会bobby分享
web标准化交流会bobby分享web标准化交流会bobby分享
web标准化交流会bobby分享
 
Unleashing the creativity within your students
Unleashing the creativity within your studentsUnleashing the creativity within your students
Unleashing the creativity within your students
 
Web 2.0 and Rich Internet Applications
Web 2.0 and Rich Internet ApplicationsWeb 2.0 and Rich Internet Applications
Web 2.0 and Rich Internet Applications
 
Big Social Broadband: Life after second bubble
Big Social Broadband: Life after second bubbleBig Social Broadband: Life after second bubble
Big Social Broadband: Life after second bubble
 
Building an SSO platform in PHP (Zend Webinar Edition)
Building an SSO platform in PHP (Zend Webinar Edition)Building an SSO platform in PHP (Zend Webinar Edition)
Building an SSO platform in PHP (Zend Webinar Edition)
 
Garland Group - Top Security Threats of 2011
Garland Group - Top Security Threats of 2011Garland Group - Top Security Threats of 2011
Garland Group - Top Security Threats of 2011
 
Digital slime trails & personal security
Digital slime trails & personal securityDigital slime trails & personal security
Digital slime trails & personal security
 
Art and Science of Social Media | Wendy Soucie - Social Media Strategist
 Art and Science of Social Media | Wendy Soucie - Social Media Strategist Art and Science of Social Media | Wendy Soucie - Social Media Strategist
Art and Science of Social Media | Wendy Soucie - Social Media Strategist
 
Peter Dalsgaard, information visualization, Headstart Morgenseminar 31.3.2011
Peter Dalsgaard, information visualization, Headstart Morgenseminar 31.3.2011Peter Dalsgaard, information visualization, Headstart Morgenseminar 31.3.2011
Peter Dalsgaard, information visualization, Headstart Morgenseminar 31.3.2011
 
Information Visualization
Information VisualizationInformation Visualization
Information Visualization
 
3rd space architecture learning in 3D
3rd space architecture learning in 3D3rd space architecture learning in 3D
3rd space architecture learning in 3D
 
IAT334-Lec04-DesignIdeasPrinciples.pptx
IAT334-Lec04-DesignIdeasPrinciples.pptxIAT334-Lec04-DesignIdeasPrinciples.pptx
IAT334-Lec04-DesignIdeasPrinciples.pptx
 
Posscon2011
Posscon2011Posscon2011
Posscon2011
 
SXSW 2011
SXSW 2011SXSW 2011
SXSW 2011
 
TAG Recruiting Atlanta - 3 Phases of Mobile Recruiting Strategy
TAG Recruiting Atlanta - 3 Phases of Mobile Recruiting StrategyTAG Recruiting Atlanta - 3 Phases of Mobile Recruiting Strategy
TAG Recruiting Atlanta - 3 Phases of Mobile Recruiting Strategy
 
Leon Barrett presentation
Leon Barrett presentationLeon Barrett presentation
Leon Barrett presentation
 

Recently uploaded

call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
amitlee9823
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
amitlee9823
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
amitlee9823
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
amitlee9823
 
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
gajnagarg
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
amitlee9823
 

Recently uploaded (20)

Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 
8377087607, Door Step Call Girls In Majnu Ka Tilla (Delhi) 24/7 Available
8377087607, Door Step Call Girls In Majnu Ka Tilla (Delhi) 24/7 Available8377087607, Door Step Call Girls In Majnu Ka Tilla (Delhi) 24/7 Available
8377087607, Door Step Call Girls In Majnu Ka Tilla (Delhi) 24/7 Available
 
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
 

Wireframes, User Interfaces, and User Experience

  • 1. WIREFRAMES, UI, AND UX Get out of your clients’ heads, and into your users’ By Patrick Harrington Senior UX Analyst at Velir (www.velir.com) @MildlyGeeky Thursday, March 31, 2011
  • 2. Wireframes Text The only time it is OK to use Comic Sans. What are they? Thursday, March 31, 2011
  • 3. Paper Sketches and Prototypes - Quickly drawn up - Quickly torn up - Completely portable http://www.flickr.com/photos/collylogic/4970484077/ Thursday, March 31, 2011
  • 4. Digital wireframes can be low fidelity… Thursday, March 31, 2011
  • 5. Or high fidelity with detailed UI… Thursday, March 31, 2011
  • 6. Learn to wireframe - www.boxesandarrows.com - www.konigi.com - www.wireframeshowcase.com - wireframes.linowski.ca - OmniGraffle for Mac OS X - Axure for Windows and Mac OS X - Balsamiq, iPlotz, and FlairBuilder Thursday, March 31, 2011
  • 7. The importance of User Interface (UI) Design Thursday, March 31, 2011
  • 10. UI patterns help make your sites instantly usable Thursday, March 31, 2011
  • 11. Learn more about UI best practices and design patterns - developer.yahoo.com/ypatterns - ui-patterns.com - patterntap.com - dribbble.com - www.useit.com (general usability) - Don’t Make Me Think by Steve Krug Thursday, March 31, 2011
  • 12. UX User experience cannot be designed; we can only hope to affect it. Thursday, March 31, 2011
  • 13. User Experience - What do you think this page is trying to get its users to accomplish/feel/do? - What does the client say they want this page to accomplish/feel/do? Thursday, March 31, 2011
  • 14. User Experience - Get into the soft and fuzzy side - How does the site make someone feel? Do they feel like the site was designed just for them? - Do they want to tell their friends about your site? - To find this out, we need to get to know who our users are Thursday, March 31, 2011
  • 17. User Experience Palm Pre commercial Thursday, March 31, 2011
  • 18. User Experience Droid commercial Thursday, March 31, 2011
  • 19. User Experience iPhone 4 commercial Thursday, March 31, 2011
  • 20. THANK YOU! Questions? Your experience? By Patrick Harrington Senior UX Analyst at Velir (www.velir.com) @MildlyGeeky Thursday, March 31, 2011