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
Aug 17, 2014
Wireframes for the WickedMichael Angeles, Nick Finck and Donna SpencerMarch 16, 2009
Use #wickedwire when commenting on twitter
SXSW Interactive 2009 - Austin, TX
Michael Angelesis an interaction designer living in Brooklyn, NY. He is Director of User Experience at Traction Software and publishes the UX design site Konigi.
@jibbajabba
Nick Finckis the Director of User Experience at Blue Flavor, a web design company that focuses creating web experiences. He lives and plays in Seattle, WA.
@nickf
Donna Spenceris an information architect, interaction designer, writer, teacher for Maadmob (her company) in Canberra, Australia.
@maadonna
•Design team
- Discuss ideas and approaches
- Critique each others work
•Business people
- How will it affect their day
- Have you understood the
business rules & context
Users of documentation•Managers
- Is the overall approach a good one
•Developers
- Exactly how should this work and
how will I implement it
•Reference Zones
•Low Fidelity
•High Fidelity
•Storyboards
•Standalone
•Specification
Types of Wireframes
•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
Reference Zones
•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
High Fidelity Wireframes
•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
Storyboards
•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
Standalone 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
Specification Wireframes