Top Banner
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
37

Wireframes for the Wicked

Aug 17, 2014

Download

Technology

Nick Finck

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Wireframes 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

Page 2: Wireframes for the Wicked

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: Wireframes for the Wicked

What is a Wireframe?

Page 4: Wireframes for the Wicked

Who are they for?

Page 5: Wireframes for the Wicked

•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: Wireframes for the Wicked

What is the process?

Page 7: Wireframes for the Wicked

Moving from Sketching to Wireframing

Adaptation from Sketching the User Experience by Bill Buxton

Page 8: Wireframes for the Wicked
Page 9: Wireframes for the Wicked

Types of Wireframes

Page 10: Wireframes for the Wicked

•Reference Zones

•Low Fidelity

•High Fidelity

•Storyboards

•Standalone

•Specification

Types of Wireframes

Page 11: Wireframes for the Wicked

Reference Zones

Page 12: Wireframes for the Wicked

•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: Wireframes for the Wicked

Reference Zones

Page 14: Wireframes for the Wicked

High Fidelity Wireframes

Page 15: Wireframes for the Wicked

•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: Wireframes for the Wicked

High Fidelity Wireframes

Page 17: Wireframes for the Wicked

High Fidelity Wireframes

Page 18: Wireframes for the Wicked

High Fidelity Wireframes

Page 19: Wireframes for the Wicked

Storyboards

Page 20: Wireframes for the Wicked

•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: Wireframes for the Wicked

Storyboards

Page 22: Wireframes for the Wicked

Storyboards

Page 23: Wireframes for the Wicked

Storyboards

Page 24: Wireframes for the Wicked

Standalone Wireframes

Page 25: Wireframes for the Wicked

•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: Wireframes for the Wicked

Standalone Wireframes

Page 27: Wireframes for the Wicked

Standalone Wireframes

Wireframe by Tom Watson of Blue Flavor

Page 28: Wireframes for the Wicked

Specification Wireframes

Page 29: Wireframes for the Wicked

•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: Wireframes for the Wicked

Specification Wireframes

Page 31: Wireframes for the Wicked

Specification Wireframes

Page 32: Wireframes for the Wicked

Sketch Style Wireframes

Page 33: Wireframes for the Wicked

Sketch Style Wireframes

Balsamiq.com - Balsamiq Mockups

Page 34: Wireframes for the Wicked

Sketch Style Wireframes

Konigi.com OmniGraffle Sketch Stencils

Page 35: Wireframes for the Wicked

Thank you!

Page 36: Wireframes for the Wicked

Thank you!

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

Page 37: Wireframes for the Wicked

?Questions?