狠狠撸

狠狠撸Share a Scribd company logo

Wireframe like a UX Pro

?
?
Peter Van Dijck
Peter Van Dijck

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 of 34
Download to read offline
#uxmedellin
Wireframe like a UX Pro
Wireframe like a UX Pro
Wireframe like a UX Pro
Wireframe like a UX Pro
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.
Process Sketches -> 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 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.
Wireframe like a UX Pro
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.
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.
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
Fill, Line, Shadow, Corners, Formatting Shapes Stencils Pages and Backgrounds
Add/Rename/Re-order pages and bg pages. Page Setup to select backgrounds.
Easy naming scheme. Layer backgrounds. bg bg-browser bg-iphone ...
Custom page header Auto-pagenumbers (petervandijck.com stencil)
Create a custom set of shapes.
Wireframe like a UX Pro
Wireframe like a UX Pro
Wireframe like a UX Pro
Wireframe like a UX Pro
Wireframe like a UX Pro
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
Visio stencils: http://goo.gl/nLMt9y
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.
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.
#uxmedellin
Wireframe like a UX Pro

More Related Content

Wireframe like a UX Pro

  • 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 ...
  • 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
  • 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.