TOOLS of the

TRADE

Analyzing the functionality and role ofwireframing tools in user experience design

D A N A G I U L I A N A@XperienceArc

Experience Architect, photographer, biker

Recent work withChrysler,

Dunkin Donuts, Fidelity, Boston.com

StudiedFilm at

Emerson College

W I L L M I L L A R@ideastate

Thinker, maker, question-asker

Recent work withFidelity Biosciences,

MassArt, City of Boston

StudiedGraphic Design at

MassArt

K E N S I G E L@kendoggz

Runner, chef, problem solver

Recent work withStaples,

The Hartford,Humana

StudiedCreative Writing atWheaton College

Creative agency with mature UX department

30+ experience designers (Boston)

Experience design shapes direction for

most projects

Guide design & development

Facilitate discussion

Build consensus

W I R E F R A M E S

VS VS

VS VS

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

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

6 VIRTUESOF

WIREFRAMETOOLS

• InDesign $$$$

Adobe Creative Suite

Powerful desktop publishing application (Pagemaker)

Making inroads as a web and tablet publishing tool

InDesign UNLIMITED CREATIVITY

Create anything you can imagine

Traditional vector drawing tools

Columns, grids and guides

Common image blending and effects

+

InDesign DETAILED TYPOGRAPHY

Limitless control

Similar to CSS

Easily handles massive texts

+

InDesign POWERFUL STYLES

Paragraph and character styles for all text controls

Object styles are powerful shortcuts for UI components

Easy to create

+

InDesign LIBRARIES

Create once, use across multiple wireframes or projects

Organize by object type (buttons, forms, navigation etc.)

Share across your team

+

EMBED DOCUMENTS INTO ONE ANOTHER

Collaborate with other team members

Update instances with one click

InDesign+

ROBUST TABLES

Data is structured & aligned

Detailed formatting

Import from Excel (link to live .XLS file)

InDesign+

LIMITED INTERACTIVITY

Limited hover and click events

Objects can animate and have states

Present in clickable .PDF or .SWF

InDesign—

STARTINGFROM SCRATCH

No pre-built components, libraries or styles

Developing your own take some time

InDesign—

STEEP LEARNING CURVE

Newbies need several days to become very productive

So many features (I’m still learning!)

Classes available

InDesign—

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

InDesign•

• OmniGraffle$$$$

The Omni Group

Diagram design tool

Versatile graphic design program with many timesaving features

OmniGraffle POWERFUL UI “STENCILS”

Graffletopia

Almost any UI element you could imagine

Robust community is always adding new content

+

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

+

OmniGraffle VISIO INTEGRATION

Import and export files to and from Visio

Developers and BAs will like you more!

+

OmniGraffle STRONG PAGE MANAGEMENT

Locking layers and canvases help manipulate large documents

Shared layers allow making single edit that applies to all canvases

+

OmniGraffle LACK OF INTEGRATION FEATURES

Prototyping functionality leaves much to be desired

Mac only

No real collaboration

No support for annotations or documentation

—

OmniGraffle LACK OFFIDELITY

Ability to execute fine typography or pixel-perfect design is not near the level of InDesign

—

OmniGraffle

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

•

• Axure RP$$$$

Growing in popularity with both UX communities and client teams

Basic prototyping software, maturing into a very robust wireframing tool

Axure RP GREAT PROTOTYPING CAPABILITIES

Quickly develop a very interactive prototype

No coding or advanced techniques necessary

+

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

+

Axure RP POWERFUL DOCUMENTATION TOOLS

Add notes to the page or even specific elements

Notes will be included when the spec document is generated

+

Axure RP REUSABLE ELEMENTS

Easy to use “masters” for page layouts; this will save time

Masters are edited in isolation, sweeping changes update automatically

+

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

—

Axure RP ROUGH DESIGNTOOLS

Some basic controls are surprisingly unavailable

—

Axure RP CHALLENGINGCOMPLEXITY

Not immediately intuitive

Formidable learning curve

Rarely the best tool to start a project in

—

Axure RP

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

•

• Balsamiq Mockups$$$$

Efficient “sketch” tool for lo-fi prototyping

Popular among non-designers (clients, devs, etc.)

Balsamiq Mockups FAST AND ADAPTABLE

Build prototypes with pre-made UI elements

Naturally leverage interface conventions

+

Balsamiq Mockups INTUITIVE INTERFACE

Minimal learning curve (learn in a matter of minutes)

Simple and fun to use

+

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)

+

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

+

Balsamiq Mockups LACK OF FIDELITY

Only two “styles:” Sketch and Wireframe

Unable to modify many complex UI elements

—

Balsamiq Mockups NOT VERY SCALABLE

Primitive document management (each screen is its own file)

Rudimentary prototyping functionality

—

Balsamiq Mockups

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

•

• Keynote $$$$

Presentation design software (“Apple’s PowerPoint”)

Recently repurposed as a versatile prototyping tool

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)

+

Keynote “MAGICALLY” EFFICIENT INTERFACE

“Magic Move” is unbelievably easy to use

Many other intuitive motion controls

+

Keynote NOT BUILT FOR WIREFRAMING

Closer to PowerPoint than Axure

Detailed wires are possible, but often require workarounds

—

Keynote CRUMBLES UNDER HEAVY WEIGHT

50+ page documents can often become unstable

Inexplicable errors are not uncommon

—

Keynote

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

•

• Drawing $$$$

Since 30,000 B.C.(largest user base)

Learned in kindergarten

White board, pen & paper, digital sketching

DEMOCRATIZING

Anyone can articulate an idea

Involve full team (developers, PMs, writers)

Get stakeholders involved upfront

Drawing+

NO CONSTRAINTS

Freedom to try anything

Greater visibility into the process (how wireframes play a role)

Drawing+

ADVANCED TECHNIQUES

Alternate states with Post-its

Photocopy templates pages to speed up iteration

Drawing+

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+

DIGITAL SKETCHING

Sketching on a tablet is quick and natural

Everyone loves Paper for iPad (fiftythree.com)

Drawing+

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—

Drawing

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

•

Portability

Scalability

Fidelity

Agility

Modularity

Prototyping

• INDESIGN

• OMNIGRAFFLE

• AXURE

• BALSAMIQ

• KEYNOTE

• DRAWING

6 VIRTUESOF

WIREFRAMETOOLS

Don’t limit yourselfTools 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

T H A N K Y O U

D A N A G I U L I A N A@XperienceArc

W I L L M I L L A R@ideastate

K E N S I G E L@kendoggz

Q & A