The Right Way to Wireframe - WebVisions 2011
6 likes841 views
This document summarizes best practices for wireframing. It discusses that wireframing is a collaborative process, and designers, developers, and users all have valuable perspectives to contribute. While tools are less important than the process, sketching early and often helps explore ideas and get feedback. The goal is not perfection but facilitating shared understanding between stakeholders to build the right product.
The Right Way to Wireframe - WebVisions 2011
- 1. THE RIGHT WAY TO WIREFRAME WebVisions 2011 | #rwtw Russ Unger | @russu
- 2. We don’t show... OUR WORK
- 7. HAVE YOU EVER SEEN A WIREFRAME FROM jesse james garrett peter morville jared spool
- 9. al Navigation Default state store 009 Version 1.0 logo search 2 Jesse James Garrett 1 cart n HBR today on current account blogs books authors HBS downloads page highlights timely content from the blogs, magazine, hbr magazine 3 s sections. explore hbr 4 ea expand your knowledge build your expertise discover new approaches provides a focal point for all e-commerce related links. page allows users to find aggregated links to content from Partially expanded state uthors across blogs, magazine, and books sections. drawer store logo search andable area encourages and facilitates exploration of cart y subject. today on current account blogs books authors HBS downloads your knowledge hbr magazine features editorially selected sub-categories from the current Strategy Decision making explore hbr Business processes ategory in search results. Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management ur expertise Information & technology Managing uncertainty Forecasting features editorially selected sub-categories from the current Global business Time management Knowledge management ment Skills” category in search results. 5 7 new approaches expand your knowledge build your expertise discover new approaches 6 features editorially selected sub-categories from the current Methodologies” category in search results. nks Fully expanded state ks drive users interested in exploring further to dedicated store ages. logo search cart today on current account blogs books authors HBS downloads hbr magazine explore hbr more topics » more skills » more methods » 8 Strategy Decision making Business processes Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management jesse james garrett Information & technology Managing uncertainty Forecasting Global business Time management Knowledge management expand your knowledge build your expertise discover new approaches sign | Harvard Business Review
- 10. “I’ve never done a wireframe*” * jared spool
- 11. What’s the best tool? WIREFRAMING/PROTOTYPING
- 12. What’s the best tool? WIREFRAMING/PROTOTYPING “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t say that works for everyone just because it works for you now!” Me | @russu
- 13. “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!”
- 14. sigh.
- 15. I <3 and...
- 16. If you’re still arguing about wireframes vs. prototypes YOU’RE MISSING THE POINT
- 17. We don’t show... OUR WORK
- 18. “My work is proprietary.” NOT SO ANONYMOUS COWARD
- 19. NUT UP OR SHUT UP
- 20. 4 DESIGNERS 3 CAVEATS 1 PROBLEM
- 21. RUSS (that’s me) WILL FRED TODD
- 22. CAVEATS .use a different tool .no talking to each other .document everything
- 23. BALSAMIQ OMNIGRAFFLE AXURE RP PRO HTML/FIREWORKS
- 24. THE CASE STUDY
- 25. “If we can give $5 to a stranger at a coffee shop, why can’t we do that for healthcare?” TORI TUNCAN 96 Loans for a total of $67,452
- 26. LEND4HEALTH.COM
- 27. THE APPROACH
- 28. @gabbyhon
- 34. THIS IS HOW I DID IT
- 35. requirements
- 36. personas
- 39. Meet Angela The Loan Funder Angela arrives at Angela Searches for a Loan Angela Reviews Details of Lend4Health.com to Fund Loan Request (0.0.0.0) (1.0.0.0) (1.1.0.0) http://www.flickr.com/photos/ 11762156@N06/2912606267/ Part-time working mother of 8 year old son Avery who is able to stay with a babysitter several hours a day. Angela has been through the gamut of testing and wants to help others. user journey
- 40. Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0) sketching
- 41. Quantity over quality 15 SKETCHES / 3 SCREENS
- 42. i even sketched this presentation
- 44. Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0) wireframing
- 45. @simplybrad
- 46. Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0) visual design
- 47. pretty cool
- 49. Four Different Designers THIS IS THE OVERLAP
- 53. sketching
- 54. sketching
- 55. sketching
- 56. sketching
- 57. visual design
- 58. visual design
- 59. visual design
- 60. visual design
- 61. http://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
- 62. CHALLENGES .couldn’t talk to each other .research handed to us .no “formal” usability testing
- 63. PRINCIPALS .sketch (a lot) .practice critique .the best tool is the one you know
- 64. THANK YOU! Russ Unger | @russu