Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Presented by
Alec Harrison
UX & WIREFRAMES
KNOW YOUR WEAPON OF CHOICE
@
1Monday, September 30, 13
WHAT IS IT?
2Monday, September 30, 13
A visual guide that
represents layout
and function.
Purpose: focus on usability
and user experience.
WIREFRAME
3Monday, Se...
BLUEPRINT
4Monday, September 30, 13
WHEN TO USE IT?
5Monday, September 30, 13
THE PROCESS
6Monday, September 30, 13
THE PROCESS
SKETCH/IDEA
User Personas
User Journeys/Flows
Planning
6Monday, September 30, 13
THE PROCESS
WIREFRAMES
Blueprints
SKETCH/IDEA
User Personas
User Journeys/Flows
Planning
6Monday, September 30, 13
THE PROCESS
WIREFRAMES
Blueprints
SKETCH/IDEA
User Personas
User Journeys/Flows
Planning
DESIGN
PROTOTYPE
DEVELOPMENT
Cons...
http://helsinkidesignlab.org/?offset=30 Lance Cassidy
1. SKETCH/IDEA
7Monday, September 30, 13
2. WIREFRAME
8Monday, September 30, 13
Prototype
3. DESIGN & OTHER STEPS
Design Developed/Finished Product
9Monday, September 30, 13
WHY DO IT?
10Monday, September 30, 13
COMMUNICATE
11Monday, September 30, 13
COPYWRITER
“What will I need to write?”
COMMUNICATE
11Monday, September 30, 13
COPYWRITER
“What will I need to write?”
DEVELOPER
“What functionality will I need to
implement?”
COMMUNICATE
11Monday, Sep...
COPYWRITER
“What will I need to write?”
STAKEHOLDER
“How is this meeting our business
goals?”
DEVELOPER
“What functionalit...
COPYWRITER
“What will I need to write?”
STAKEHOLDER
“How is this meeting our business
goals?”
VISUAL DESIGNER
“What visual...
COPYWRITER
“What will I need to write?”
STAKEHOLDER
“How is this meeting our business
goals?”
VISUAL DESIGNER
“What visual...
COPYWRITER
“What will I need to write?”
STAKEHOLDER
“How is this meeting our business
goals?”
VISUAL DESIGNER
“What visual...
VALIDATE
DEVELOP A GREAT USER
EXPERIENCE
Do we really need all of this?
Are we missing anything?
We didn’t even think of t...
SAVE TIME AND COSTS
13Monday, September 30, 13
SAVE TIME AND COSTS
FLEXIBLE
Make changes early on
13Monday, September 30, 13
VALUABLE
Rethink approach on a more
strategic level, without the
development costs
SAVE TIME AND COSTS
FLEXIBLE
Make chang...
TYPES
14Monday, September 30, 13
WIREFRAME (LOW-FIDELITY)
Jonathan Shariat
Eddie Lobanovskiy
15Monday, September 30, 13
WIREFRAME (HIGH-FIDELITY)
16Monday, September 30, 13
WIREFRAME (HIGH-FIDELITY & ANNOTATED)
17Monday, September 30, 13
SETUP
18Monday, September 30, 13
DECIDE ON A TOOL
19Monday, September 30, 13
SETUP
20Monday, September 30, 13
SETUP
Start With A Grid and/or Device
Choose a proper layout size for the
targeted device. If responsive start with
either...
INCLUDE...
21Monday, September 30, 13
INCLUDE...
The structure of the page or screen
i.e. navigation & content areas
1
21Monday, September 30, 13
INCLUDE...
The structure of the page or screen
i.e. navigation & content areas
1
Layout and hierarchy of content
Will it g...
INCLUDE...
The structure of the page or screen
i.e. navigation & content areas
1
User Interface Elements
i.e. forms, butto...
INCLUDE...
The structure of the page or screen
i.e. navigation & content areas
1
User Interface Elements
i.e. forms, butto...
AVOID...
22Monday, September 30, 13
AVOID...
Too many colors/textures
Over designing can be distracting and
shift the focus of the conversation
1
22Monday, Se...
AVOID...
Actual Images
This can be distracting and shift the
focus of the conversation
2
Too many colors/textures
Over des...
AVOID...
Actual Images
This can be distracting and shift the
focus of the conversation
2
Made-up copy
Use placement copy i...
AVOID...
Actual Images
This can be distracting and shift the
focus of the conversation
2
Made-up copy
Use placement copy i...
Purpose: Create a public-facing marketing website
to showcase the new web app.
One-page site
Needs to be scalable for futu...
SKETCH THE UX
24Monday, September 30, 13
Who will see the wireframe?
What platform am I designing for?
WIREFRAME SETUP
25Monday, September 30, 13
WIREFRAME (HIGH-FIDELITY)
26Monday, September 30, 13
WIREFRAME (HIGH-FIDELITY)
26Monday, September 30, 13
DESIGN
27Monday, September 30, 13
Create wireframes (2-3 states) for a new iPad
application that allows users to customize and try on
sunglasses
low or high...
WEB TOOLS
29Monday, September 30, 13
WHAT TO LOOK FOR
30Monday, September 30, 13
WHAT TO LOOK FOR
CREATE ORIGINAL WORK in a robust and flexible
environment
Create/import custom shapes and elements in
diff...
WHAT TO LOOK FOR
CREATE ORIGINAL WORK in a robust and flexible
environment
Create/import custom shapes and elements in
diff...
WHAT TO LOOK FOR
CREATE ORIGINAL WORK in a robust and flexible
environment
Create/import custom shapes and elements in
diff...
WHAT TO LOOK FOR
CREATE ORIGINAL WORK in a robust and flexible
environment
Create/import custom shapes and elements in
diff...
BEGINNER
Wireframe.cc
$40/month for 3 users
https://wireframe.cc/
31Monday, September 30, 13
BEGINNER
Wireframe.cc
$40/month for 3 users
https://wireframe.cc/
Simple and minimal UI
Easy to find things and learn
1
31...
BEGINNER
Wireframe.cc
$40/month for 3 users
https://wireframe.cc/
Custom Grids
dots, lines, size
2
Simple and minimal UI
E...
BEGINNER
Wireframe.cc
$40/month for 3 users
https://wireframe.cc/
Custom Grids
dots, lines, size
2
Guided Gray Scale
Helpi...
INTERMEDIATE
UXPIN
$14.99/month (per user)
http://uxpin.com/
32Monday, September 30, 13
INTERMEDIATE
UXPIN
$14.99/month (per user)
http://uxpin.com/
Intuitive UI for complex features
i.e. search and drag & drop...
INTERMEDIATE
UXPIN
$14.99/month (per user)
http://uxpin.com/
Considers Responsive Setting
i.e. forms, buttons, and charts
...
INTERMEDIATE
UXPIN
$14.99/month (per user)
http://uxpin.com/
Considers Responsive Setting
i.e. forms, buttons, and charts
...
ADVANCED
Adobe Fireworks
$50/month (comes with all other
programs such as Photoshop)
https://creative.adobe.com/join/pro
3...
ADVANCED
Adobe Fireworks
$50/month (comes with all other
programs such as Photoshop)
https://creative.adobe.com/join/pro
E...
ADVANCED
Adobe Fireworks
$50/month (comes with all other
programs such as Photoshop)
https://creative.adobe.com/join/pro
M...
ADVANCED
Adobe Fireworks
$50/month (comes with all other
programs such as Photoshop)
https://creative.adobe.com/join/pro
M...
ADDITIONAL RESOURCES
10 Cloud-Based UX Design Tools
to try in 2013
http://www.awwwards.com/10-cloud-
based-ux-design-tools...
QUESTIONS?
35Monday, September 30, 13
@
THANK YOU
36Monday, September 30, 13
Upcoming SlideShare
Loading in …5
×

