A look at wireframing and paper prototyping.
What is Wireframing?
As Daniel M. Brown says in Communicating Design: Developing Web Site Documentation for Design and Planning (2nd edition) (Page 166),
Wireframes describe the contents of a web page and their relative priorities. They help the project team envision the functionality and behavior of different screens, or more commonly, different screen templates. Most renditions of wireframes are laid out to look like webpages.
But it’s more than that. It’s also about understanding user behaviors. What are the use cases? What does it mean when something has the color red, or is larger?
The Importance of Wireframing in Creating Websites
For web designers and for the eventual users of websites, a mockup is necessary in order to get an initial feel for the development to come.
Wireframing puts together designers’ and coders’ ideas of what users might want. By asking users to review and show how they would use the proposed site, designers can determine whether there are use cases they are missing. Further, they can see if the design is too difficult for the average user to understand and navigate. Or if creates, rather than diminishes, user frustrations.
As Jen Gordon says in The Mobile Design Process,
Much like any design or illustration process, having iterations of your design allows you to explore a wider variety of design options to a deeper degree.
You can make these iterations with wireframing and paper prototyping, used together. Paper prototyping is generally for the initial idea of where certain elements go (e. g. where is the logo placed?). And it’s for iterating several versions of the design.
Wireframing then comes in, when more of the design is set. Now, the changes are less in terms of what goes where, and are more along the lines of color, shape, size, and verbiage.
How Wireframes Differ From and Relate to Website Page Design
Wireframing is something of a subset of webpage design. The overall idea of design is not just the look and feel of a site, but also what’s going to be in it, and the basic idea behind it. Wireframing takes those background pieces of information and puts them into a logical order and adds or subtracts emphasis. But wireframing can’t happen until the designer knows what is supposed to go into the actual website.
The Relationship Between Wireframes and Paper Prototyping
As Dr. David Travis says in 7 Myths about Paper Prototyping,
Wireframes show a skeleton view of a user interface. They identify the areas of the screen where content will appear, such as images, text and navigation. Wireframes often include call-outs and notes explaining certain elements of the design in more detail. They are a useful communication tool for design agencies who want their clients to sign off on a design without getting hung up on the colours and images displayed in the user interface.
With paper prototyping, you can easily move elements around. Users can often relate better to paper, and the effort and skill needed to put a basic rough sketch on paper (even when the lines aren’t straight) are less than those needed for wireframing. Paper prototyping, in general, is a quick and dirty solution. It’s a thumbnail sketch, quite literally, of what the site is supposed be like.
Furthermore, paper prototyping is a way to get all of the members of a team to be able to contribute equally. You don’t need to understand or have even heard of visual design software in order to sketch a few rectangles, circles, and arrows; cut out shapes; and add verbiage as needed.
What is Paper Prototyping?
One company that understands the virtues of paper prototyping is The Mathworks. They used paper prototyping when creating GUIDE for MATLAB 6.
Mary Beth Rettger, in Task-Based Utility for Software Upgrades said,
The concept of prototyping a solution is well understood. The problem is that code is expensive to write, and all too often a “prototype” takes so long to develop that there is no time to get feedback on the idea. As a result, the prototype simply becomes the product. Paper prototyping provides an alternative that is cheaper, faster, and more effective for the purposes of ensuring the final product meets user needs.
Ms. Rettger’s explanation is simple and practical. Why spend months on making a working prototype, when you can bang out paper prototypes in perhaps a week? You can alter, add to, or subtract from that same paper with ease. When following iterative website development methodologies, paper prototyping is the only way that makes any sense.
As you add or discard ideas, or they morph into new ideas, the paper prototypes change. You use more sheets of paper and the design readily evolves. As a result, when it’s time to make a true working prototype, a lot more information is available to the designer.
When Do You Use Each Method?
In A List Apart, Shawn Medero wrote,
“Where does paper prototyping fit into the design process?
There are two dominant uses:
-
The design team uses paper for their presentation to a larger group of people who have a vested interest in the product.
-
Users run through a set of existing paper mock-ups or are given blank paper and asked to represent a concept by sketching it.”
Potentially, the presentation of a paper prototype is a means for the design team to initially communicate with project stakeholders, including persons at the vice presidential level or even the board. For smaller companies, the audience might even be the owners and/or founders of the company, or even the investors.
With a paper prototype, you can put a meeting together quickly, as you can put the design and mockup together quickly, too.
The place for wireframing is in a subsequent meeting. The stakeholders are closer to being convinced. And they have a good idea of what the site is going to look like. They have a good idea because the designer does, and using a paper prototype gives the designer and the stakeholders that very idea.
Paper prototyping is built for speed. Wireframing is for providing users with more sophisticated visuals. Both are integral to successful user-centered design.