wireframe like a ux pro
TRANSCRIPT
#uxmedellin
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.
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.
ProcessSketches-> rough wires -> detailed wires (optional)
Explore & Communicate
(User test at rough wire stage)
3 hours of work.Asked client lots of questions, studied other iPad POS systems.
Preview on iPad.Client impressed with our understanding of their business.
12-month wireframe project.Dispersed team.Visio.Long-lived doc.
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.
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.
Tools: Paper FirstLike 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.
Tools: Balsamiq / Moqups / MockingbirdSimilar products. 1. Explore design space.2. Solve design problems.3. Generate consensus.4. Focus on functionality, not design.
Crucial:1. Sketchy look (feature not bug).2. Easy & fast sketching. 3. Easy sharing.
Not really important:1. Clickable prototypes.2. Advanced features to manage larger
projects.
My process:1. Create wire.2. Share & Discuss (or “Sleep on It”).3. Back to Paper: print out and edit on paper.
Peter’s rules for good sketchy wireframes:1. Are shared.2. Are thrown away.
CopyNo Lorem Ipsum.http://placekitten.com NOhttp://blokkfont.com YESSpend 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.
ToolsVisio OmniGraffle Axure
Use if: You’re on Windows. You’re on Mac + good-looking 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
Fill, Line, Shadow, Corners, Formatting
Pages and Backgrounds
Shapes Stencils
Add/Rename/Re-order pages and bg pages. Page Setup to select backgrounds.
Easy naming scheme.Layer backgrounds.bgbg-browserbg-iphone...
Custom page headerAuto-pagenumbers(petervandijck.com stencil)
Create a custom set of shapes.
Pages for large projectForegrounds:
● Overview page (how to use, contact info)● Legend● Object descriptions● Sitemaps● Flows● Screens● Modules
Backgrounds:
● bg tablet● bg phone● bg browser● bg
ExerciseDesign 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.
RecapThe 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.
#uxmedellin
