wireframe like a ux pro
TRANSCRIPT
![Page 1: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/1.jpg)
#uxmedellin
![Page 2: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/2.jpg)
![Page 3: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/3.jpg)
![Page 5: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/5.jpg)
![Page 6: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/6.jpg)
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.
![Page 7: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/7.jpg)
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.
![Page 8: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/8.jpg)
ProcessSketches-> rough wires -> detailed wires (optional)
Explore & Communicate
(User test at rough wire stage)
![Page 9: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/9.jpg)
3 hours of work.Asked client lots of questions, studied other iPad POS systems.
![Page 10: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/10.jpg)
Preview on iPad.Client impressed with our understanding of their business.
![Page 11: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/11.jpg)
12-month wireframe project.Dispersed team.Visio.Long-lived doc.
![Page 12: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/12.jpg)
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.
![Page 13: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/13.jpg)
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.
![Page 14: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/14.jpg)
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.
![Page 15: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/15.jpg)
![Page 16: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/16.jpg)
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.
![Page 17: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/17.jpg)
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.
![Page 18: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/18.jpg)
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
![Page 19: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/19.jpg)
Fill, Line, Shadow, Corners, Formatting
Pages and Backgrounds
Shapes Stencils
![Page 20: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/20.jpg)
Add/Rename/Re-order pages and bg pages. Page Setup to select backgrounds.
![Page 21: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/21.jpg)
Easy naming scheme.Layer backgrounds.bgbg-browserbg-iphone...
![Page 22: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/22.jpg)
Custom page headerAuto-pagenumbers(petervandijck.com stencil)
![Page 23: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/23.jpg)
Create a custom set of shapes.
![Page 24: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/24.jpg)
![Page 25: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/25.jpg)
![Page 26: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/26.jpg)
![Page 27: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/27.jpg)
![Page 28: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/28.jpg)
![Page 29: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/29.jpg)
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
![Page 31: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/31.jpg)
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.
![Page 32: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/32.jpg)
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.
![Page 33: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/33.jpg)
#uxmedellin
![Page 34: Wireframe like a UX Pro](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6da4477f8b9a8b2b8b4773/html5/thumbnails/34.jpg)