the right way to wireframe

In the UX field: no one shows their work! So Todd and Russ are here to show us everything they do when they build a design project. Has anyone seen a wireframe from Jesse James Garrett, Peter Morville, or Jared Spool?

If you are arguing about the differences between wireframes and prototypes or the best tools (OmniGraffle, Visio, Fireworks, Balsamiq Mockups, Axure), you are missing the point. The best tool / model is the one you are most comfortable with and the one you can produce the best output with. The idea is to communicate your concept to someone else, period.

Requirements. Research. Audience. [Content Strategy?]. Concepts (sketch). Wireframe/Prototype. Visual Design.
[ session description ]

Presenter(s)

Todd Zaki Warfel @zakiwarfel

Russ Unger @russu

Date

13 March 2010

Tag(s)

#rightwaytowireframe1

#rwtw

Books

Prototyping (Zaki Warfel)

Project Guide to UX Design (Unger)

Videos

Will Evans

Russ Unger

Todd Zaki Warfel

Playlist from ixd10

1 problem. 4 guys. No talking. 4 tools.

The problem

Tori Tuncan and lend4health.com. Very small nonprofit. Tori started making microloans to people who have children with health issues. She needed a platform/method to handle a larger volume of lenders/borrowers.

Persona to Wireframe

Requirements analysis. Personas. IA (sitemap–”He who owns the sitemap owns the project.”). How are things connected? Typed (not font). User paths through sitemap as sketches. Sketching before using any tool is cruicial. Sketch sketch sketch.

Turn user path sketches into wireframes for locations on sitemap (used balsamiq mockups tool). Hand off to designer (who you have involved in the conversation throughout the process).

Research to Prototype

Existing research. Guerilla remote observation. Put research into a framework package to tag data points and then output onto post-its. Start with major themes and sort data points around themes. Personas based on data. Explore concepts with sketches (6-up adaptive path, 8-up). Pitch concepts and get critiques: re-sketch/repeat. HTML/CSS Prototyping [ round 1/2 in greyscale, round 3/4 full by visual designer ].