Netpack Project Summary

User Interface Wireframe Sample document

What is a UI Wireframe?

An interface wireframe, often called a "paper prototype", is a quick and dirty sketched idea for an interface. I usually create wireframes in Word, so they can be quickly changed and so I'm not tempted to worry much about fonts and colors.

What is it used for?

Wireframes can be created, changed, or trashed quickly and painlessly. They can be shown to users, team members, and clients, as long as everyone understands that they aren't meant to show visual design ideas such as color or typography.

Visual designers can use these rough sketches as starting points for screen designs; the wireframe acts as a kind of visual inventory of the information and functions needed on each page. Most people, including users, clients, coders, and designers, can spot problems or misunderstandings about an interface much more quickly on a basic UI wireframe than they can in a lengthy Functional Requirements document or half-erased whiteboard drawing.

Also, functionality which can be difficult to explain in text (such as the grouping of search results into facets shown here) is clear in a simple UI wireframe.

Why create UI Wireframes?

Because it's faster and easier to change a paper-based interface idea than an HTML-based one. Beloved visual designs and complex HTML page layouts can be difficult to overhaul later in the design process.

Back to the NetPack Case Study