A presentation at UXPA Boston by Dana Giuliana, Will Millar and Ken Sigel in May 2013. It discusses the popular tools we use to create wireframes - their strengths and weaknesses and encourages designers to get beyond using a single tool since there is no tool that does everything we need.

1. TOOLS
of the
TRADE
Analyzing the functionality and role of
wireframing tools in user experience design

2. DAN A GIULIA NA
@XperienceArc
Experience Architect,
photographer, biker
Recent work with
Chrysler,
Dunkin Donuts, Fidelity,
Boston.com
Studied
Film at
Emerson College
WILL MILLAR
@ideastate
Thinker, maker,
question-asker
Recent work with
Fidelity Biosciences,
MassArt,
City of Boston
Studied
Graphic Design at
MassArt
KEN SIGE L
@kendoggz
Runner, chef,
problem solver
Recent work with
Staples,
The Hartford,
Humana
Studied
Creative Writing at
Wheaton College

3. Creative agency with
mature UX department
30+ experience
designers (Boston)
Experience design
shapes direction for
most projects

4. Guide design & development
Facilitate discussion
Build consensus
WI RE F RA MES

5. VS VS
VS VS

7. PortabilityScalability
FidelityAgilityModularity
Prototyping
6 VIRTUES OF WIREFRAME TOOLS
• Speed
• Ease of iteration
• Pixel perfection
of UI detail
• Collaboration
• Printing/PDF
Exporting
• Reusable
components
• Templates/styles
• Exporting
interactive demos
• Transitions/
animation
• Handling large
document
structures
• Complexity of
page elements

8. Portability
Scalability
Fidelity
Agility
Modularity
Prototyping
6 VIRTUES
OF
WIREFRAME
TOOLS

9. • InDesign
$$$$
Adobe Creative Suite
Powerful desktop publishing
application (Pagemaker)
Making inroads as a web and
tablet publishing tool

10. InDesign
UNLIMITED
CREATIVITY
Create anything you
can imagine
Traditional vector
drawing tools
Columns, grids and
guides
Common image
blending and effects
+

11. InDesign
DETAILED
TYPOGRAPHY
Limitless control
Similar to CSS
Easily handles
massive texts
+

12. InDesign
POWERFUL
STYLES
Paragraph and
character styles for
all text controls
Object styles are
powerful shortcuts
for UI components
Easy to create
+

13. InDesign
LIBRARIES
Create once, use
across multiple
wireframes or
projects
Organize by object
type (buttons, forms,
navigation etc.)
Share across your
team
+

14. EMBED
DOCUMENTS
INTO ONE
ANOTHER
Collaborate with
other team members
Update instances
with one click
InDesign+

15. ROBUST TABLES
Data is structured &
aligned
Detailed formatting
Import from Excel
(link to live .XLS file)
InDesign+

16. LIMITED
INTERACTIVITY
Limited hover and
click events
Objects can animate
and have states
Present in
clickable .PDF
or .SWF
InDesign—

17. STARTING
FROM SCRATCH
No pre-built
components,
libraries or styles
Developing your
own take some time
InDesign—

18. STEEP
LEARNING
CURVE
Newbies need
several days to
become very
productive
So many features
(I’m still learning!)
Classes available
InDesign—

19. Portability
Scalability
Fidelity
Agility
Modularity
Prototyping
InDesign•

20. • OmniGraffle
$$$$
The Omni Group
Diagram design tool
Versatile graphic design program
with many timesaving features

21. OmniGraffle
POWERFUL UI
“STENCILS”
Graffletopia
Almost any UI
element you could
imagine
Robust community is
always adding new
content
+

22. OmniGraffle
GREAT
SKETCHING &
DIAGRAMMING
Easily creates rough
layouts
Powerful and
intuitive
diagramming tools
enable fine control
Enough design
control to polish
concept, but not
cumbersome
+

23. OmniGraffle
VISIO
INTEGRATION
Import and
export files to
and from Visio
Developers
and BAs will like
you more!
+

24. OmniGraffle
STRONG PAGE
MANAGEMENT
Locking layers and
canvases help
manipulate large
documents
Shared layers allow
making single edit
that applies to all
canvases
+

25. OmniGraffle
LACK OF
INTEGRATION
FEATURES
Prototyping
functionality leaves
much to be desired
Mac only
No real
collaboration
No support for
annotations or
documentation
—

26. OmniGraffle
LACK OF
FIDELITY
Ability to execute fine typography or pixel-perfect
design is not near the level of InDesign
—

27. OmniGraffle
Portability
Scalability
Fidelity
Agility
Modularity
Prototyping
•

28. • Axure RP
$$$$
Growing in popularity with both
UX communities and client teams
Basic prototyping software,
maturing into a very robust
wireframing tool

29. Axure RP
GREAT
PROTOTYPING
CAPABILITIES
Quickly develop a
very interactive
prototype
No coding or
advanced techniques
necessary
+

30. Axure RP
HIGHLY
COLLABORATIVE
Easy to share a
project and work
together (in Axure
RP Pro)
Allows for easy
management of
document structure
with large projects
+

