Wireframe like a UX Pro


Published on

The how and why of creating wireframes like a UX Pro. We talk about rough, sketchy wireframes and long, detailed wireframes.

Published in: Design, Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Wireframe like a UX Pro

  1. 1. #uxmedellin
  2. 2. 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.
  3. 3. 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.
  4. 4. Process Sketches -> rough wires -> detailed wires (optional) Explore & Communicate (User test at rough wire stage)
  5. 5. 3 hours of work. Asked client lots of questions, studied other iPad POS systems.
  6. 6. Preview on iPad. Client impressed with our understanding of their business.
  7. 7. 12-month wireframe project. Dispersed team. Visio. Long-lived doc.
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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
  14. 14. Fill, Line, Shadow, Corners, Formatting Shapes Stencils Pages and Backgrounds
  15. 15. Add/Rename/Re-order pages and bg pages. Page Setup to select backgrounds.
  16. 16. Easy naming scheme. Layer backgrounds. bg bg-browser bg-iphone ...
  17. 17. Custom page header Auto-pagenumbers (petervandijck.com stencil)
  18. 18. Create a custom set of shapes.
  19. 19. 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
  20. 20. Visio stencils: http://goo.gl/nLMt9y
  21. 21. 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.
  22. 22. 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.
  23. 23. #uxmedellin