Your SlideShare is downloading. ×
What The Wireframe?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What The Wireframe?

9,729
views

Published on

I talked about the what, why, when, who and how of wireframes. Highlights include: Emphasis on embracing analog tools like pens, sticky notes, moleskin, and whiteboards. I also suggest to get to a …

I talked about the what, why, when, who and how of wireframes. Highlights include: Emphasis on embracing analog tools like pens, sticky notes, moleskin, and whiteboards. I also suggest to get to a working prototype as fast as possible.

If you saw this presentation, rate it at Speaker Rate: http://speakerrate.com/talks/314-what-the-wireframe-a-pragmatic-approach-to-wireframes

Published in: Design, Education, Technology

3 Comments
63 Likes
Statistics
Notes
  • Thanks so much for this intro! I'll have a better time figuring out Omnigraffle for the first time now, and I started mapping a site with Stickies as I read along. Now I feel more confident about bringing it further and understanding how this wil be assessed :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great presentation! Thanks for sharing, Jason.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for the views/fav's all! This was my first presentation, it went pretty well. =)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,729
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
405
Comments
3
Likes
63
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. What the wireframe? A pragmatic point of view
  • 2. Hi, I’m Jason Robb Tweeting today? @jasonrobb #wtwf
  • 3. MyHappyPlanet • Start-up company • Wearer of many hats • Design of: UX, UI, IA, IxD, etc...
  • 4. Why listen to me? • Made a fair share of wireframes. • A few methods. Not all. • You’ll learn something! (Even if it is what not to do, I win!)
  • 5. Note: I have no idea what I’m doing up here. Throw me a bone. Ask me questions!
  • 6. What are wireframes? Language International Purpose of this document: Created on Tue Feb 17 2009 Modified on Wed Feb 18 2009 This wireframe shows the redesigned content on our home page. Is this the right Wireframe: Home page Created by Jason Robb content? The presentation will change, the layout is a bit cramped, but that will be adjusted later. Shown below is the home page MINUS the header, navigation and footer. wf-HomePage2.gra e Notes 1 Clear, concise H1 & Tour link Find language courses A) Pending final revision, this is our mission statement 1.A packed into 7 words or less. B) Take the tour - maybe not the best copywriting. Photo of a city or person at the best schools Something to this e ect. The people that quot;get itquot; will find the search form, destinations, or special courses below. 2 Triple play Take the tour > 1.B Three great things that we do that makes us stand apart from out competition. Icons are either already made or need minor tweaking to fit. 3 Easily compare multiple Free student counseling Low prices guaranteed Mini-search got minified 2 courses & schools No AJAX . Why? It's complicated and redundant. The Icon Icon Icon If you find a cheaper price Our student advisors are original design was apart of a larger (now extinct) UX. We have thousands of somewhere else we'll knowledgeable, friendly, courses, all at high quality No duration - it isn't something people think about from match it! and want to help you find the start. It's important. But I'd be willing to bet that data schools. the perfect match. Price matching policy shows that nobody adjusts it from the home page Search courses now Learn more about us (reference needed, lil help Mike?). 4 Destination table List all locations in every language we o er. These links Find a course Study abroad destinations Summer courses 5 3 4 go to our SERP. If they click quot;USAquot;, then we show them the default search for all cities in the USA, intensive Study in sunny Boston USA, courses only, for an duration. Language Study English where the grass is greener 5 Specialty courses Select a language and the air is cleaner. These won't be blue links, but they'll be obviously Boston New York Los Angelos USA clickable. Presentation withstanding, ideally, these clicks Country City Business courses send our users to SERP for these course types. Until then, we'll push them to our contact form. (See notes on San Antonio Pittsburgh Baltimore Select a country Navigation paths.) Your boss will love you and want to give you a raise City Nomans Someplace Lightville immediately. Land Select a country Kids courses UK London Cambridge Berkshire Search courses Send your kids to Italy to work like slaves for 6 weeks. Study Spanish
  • 7. What are wireframes? • Basis for discussion • Give visible form and structure to info architecture • Cheap to make
  • 8. How abstract ideas become concrete designs
  • 9. Why use them?
  • 10. Why use them? • Developers: How is it supposed to work? • Business: Do we understand the business goals? • Progress check: Are we on the right track? • Discussion: Get people talking about the UI.
  • 11. When are they used?
  • 12. Whenever an idea needs to have form See it, test it, iterate.
  • 13. New product design Before visual design & after structural design © Jesse James Garrett http://www.jjg.net/elements/
  • 14. Existing product? Any time the UI needs improvement
  • 15. Types of wireframes • Fidelity (high or low) • Medium (paper or digital)
  • 16. “Designers should choose whichever medium and level of fidelity suit their practical needs and design goals...” High-fidelity or low-fidelity, paper or digital? Miriam Walker, 2002 http://dub.washington.edu:2007/projects/fidelity/pubs/Walker_HFES_2002.pdf
  • 17. Practical needs Getting things done.
  • 18. Practical needs • Technical requirements • Business requirements • User requirements
  • 19. Design goals Shape & discuss ideas
  • 20. Who are they for? © James Kelway - http://www.flickr.com/photos/userpathways/2612549491/
  • 21. Who are they for? • Designers, creatives, marketing • Developers, usability, QA • Users, user groups, user testing • Business, stakeholders, CEO’s • Everyone!? Your mom, too?
  • 22. How are they made? Pick the fastest tools for you.
  • 23. Analog tools Fastest for thinking (at first).
  • 24. Analog tools • Pens, markers • Sticky notes • Moleskins • Whiteboards
  • 25. Use a pen, don’t be scared. • Pen: Micron .35mm water-proof, fade-proof, permanent • Forces you to be decisive • You’ll be faster at getting your thoughts on paper • Maybe this is drawing-related?
  • 26. Start with sticky notes
  • 27. I like sticky notes • I write small, so the size constraint doesn’t bother me. • They’re transient. They’re not museum-bound. • Moved easily, arranged in a flow. • Super fastasto complete. (that’s twice fast as regular fast.)
  • 28. Get a big moleskin • Sticky notes take the place of my pocket moleskin. • Small doesn’t allow for enough details to be fleshed out. • Big isn’t an option. • Stickies fit in the big moleskin!
  • 29. Stickies fit in a moleskin
  • 30. Process of wireframing How I do it...
  • 31. Wireframing process • Start with sketches (low-fidelity) • Increase fidelity as the concept moves forward (skip levels as needed) • The goal is an interactive prototype • Once tested, it quickly becomes a real product.
  • 32. My typical process Thumbnails > full pages > prototype
  • 33. Don’t waste time. Your sticky notes are not your web site.
  • 34. “A piece of paper, on the other hand, is only on its way to the garbage can.” Getting Real by 37Signals http://gettingreal.37signals.com/ch11_Dont_Do_Dead_Documents.php
  • 35. Don’t waste too much time with static wireframes. Get to HTML fast, if you can. My recommendation, based on 37Signals wireframe sentiments.
  • 36. “You can’t go from nothing to a prototype unless you already have a prototype to work with.” Get realistic by Jason Robb
  • 37. 1. Wireframes don’t always need finished. 2. Only wireframe the unknown pages. Spoolcast: Roughing it with Interactive Prototypes http://www.uie.com/brainsparks/2009/03/06/spoolcast-roughing-it-with-interactive- prototypes/
  • 38. Getting to prototypes Get here as fast as possible
  • 39. Digital tools • Omnigraffle - easy to use, easy to get too detailed. (That’s bad) • Photoshop - less easy to use, more easy to get too detailed. • HTML - just right, if you set it up first. (Initial time sink)
  • 40. Omnigraffle Language International Purpose of this document: Created on Tue Feb 17 2009 Modified on Wed Feb 18 2009 This wireframe shows the redesigned content on our home page. Is this the right Wireframe: Home page Created by Jason Robb content? The presentation will change, the layout is a bit cramped, but that will be adjusted later. Shown below is the home page MINUS the header, navigation and footer. wf-HomePage2.gra e Notes 1 Clear, concise H1 & Tour link Find language courses A) Pending final revision, this is our mission statement 1.A packed into 7 words or less. B) Take the tour - maybe not the best copywriting. Photo of a city or person at the best schools Something to this e ect. The people that quot;get itquot; will find the search form, destinations, or special courses below. 2 Triple play Take the tour > 1.B Three great things that we do that makes us stand apart from out competition. Icons are either already made or need minor tweaking to fit. 3 Easily compare multiple Free student counseling Low prices guaranteed Mini-search got minified 2 courses & schools No AJAX . Why? It's complicated and redundant. The Icon Icon Icon If you find a cheaper price Our student advisors are original design was apart of a larger (now extinct) UX. We have thousands of somewhere else we'll knowledgeable, friendly, courses, all at high quality No duration - it isn't something people think about from match it! and want to help you find the start. It's important. But I'd be willing to bet that data schools. the perfect match. Price matching policy shows that nobody adjusts it from the home page Search courses now Learn more about us (reference needed, lil help Mike?). 4 Destination table List all locations in every language we o er. These links Find a course Study abroad destinations Summer courses 5 3 4 go to our SERP. If they click quot;USAquot;, then we show them the default search for all cities in the USA, intensive Study in sunny Boston USA, courses only, for an duration. Language Study English where the grass is greener 5 Specialty courses Select a language and the air is cleaner. These won't be blue links, but they'll be obviously Boston New York Los Angelos USA clickable. Presentation withstanding, ideally, these clicks Country City Business courses send our users to SERP for these course types. Until then, we'll push them to our contact form. (See notes on San Antonio Pittsburgh Baltimore Select a country Navigation paths.) Your boss will love you and want to give you a raise City Nomans Someplace Lightville immediately. Land Select a country Kids courses UK London Cambridge Berkshire Search courses Send your kids to Italy to work like slaves for 6 weeks. Study Spanish
  • 41. Photoshop
  • 42. HTML
  • 43. HTML, why I love it • HTML Templates: make a half dozen different layouts. Reuse. • They take time to make, worth it. • Use frameworks: 960GS, blueprint, YUI, etc... • Then spend more time thinking in the prototype
  • 44. Tool time & Goal time A lesson from Jared Spool
  • 45. Tool time is... • Wasted time. • “If it takes longer to make something bold, it’s not any better bold” • (You’re still learning how to use your tools faster/better. ;)
  • 46. Goal time • Goal time is time spent making progress toward the final product • The ultimate goal is to spend more time working towards the goal, and less wasted with your tools
  • 47. Separate the goals from the tools Use whatever tool is fastest for you!
  • 48. That’s all yinz! Any questions?
  • 49. How’d I do? Seriously, tell me! http://speakerrate.com/jasonrobb

×