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. 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. What is a Wireframe?

4. Who are they for?

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. What is the process?

7. Moving from Sketching to Wireframing
Adaptation from Sketching the User Experience by Bill Buxton

9. Types of Wireframes

10. Types of Wireframes
• Reference Zones
• Low Fidelity
• High Fidelity
• Storyboards
• Standalone
• Specification

11. Reference Zones

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

13. Reference Zones

14. High Fidelity Wireframes

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

16. High Fidelity Wireframes

17. High Fidelity Wireframes

18. High Fidelity Wireframes

19. Storyboards

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

21. Storyboards

22. Storyboards

23. Storyboards

24. Standalone Wireframes

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

26. Standalone Wireframes

27. Standalone Wireframes
Wireframe by Tom Watson of Blue Flavor

28. Specification Wireframes

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

30. Specification Wireframes

31. Specification Wireframes

32. Sketch Style Wireframes

33. Sketch Style Wireframes
Balsamiq.com - Balsamiq Mockups

34. Sketch Style Wireframes
Konigi.com OmniGraffle Sketch Stencils

35. Thank you!

36. Thank you!
Come to our party tonight, we’ll get you drunk!

37. ?
Questions?