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

Wireframes, User Interfaces, and User Experience

  • 1.
    WIREFRAMES, UI, ANDUX 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 andPrototypes - Quickly drawn up - Quickly torn up - Completely portable http://www.flickr.com/photos/collylogic/4970484077/ Thursday, March 31, 2011
  • 4.
    Digital wireframes canbe low fidelity… Thursday, March 31, 2011
  • 5.
    Or high fidelitywith 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
  • 8.
  • 9.
  • 10.
    UI patterns helpmake your sites instantly usable Thursday, March 31, 2011
  • 11.
    Learn more aboutUI 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
  • 15.
  • 16.
  • 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