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

Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
eeanqy
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 

Recently uploaded (20)

Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
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
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 

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