Wireframes for the Wicked
Michael Angeles, Nick Finck and Donna Spencer
March 16, 2009

Use #wickedwire when commenting on...
Michael Angeles                 Nick Finck                     Donna Spencer
is an interaction designer      is the Direct...
What is a Wireframe?
Who are they for?
Users of documentation
• Design team                      • Managers
  - Discuss ideas and approaches     - Is the overall...
What is the process?
Moving from Sketching to Wireframing




Adaptation from Sketching the User Experience by Bill Buxton
Types of Wireframes
Types of Wireframes
• Reference Zones
• Low Fidelity
• High Fidelity
• Storyboards
• Standalone
• Specification
Reference Zones
Reference Zones
• What it is
  - Shows just major positioning of content blocks
• Use to
  - Discuss a big idea or concept...
Reference Zones
High Fidelity Wireframes
High Fidelity Wireframes
• What it is
  - Shows a lot of detail, as much as in the built
    product
• Use to
  - Work thr...
High Fidelity Wireframes
High Fidelity Wireframes
High Fidelity Wireframes
Storyboards
Storyboards
• What it is
  - A sequence of 'screens' that show the flow
    across time
• Use to
  - Show how the wireframe...
Storyboards
Storyboards
Storyboards
Standalone Wireframes
Standalone Wireframes
• What it is
  - A wireframe that can be understood without
    you there
• Use to
  - Communicate a...
Standalone Wireframes
Standalone Wireframes




      Wireframe by Tom Watson of Blue Flavor
Specification Wireframes
Specification Wireframes
• What it is
  - A wireframe with enough detail to be built
• Use to
  - Development
• Watch out f...
Specification Wireframes
Specification Wireframes
Sketch Style Wireframes
Sketch Style Wireframes




   Balsamiq.com - Balsamiq Mockups
Sketch Style Wireframes




 Konigi.com OmniGraffle Sketch Stencils
Thank you!
Thank you!


Come to our party tonight, we’ll get you drunk!
?
Questions?
Wireframes for the Wicked
Upcoming SlideShare
Loading in...5
×

Wireframes for the Wicked

76,853

Published on

Wireframes beyond the basics, not for the weak at heart. In this panel, three experienced designers will share their tried and true tips for making wireframes really work. We'll talk about how to sketch a wireframe on the fly to demonstrate an idea and how to create a standalone wireframe deliverable; when to show a concept and when to describe nitty-gritty detail; how to make a narrative wireframe and how to make a specification wireframe. And best of all, we'll show you plenty of examples.

Published in: Technology, Education, Design
14 Comments
334 Likes
Statistics
Notes
  • Nice approach to the whole subject. I like it.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Is the backlog of Q&A that couldn't be covered posted somewhere? Thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing such an amazing explanation through nicely built presentation. I have two websites: http://www.stage2pilotage.com/ and http://www.offres-internet-haut-debit.com/ that I wish to embed this slide into them. I hope you don’t mind. Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice de-mystification for users and sponsors: helps us ask good questions and avoid pitfalls!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Audio has now been added to the Wireframes for the Wicked. I did my best to map it to the slides. Enjoy and please share! :D
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
76,853
On Slideshare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
2,268
Comments
14
Likes
334
Embeds 0
No embeds

No notes for slide

Wireframes for the Wicked

  1. 1. Wireframes for the Wicked Michael Angeles, Nick Finck and Donna Spencer March 16, 2009 Use #wickedwire when commenting on twitter SXSW Interactive 2009 - Austin, TX
  2. 2. Michael Angeles Nick Finck Donna Spencer is an interaction designer is the Director of User is an information architect, living in Brooklyn, NY. He is Experience at Blue Flavor, a interaction designer, writer, Director of User Experience web design company that teacher for Maadmob (her at Traction Software and focuses creating web company) in Canberra, publishes the UX design site experiences. He lives and Australia. Konigi. plays in Seattle, WA. @maadonna @jibbajabba @nickf
  3. 3. What is a Wireframe?
  4. 4. Who are they for?
  5. 5. Users of documentation • Design team • Managers - Discuss ideas and approaches - Is the overall approach a good one - Critique each others work • Developers • Business people - Exactly how should this work and - How will it affect their day how will I implement it - Have you understood the business rules & context
  6. 6. What is the process?
  7. 7. Moving from Sketching to Wireframing Adaptation from Sketching the User Experience by Bill Buxton
  8. 8. Types of Wireframes
  9. 9. Types of Wireframes • Reference Zones • Low Fidelity • High Fidelity • Storyboards • Standalone • Specification
  10. 10. Reference Zones
  11. 11. Reference Zones • What it is - Shows just major positioning of content blocks • Use to - Discuss a big idea or concept early in a project - Show the overall structure of particular pages - Show how a family of pages work together • Watch out for - Some people can't think abstractly
  12. 12. Reference Zones
  13. 13. High Fidelity Wireframes
  14. 14. High Fidelity Wireframes • What it is - Shows a lot of detail, as much as in the built product • Use to - Work through the detail of how an interaction (or part of one) will work - Ensure the designer and stakeholders both have the same idea about how something works • Watch out for - Readers get bogged down in detail - Leave time to absorb the detail
  15. 15. High Fidelity Wireframes
  16. 16. High Fidelity Wireframes
  17. 17. High Fidelity Wireframes
  18. 18. Storyboards
  19. 19. Storyboards • What it is - A sequence of 'screens' that show the flow across time • Use to - Show how the wireframes fit together - Show how a user will experience a workflow - Demonstrate a task end-to-end • Watch out for - Show tasks before & after for a whole context - Demonstrate core tasks in one flow - Demonstrate exceptions in a separate flow
  20. 20. Storyboards
  21. 21. Storyboards
  22. 22. Storyboards
  23. 23. Standalone Wireframes
  24. 24. Standalone Wireframes • What it is - A wireframe that can be understood without you there • Use to - Communicate any of the wireframe types we've discussed, but in a way that means they can be understood without you - Document for future reference and use • Watch out for - Everything has to be included - Lots of annotations are needed - It can be hard to follow linkages between screens
  25. 25. Standalone Wireframes
  26. 26. Standalone Wireframes Wireframe by Tom Watson of Blue Flavor
  27. 27. Specification Wireframes
  28. 28. Specification Wireframes • What it is - A wireframe with enough detail to be built • Use to - Development • Watch out for - Everything has to be included - all states (logged in, logged out, error) - data sources and destinations - all actions - all validations - It must stand alone - Talk to your developers to make it usable for them - Never show this to business people or users
  29. 29. Specification Wireframes
  30. 30. Specification Wireframes
  31. 31. Sketch Style Wireframes
  32. 32. Sketch Style Wireframes Balsamiq.com - Balsamiq Mockups
  33. 33. Sketch Style Wireframes Konigi.com OmniGraffle Sketch Stencils
  34. 34. Thank you!
  35. 35. Thank you! Come to our party tonight, we’ll get you drunk!
  36. 36. ? Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×