UX & Wireframes Know Your Weapon of Choice

1,713 views

Published on

Whether you're a developer or not, you can absolutely still help build your own site. In fact, it's important that you do. Anticipating how your audience will interact with your site -- navigating, consuming, purchasing, sharing -- and structuring it to make it easier for them to do the things that matter most (to them and to you) is major.

Alec Harrison is the founder of Audacious Design, a design studio, and also works as a senior UI designer for Fresh Tilled Soil. He is passionate about data, data visualization, and technology. He specializes in creating intuitive UX/UI designs for many types of industries and products across mobile, tablet & web platforms

Published in: Technology, News & Politics
  • Be the first to comment

UX & Wireframes Know Your Weapon of Choice

  1. 1. Presented by Alec Harrison UX & WIREFRAMES KNOW YOUR WEAPON OF CHOICE @ 1Monday, September 30, 13
  2. 2. WHAT IS IT? 2Monday, September 30, 13
  3. 3. A visual guide that represents layout and function. Purpose: focus on usability and user experience. WIREFRAME 3Monday, September 30, 13
  4. 4. BLUEPRINT 4Monday, September 30, 13
  5. 5. WHEN TO USE IT? 5Monday, September 30, 13
  6. 6. THE PROCESS 6Monday, September 30, 13
  7. 7. THE PROCESS SKETCH/IDEA User Personas User Journeys/Flows Planning 6Monday, September 30, 13
  8. 8. THE PROCESS WIREFRAMES Blueprints SKETCH/IDEA User Personas User Journeys/Flows Planning 6Monday, September 30, 13
  9. 9. THE PROCESS WIREFRAMES Blueprints SKETCH/IDEA User Personas User Journeys/Flows Planning DESIGN PROTOTYPE DEVELOPMENT Construction 6Monday, September 30, 13
  10. 10. http://helsinkidesignlab.org/?offset=30 Lance Cassidy 1. SKETCH/IDEA 7Monday, September 30, 13
  11. 11. 2. WIREFRAME 8Monday, September 30, 13
  12. 12. Prototype 3. DESIGN & OTHER STEPS Design Developed/Finished Product 9Monday, September 30, 13
  13. 13. WHY DO IT? 10Monday, September 30, 13
  14. 14. COMMUNICATE 11Monday, September 30, 13
  15. 15. COPYWRITER “What will I need to write?” COMMUNICATE 11Monday, September 30, 13
  16. 16. COPYWRITER “What will I need to write?” DEVELOPER “What functionality will I need to implement?” COMMUNICATE 11Monday, September 30, 13
  17. 17. COPYWRITER “What will I need to write?” STAKEHOLDER “How is this meeting our business goals?” DEVELOPER “What functionality will I need to implement?” COMMUNICATE 11Monday, September 30, 13
  18. 18. COPYWRITER “What will I need to write?” STAKEHOLDER “How is this meeting our business goals?” VISUAL DESIGNER “What visual elements need to be displayed?” DEVELOPER “What functionality will I need to implement?” COMMUNICATE 11Monday, September 30, 13
  19. 19. COPYWRITER “What will I need to write?” STAKEHOLDER “How is this meeting our business goals?” VISUAL DESIGNER “What visual elements need to be displayed?” W.F. CREATOR “Will my ideas make sense to others?” DEVELOPER “What functionality will I need to implement?” COMMUNICATE 11Monday, September 30, 13
  20. 20. COPYWRITER “What will I need to write?” STAKEHOLDER “How is this meeting our business goals?” VISUAL DESIGNER “What visual elements need to be displayed?” W.F. CREATOR “Will my ideas make sense to others?” USER “What is this and what can I do here?” DEVELOPER “What functionality will I need to implement?” COMMUNICATE 11Monday, September 30, 13
  21. 21. VALIDATE DEVELOP A GREAT USER EXPERIENCE Do we really need all of this? Are we missing anything? We didn’t even think of that! Is the content hierarchy correct? 12Monday, September 30, 13
  22. 22. SAVE TIME AND COSTS 13Monday, September 30, 13
  23. 23. SAVE TIME AND COSTS FLEXIBLE Make changes early on 13Monday, September 30, 13
  24. 24. VALUABLE Rethink approach on a more strategic level, without the development costs SAVE TIME AND COSTS FLEXIBLE Make changes early on 13Monday, September 30, 13
  25. 25. TYPES 14Monday, September 30, 13
  26. 26. WIREFRAME (LOW-FIDELITY) Jonathan Shariat Eddie Lobanovskiy 15Monday, September 30, 13
  27. 27. WIREFRAME (HIGH-FIDELITY) 16Monday, September 30, 13
  28. 28. WIREFRAME (HIGH-FIDELITY & ANNOTATED) 17Monday, September 30, 13
  29. 29. SETUP 18Monday, September 30, 13
  30. 30. DECIDE ON A TOOL 19Monday, September 30, 13
  31. 31. SETUP 20Monday, September 30, 13
  32. 32. SETUP Start With A Grid and/or Device Choose a proper layout size for the targeted device. If responsive start with either small or large. 1 20Monday, September 30, 13
  33. 33. INCLUDE... 21Monday, September 30, 13
  34. 34. INCLUDE... The structure of the page or screen i.e. navigation & content areas 1 21Monday, September 30, 13
  35. 35. INCLUDE... The structure of the page or screen i.e. navigation & content areas 1 Layout and hierarchy of content Will it give the user what he/she needs in order to achieve their end-goal(s)? 2 2 2 21Monday, September 30, 13
  36. 36. INCLUDE... The structure of the page or screen i.e. navigation & content areas 1 User Interface Elements i.e. forms, buttons, and charts 3 3 3 Layout and hierarchy of content Will it give the user what he/she needs in order to achieve their end-goal(s)? 2 2 2 21Monday, September 30, 13
  37. 37. INCLUDE... The structure of the page or screen i.e. navigation & content areas 1 User Interface Elements i.e. forms, buttons, and charts 3 3 3 Copy Amount i.e. headers and ideal length of text 4 4 4 Layout and hierarchy of content Will it give the user what he/she needs in order to achieve their end-goal(s)? 2 2 2 21Monday, September 30, 13
  38. 38. AVOID... 22Monday, September 30, 13
  39. 39. AVOID... Too many colors/textures Over designing can be distracting and shift the focus of the conversation 1 22Monday, September 30, 13
  40. 40. AVOID... Actual Images This can be distracting and shift the focus of the conversation 2 Too many colors/textures Over designing can be distracting and shift the focus of the conversation 1 22Monday, September 30, 13
  41. 41. AVOID... Actual Images This can be distracting and shift the focus of the conversation 2 Made-up copy Use placement copy if it is not supplied prior to starting the wireframe 3 Too many colors/textures Over designing can be distracting and shift the focus of the conversation 1 22Monday, September 30, 13
  42. 42. AVOID... Actual Images This can be distracting and shift the focus of the conversation 2 Made-up copy Use placement copy if it is not supplied prior to starting the wireframe 3 Too many colors/textures Over designing can be distracting and shift the focus of the conversation 1 Too many fonts Try to use 1 font and only 3 styles for each (i.e. regular, bold, italic) 4 22Monday, September 30, 13
  43. 43. Purpose: Create a public-facing marketing website to showcase the new web app. One-page site Needs to be scalable for future changes Wordpress CASE STUDY 23Monday, September 30, 13
  44. 44. SKETCH THE UX 24Monday, September 30, 13
  45. 45. Who will see the wireframe? What platform am I designing for? WIREFRAME SETUP 25Monday, September 30, 13
  46. 46. WIREFRAME (HIGH-FIDELITY) 26Monday, September 30, 13
  47. 47. WIREFRAME (HIGH-FIDELITY) 26Monday, September 30, 13
  48. 48. DESIGN 27Monday, September 30, 13
  49. 49. Create wireframes (2-3 states) for a new iPad application that allows users to customize and try on sunglasses low or high-fidelity GROUP CHALLENGE 28Monday, September 30, 13
  50. 50. WEB TOOLS 29Monday, September 30, 13
  51. 51. WHAT TO LOOK FOR 30Monday, September 30, 13
  52. 52. WHAT TO LOOK FOR CREATE ORIGINAL WORK in a robust and flexible environment Create/import custom shapes and elements in different sized canvases (device layouts) 30Monday, September 30, 13
  53. 53. WHAT TO LOOK FOR CREATE ORIGINAL WORK in a robust and flexible environment Create/import custom shapes and elements in different sized canvases (device layouts) SCALABLE for future purposes Prototype/Test 30Monday, September 30, 13
  54. 54. WHAT TO LOOK FOR CREATE ORIGINAL WORK in a robust and flexible environment Create/import custom shapes and elements in different sized canvases (device layouts) SCALABLE for future purposes Prototype/Test DESIGN ONCE and have elements cascade throughout the whole document Less work for the wireframe creator 30Monday, September 30, 13
  55. 55. WHAT TO LOOK FOR CREATE ORIGINAL WORK in a robust and flexible environment Create/import custom shapes and elements in different sized canvases (device layouts) SCALABLE for future purposes Prototype/Test DESIGN ONCE and have elements cascade throughout the whole document Less work for the wireframe creator SHARE Share and collaborate with others in the web app. itself or be able to export the document 30Monday, September 30, 13
  56. 56. BEGINNER Wireframe.cc $40/month for 3 users https://wireframe.cc/ 31Monday, September 30, 13
  57. 57. BEGINNER Wireframe.cc $40/month for 3 users https://wireframe.cc/ Simple and minimal UI Easy to find things and learn 1 31Monday, September 30, 13
  58. 58. BEGINNER Wireframe.cc $40/month for 3 users https://wireframe.cc/ Custom Grids dots, lines, size 2 Simple and minimal UI Easy to find things and learn 1 31Monday, September 30, 13
  59. 59. BEGINNER Wireframe.cc $40/month for 3 users https://wireframe.cc/ Custom Grids dots, lines, size 2 Guided Gray Scale Helping the user remember not to over design 3 Simple and minimal UI Easy to find things and learn 1 31Monday, September 30, 13
  60. 60. INTERMEDIATE UXPIN $14.99/month (per user) http://uxpin.com/ 32Monday, September 30, 13
  61. 61. INTERMEDIATE UXPIN $14.99/month (per user) http://uxpin.com/ Intuitive UI for complex features i.e. search and drag & drop elements 1 32Monday, September 30, 13
  62. 62. INTERMEDIATE UXPIN $14.99/month (per user) http://uxpin.com/ Considers Responsive Setting i.e. forms, buttons, and charts 2 Intuitive UI for complex features i.e. search and drag & drop elements 1 32Monday, September 30, 13
  63. 63. INTERMEDIATE UXPIN $14.99/month (per user) http://uxpin.com/ Considers Responsive Setting i.e. forms, buttons, and charts 2 Real-time Sharing easy-to-use collaborative features 3 Intuitive UI for complex features i.e. search and drag & drop elements 1 32Monday, September 30, 13
  64. 64. ADVANCED Adobe Fireworks $50/month (comes with all other programs such as Photoshop) https://creative.adobe.com/join/pro 33Monday, September 30, 13
  65. 65. ADVANCED Adobe Fireworks $50/month (comes with all other programs such as Photoshop) https://creative.adobe.com/join/pro Easy to reuse elements i.e. forms, buttons, and charts 1 33Monday, September 30, 13
  66. 66. ADVANCED Adobe Fireworks $50/month (comes with all other programs such as Photoshop) https://creative.adobe.com/join/pro Multiple Pages/States i.e. forms, buttons, and charts 2 Easy to reuse elements i.e. forms, buttons, and charts 1 33Monday, September 30, 13
  67. 67. ADVANCED Adobe Fireworks $50/month (comes with all other programs such as Photoshop) https://creative.adobe.com/join/pro Multiple Pages/States i.e. forms, buttons, and charts 2 Translates to Design Design finished products in this program 3 Easy to reuse elements i.e. forms, buttons, and charts 1 33Monday, September 30, 13
  68. 68. ADDITIONAL RESOURCES 10 Cloud-Based UX Design Tools to try in 2013 http://www.awwwards.com/10-cloud- based-ux-design-tools-to-try- in-2013.html UX Sketching And Wireframing Templates For Mobile Projects http:// uxdesign.smashingmagazine.com/ 2012/09/18/free-download-ux- sketching-wireframing-templates- mobile/ UI Stencils for Wireframing http://www.uistencils.com/ 34Monday, September 30, 13
  69. 69. QUESTIONS? 35Monday, September 30, 13
  70. 70. @ THANK YOU 36Monday, September 30, 13

×