wire frames for the wicked
DESCRIPTION
South by Southwest Interactive 2009 panel discussion about wireframes, with Michael Angeles, Nick Finck, and Donna Maurer.TRANSCRIPT
![Page 1: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/1.jpg)
Wireframes for the WickedMichael Angeles, Nick Finck and Donna SpencerMarch 16, 2009
Use #wickedwire when commenting on twitter
SXSW Interactive 2009 - Austin, TX
![Page 2: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/2.jpg)
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
![Page 3: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/3.jpg)
What is a Wireframe?
![Page 4: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/4.jpg)
Who are they for?
![Page 5: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/5.jpg)
•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
![Page 6: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/6.jpg)
What is the process?
![Page 7: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/7.jpg)
Moving from Sketching to Wireframing
Adaptation from Sketching the User Experience by Bill Buxton
![Page 8: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/8.jpg)
![Page 9: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/9.jpg)
Types of Wireframes
![Page 10: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/10.jpg)
•Reference Zones
•Low Fidelity
•High Fidelity
•Storyboards
•Standalone
•Specification
Types of Wireframes
![Page 11: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/11.jpg)
Reference Zones
![Page 12: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/12.jpg)
•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
![Page 13: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/13.jpg)
Reference Zones
![Page 14: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/14.jpg)
High Fidelity Wireframes
![Page 15: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/15.jpg)
•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
![Page 16: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/16.jpg)
High Fidelity Wireframes
![Page 17: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/17.jpg)
High Fidelity Wireframes
![Page 18: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/18.jpg)
High Fidelity Wireframes
![Page 19: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/19.jpg)
Storyboards
![Page 20: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/20.jpg)
•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
![Page 21: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/21.jpg)
Storyboards
![Page 22: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/22.jpg)
Storyboards
![Page 23: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/23.jpg)
Storyboards
![Page 24: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/24.jpg)
Standalone Wireframes
![Page 25: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/25.jpg)
•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
![Page 26: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/26.jpg)
Standalone Wireframes
![Page 27: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/27.jpg)
Standalone Wireframes
Wireframe by Tom Watson of Blue Flavor
![Page 28: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/28.jpg)
Specification Wireframes
![Page 29: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/29.jpg)
•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
![Page 30: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/30.jpg)
Specification Wireframes
![Page 31: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/31.jpg)
Specification Wireframes
![Page 32: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/32.jpg)
Sketch Style Wireframes
![Page 33: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/33.jpg)
Sketch Style Wireframes
Balsamiq.com - Balsamiq Mockups
![Page 34: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/34.jpg)
Sketch Style Wireframes
Konigi.com OmniGraffle Sketch Stencils
![Page 35: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/35.jpg)
Thank you!
![Page 36: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/36.jpg)
Thank you!
Come to our party tonight, we’ll get you drunk!
![Page 37: Wire Frames for the Wicked](https://reader034.vdocuments.us/reader034/viewer/2022050815/54673977b4af9f583f8b5716/html5/thumbnails/37.jpg)
?Questions?