31. Axure RP
POWERFUL
DOCUMENTATION
TOOLS
Add notes to the page
or even specific
elements
Notes will be included
when the spec
document is
generated
+

32. Axure RP
REUSABLE
ELEMENTS
Easy to use
“masters” for
page layouts; this
will save time
Masters are edited
in isolation,
sweeping changes
update
automatically
+

33. Axure RP
LACK OF
TRADITIONAL
OUTPUT
Spec document
contains a lot of
information, but
does not lay out
annotations in-line
with the wireframe
Output can be more
challenging for
clients to follow
—

34. Axure RP
ROUGH DESIGN
TOOLS
Some basic controls are surprisingly
unavailable
—

35. Axure RP
CHALLENGING
COMPLEXITY
Not immediately intuitive
Formidable learning curve
Rarely the best tool to start a project in
—

36. Axure RP
Portability
Scalability
Fidelity
Agility
Modularity
Prototyping
•

37. • Balsamiq Mockups
$$$$
Efficient “sketch” tool for lo-fi
prototyping
Popular among non-designers
(clients, devs, etc.)

38. Balsamiq Mockups
FAST AND
ADAPTABLE
Build prototypes
with pre-made UI
elements
Naturally leverage
interface conventions
+

39. Balsamiq Mockups
INTUITIVE
INTERFACE
Minimal learning
curve (learn in a
matter of minutes)
Simple and fun
to use
+

40. Balsamiq Mockups
PROPERLY
CONTROLS THE
DISCUSSION
Isolate the scope of
the conversation to
“concept-only”
Sketch style reminds
viewers that this is
only an idea
Great for cultivating
alignment (internally
and externally)
+

41. Balsamiq Mockups
FORCES HIGH-
LEVEL THINKING
Working in stencils
removes “rendering”
from the process
and allows the
designer to focus on
functionality and
business value
+

42. Balsamiq Mockups
LACK OF
FIDELITY
Only two “styles:”
Sketch and
Wireframe
Unable to modify
many complex UI
elements
—

43. Balsamiq Mockups
NOT VERY
SCALABLE
Primitive document
management (each
screen is its own file)
Rudimentary
prototyping
functionality
—

44. Balsamiq Mockups
Portability
Scalability
Fidelity
Agility
Modularity
Prototyping
•

45. • Keynote
$$$$
Presentation design software
(“Apple’s PowerPoint”)
Recently repurposed as a
versatile prototyping tool

46. Keynote
ROBUST
ANIMATION/
TRANSITIONS
Wide array of
options for bringing
your comps to life
Combining multiple
effects makes apps
feel “real”
Templates from
Keynote Kung Fu
(keynotekungfu.com)
+

47. Keynote
“MAGICALLY”
EFFICIENT
INTERFACE
“Magic Move” is
unbelievably easy
to use
Many other intuitive
motion controls
+

48. Keynote
NOT BUILT FOR
WIREFRAMING
Closer to
PowerPoint
than Axure
Detailed wires
are possible, but
often require
workarounds
—

49. Keynote
CRUMBLES
UNDER HEAVY
WEIGHT
50+ page
documents can
often become
unstable
Inexplicable errors
are not uncommon
—

50. Keynote
Portability
Scalability
Fidelity
Agility
Modularity
Prototyping
•

51. • Drawing
$$$$
Since 30,000 B.C.
(largest user base)
Learned in kindergarten
White board, pen & paper,
digital sketching

52. DEMOCRATIZING
Anyone can
articulate an idea
Involve full team
(developers, PMs,
writers)
Get stakeholders
involved upfront
Drawing+

53. NO
CONSTRAINTS
Freedom to
try anything
Greater visibility into
the process (how
wireframes play a
role)
Drawing+

54. ADVANCED
TECHNIQUES
Alternate states with
Post-its
Photocopy
templates pages to
speed up iteration
Drawing+

55. DIGITAL
TRANSLATION
Easily digitize
sketches with
scanners or mobile
apps like TurboScan
(turboscanapp.com)
Digitized drawings
can be turned into
clickable demos
with apps like Pop
(popapp.in)
Drawing+

56. DIGITAL
SKETCHING
Sketching on a
tablet is quick and
natural
Everyone loves
Paper for iPad
(fiftythree.com)
Drawing+

57. DOES NOT
SCALE
At a certain point, pen and paper becomes untenable
Trying to articulate too many screens, animations, or
advanced interaction is often impossible
Drawing—

58. Drawing
Portability
Scalability
Fidelity
Agility
Modularity
Prototyping
•

59. Portability
Scalability
Fidelity
Agility
Modularity
Prototyping
• INDESIGN
• OMNIGRAFFLE
• AXURE
• BALSAMIQ
• KEYNOTE
• DRAWING
6 VIRTUES
OF
WIREFRAME
TOOLS

63. Don’t limit yourself
Tools define how we work
and think
Get comfortable with multiple tools
Choose tools that fit your project,
strengths, and team
Stay curious and have fun

64. THANK YOU

65. DANA GI ULIAN A
@XperienceArc
WILL MILLAR
@ideastate
K EN SIGEL
@kendoggz
Q &A