The document discusses wireframes and the wireframing process. It begins with defining what a wireframe is and its purpose for focusing on usability and user experience. It then outlines the typical wireframing process which includes sketching ideas, creating wireframes, prototyping, and development. The document provides guidance on when to use wireframes, why they are useful for communicating with stakeholders and allowing for flexibility. It also covers types of wireframes, tools for creating wireframes, what to include and avoid, and resources for learning more about wireframing.
16. COPYWRITER
âWhat will I need to write?â
DEVELOPER
âWhat functionality will I need to
implement?â
COMMUNICATE
11Monday, September 30, 13
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. 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. 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. 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. 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
23. SAVE TIME AND COSTS
FLEXIBLE
Make changes early on
13Monday, September 30, 13
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
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
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. 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. 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
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. 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. 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. 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
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
52. WHAT TO LOOK FOR
CREATE ORIGINAL WORK in a robust and ïŹexible
environment
Create/import custom shapes and elements in
different sized canvases (device layouts)
30Monday, September 30, 13
53. WHAT TO LOOK FOR
CREATE ORIGINAL WORK in a robust and ïŹexible
environment
Create/import custom shapes and elements in
different sized canvases (device layouts)
SCALABLE for future purposes
Prototype/Test
30Monday, September 30, 13
54. WHAT TO LOOK FOR
CREATE ORIGINAL WORK in a robust and ïŹexible
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. WHAT TO LOOK FOR
CREATE ORIGINAL WORK in a robust and ïŹexible
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
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. 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
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. 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. 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. 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