Design Prototyping Fidelity
Date: Friday, September 19
Time: 3:30 - 4:20PM
Location: 1A21 & 22
Track: Design & UX
Tags Design & UX
A discussion on three types of wireframe that have worked well in most situations:
Low Fi
Medium Fi
HiFi
Low Fidelity
Low Fidelity is created using XHTML—the real strength here is in the mark-up itself. There are a lot of advantages to properly marking up your elements to help streamline the understanding of visible elements. Lane use the code as a place to store meta information about the content itself. When rendered he keeps everything in a top-to-bottom listed format.
The Medium Fidelity Wireframe
This is the classic interpretation of the wireframe, simple black and white boxes with labels, an effective way to portray information to all the stakeholders involved. Something nice about medium fidelity is the ability whiteboard or sketch the concepts quickly in various mediums. The challenge is when you start putting too much time into a medium fidelity wireframe effort. It’s hard to know when a simple pencil sketch is actually a better solution then trying to recreate the sketch in Visio, Illustrator, or whichever tool you choose. There are a lot of ways to do the same thing with many different tools, but some do a much better job than others. When is it best to use it? When you really need to show how the information is visually arranged to help tell the story. Sometimes a list of all the elements isn’t going to be the strongest way to showcase the concepts. However, this is still an effective way to not get too busy and get in the way of the overall goal which is to be a simple representation of what your web site or application could look like.
The High Fidelity Wireframe
This is when you need to tell the whole story. It’s very close to creating the actual look and feel of the final deliverables being created. In fact, you should be able to create a site or application using these wireframes. This level of wireframe is much more closely aligned with something created by the interaction designer. The big difference here is that it’s still just a static representation. The interaction designer or developer would be responsible for creating the functionality in place.
Comments
Great session. I think that you talked about designing on paper a bit too much and overlooked some other simple tools for design. however, the talk was informative and you kept the attention of the audience.
Not enough examples how to design a web ou mobile site. It would have been nice to learn more methods, tools.





Glad to see so many people interested already. Just to let you know, this session is going to be a little more like its Title and a little different than the its Description. We'll talk about wireframe fidelity, but we're talking about and showing examples of a more broad set of prototypes.
A few things we'll cover:
3 rules for finding the right level of prototype fidelity.
Several aspects/facets of a prototype that can have different levels of fidelity.
Lots of examples of prototypes we've done, what went well, and what we could have done better.
And we'll provide a bunch of prototyping resources that we won't spend time on in our presentation--we're keeping it tightly focused on fidelity.
Thanks, and I look forward to meeting you all on Friday if not before.
Matthew deStwolinski, co-presenter