Wire Frames for the Wicked

Wireframes for the WickedMichael Angeles, Nick Finck and Donna SpencerMarch 16, 2009

Use #wickedwire when commenting on twitter

SXSW Interactive 2009 - Austin, TX

http://www.bizjamseattle.com/schedule/entrepreneurial-success-by-design/

http://www.bizjamseattle.com/schedule/entrepreneurial-success-by-design/

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

What is a Wireframe?

Who are they for?

•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

What is the process?

Moving from Sketching to Wireframing

Adaptation from Sketching the User Experience by Bill Buxton

Types of Wireframes

•Reference Zones

•Low Fidelity

•High Fidelity

•Storyboards

•Standalone

•Specification

Types of Wireframes

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

Reference Zones

Reference Zones

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





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

Storyboards

Storyboards

Storyboards

Storyboards

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




Wireframe by Tom Watson of Blue Flavor

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




Sketch Style Wireframes


Balsamiq.com - Balsamiq Mockups


Konigi.com OmniGraffle Sketch Stencils

Thank you!

Thank you!

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

?Questions?

Wire Frames for the Wicked

Documents