Using Fidelity and Form in Wireframes

Wireframes are only effective if they are presented at the right time to the appropriate audience. Here are some quick tips to help ensure their form fits their function:

Paper Sketches

One of the most enjoyable parts of the wireframing process for me is sketching with pencils, pens, and markers on paper. Starting the process offline gives me license to try out new ideas without the perception of finality digital wireframes seem to carry. It also gets me over the hump of just getting something — anything — down.

Sketches are perfect if you want to communicate a general direction to some internal team members without getting mired in details. Even if you have some moderate detail in the sketch, the fact that it’s “just a sketch” will help prevent it from feeling too final. They are not the right fit if you want your team to be able to visualize anything very specific about the site or app, especially if they don’t include any content.

Check out these examples on Flickr for more on paper sketches.

There are tools out now like Balsamiq that lend the informal feeling of sketches with the convenience of digital editing. These might be a good fit for you if you find paper sketching frustrating or you’re working on a very tight knit team where constant communication ensures clarity throughout the project.

Low Fidelity Digital

One of the most common lo-fi digital wireframes are referred to as gray box wireframes. These wireframes use gray boxes (no surprise there) to mark out the ways the site’s real estate will be allocated. There usually isn’t much copy or final content, and so they rely on notes and documentation to indicate would go into each box. Some elements like search boxes, main navigation tabs, and headers are usually in place to help make sense of it all.

Lo-fi wireframes are good to use if you need to present a general concept or direction to a client or higher-up who feel sketches are unprofessional. I’ve made the mistake of presenting sketches to clients who would have taken better to lo-fi digital wireframes. Sketches can end up having a higher level of detail than lo-fi digital wireframes but end up being perceived as less  official because they don’t carry the weight of the digital medium.

In the same way that sketches “get something down,” grey box wireframes can help you start the process to higher fidelity. By giving the wireframe some general shape, you impose constraints on yourself. This does wonders to focus your energy and give you license to think about the next level of detail.

High Fidelity Digital

These wireframes can get a bad rap because they’re sometimes seen as too official. A high fidelity digital wireframe involves a great deal of detail and ideally incorporates a rough draft of the actual copy for the site. It also has careful documentation that explains each element because the higher level of detail creates more opportunity for elaboration (see 3 Obstacles when Presenting Wireframes for related issues). It’s important to note here that some people include graphic design in their high fidelity wireframes, but I’m not referring to that type of design-hybrid document here.

The real risk with high fidelity wireframes comes when they are made and presented prematurely. For example, if the site will have a social aspect and the detailed wireframe implies a wide range of specific features for people to interact, then the development of those features needs to be necessary, possible, and in scope. The more detail on the wireframe, the more is implied about content, development, layout, and interaction. Waiting to use these features in the wireframes until the details are actually worked out will prevent lost time and energy.

Although I separated these out into three distinct categories, don’t be afraid to experiment. I’ve had projects where the most effective solution was to scan sketches of certain elements in and place them within otherwise high fidelity digital wireframes.  There are no hard and fast rules, so have fun with it!