This document discusses best practices for creating wireframes, which are simple sketches used to explore design problems and communicate solutions to teams. It recommends starting with paper sketches before moving to digital tools in order to facilitate exploration. Common wireframing tools like Balsamiq, Moqups, and Axure are described. The document provides tips for structuring wireframes with pages, modules, and background templates. It also emphasizes using real content like copy and data rather than placeholders. Overall, the document promotes a process of exploring design problems through quick paper sketches before iterating and communicating solutions digitally.

1. #uxmedellin

6. Explore.
Product design is largely having a vision (job to
be done) and solve a LOT of design problems.
Sketchy wires are fast way to 1. explore design
space and 2. identify design problems, which
you can then solve.
“Thinking device” to explore a problem space.

7. Communicate.
Great design of complex systems is done in
teams - in particular in multi-disciplinary teams.
But different disciplines speak different
languages. (This runs deep.)
“Wireframes are boundary objects” → objects
that carry information that is interpreted
differently by different communities, but are
robust enough to carry a common identity.
Walk the wall. Great wireframes hang on walls.

8. Process
Sketches
-> rough wires
-> detailed wires
(optional)
Explore &
Communicate
(User test at rough wire
stage)

9. 3 hours of work.
Asked client lots of questions, studied
other iPad POS systems.

10. Preview on iPad.
Client impressed with our understanding
of their business.

11. 12-month wireframe project.
Dispersed team.
Visio.
Long-lived doc.

12. Work well:
●
●
●
●
●
●
●
●
●
Header
Document versioned.
Printable document size. (“Back To Paper”)
Page numbers (for printing & referring).
Break up long pages.
Every screens is numbered (for referring
and linking).
Every interaction has IDnumber of target
screen.
Repeating modules are specced out once.
Peter’s rule for wireframe colors: Keep It
Grey.

13. Not so great:
Non-page models
●
●
Multiple outputs (devices, rotations,
responsive).
AJAX, animation, complex interactions.
Maintainable (= DRY)
●
●
Versioning and tracking changes.
Repeating modules within screens.
Project workflow
●
●
How to combine with functional
specifications, technical specs and other
docs.
Copywriting.

14. Tools: Paper First
Like mobile first, paper/whiteboard first, so you
can explore and throw away.
Digital has advantages once you’re getting closer:
easier to share, easier to rewrite text (design is
copywriting), easier to keep editing/evolving.
But you lose out if you’re not sketching on paper,
because that’s where the real thinking happens.
On paper, on printouts, and on walls.
Back To Paper.

16. Tools: Balsamiq / Moqups /
Mockingbird
Similar products.
1.
2.
3.
4.
Explore design space.
Solve design problems.
Generate consensus.
Focus on functionality, not design.
Crucial:
1.
2.
3.
Sketchy look (feature not bug).
Easy & fast sketching.
Easy sharing.
Not really important:
1.
2.
Clickable prototypes.
Advanced features to manage larger
projects.
My process:
1.
2.
3.
Create wire.
Share & Discuss (or “Sleep on It”).
Back to Paper: print out and edit on paper.
Peter’s rules for good sketchy wireframes:
1.
2.
Are shared.
Are thrown away.

17. Copy
No Lorem Ipsum.
http://placekitten.com NO
http://blokkfont.com YES
Spend a lot of time on finding the right words,
labels, editing sentences, the right form field
labels, etc.
Use “real” example data.
Create a system language.

18. Tools
Visio
OmniGraffle
Axure
Use if:
You’re on Windows.
You’re on Mac + goodlooking wires.
Long-lived specs
Environment
Win
Mac
Win + Mac
Layers
Yes (backgrounds)
Yes (Shared layers)
Yes
Modules
Not really (manually)
Kind of (embed)
Yes
Clickable prototypes
Kind of
Kind of
Yes
Generate Specs
No
No
Yes (Word)
Easy to Share
PDF
PDF
Yes
Custom fields
Kind of
No
Yes

19. Fill, Line, Shadow, Corners,
Formatting
Shapes Stencils
Pages and Backgrounds

20. Add/Rename/Re-order pages
and bg pages. Page Setup to
select backgrounds.

21. Easy naming scheme.
Layer backgrounds.
bg
bg-browser
bg-iphone
...

22. Custom page header
Auto-pagenumbers
(petervandijck.com stencil)

23. Create a custom set of shapes.

29. Pages for large project
Foregrounds:
●
●
●
●
●
●
●
Overview page (how to use, contact info)
Legend
Object descriptions
Sitemaps
Flows
Screens
Modules
Backgrounds:
●
●
●
●
bg tablet
bg phone
bg browser
bg

30. Visio stencils: http://goo.gl/nLMt9y

31. Exercise
Design a timetracking tool: the screen where you track your time.
Groups of 5 (month of birth)
●
●
●
●
●
Paper & pencil
Paper & marker
Paper, pencil & tape
Paper & Crayons
Drawingboard
Report on tools & process.
10 minutes
●
●
●
●
Introduce yourselves
Assign who will report (random)
Design product (5 mins)
Discuss tools & process
Report.

32. Recap
The process matters, not the tools.
●
●
Explore
Communicate
But the tool affects the process.
The best camera is the one you have with you.
The best tool is the one you know. Customize it if needed to fit the process.

33. #uxmedellin