A wireframe is a simple line drawing depicting the layout of a website before any decoration is added. It is typically the next step in site design after site mapping. Designers use this bare-bones presentation to show clients or other stakeholders how page elements will relate to one another and function. It outlines size, placement and orientation of every part of your Web page.
As the name suggests, a wireframe is the design's skeleton. Once the layout of the wireframe is finalized, designers add all the flourishes and effects that make a Web page look like a Web page - choosing color schemes, images and logos, then overlaying them atop the wireframe like a paint-by-numbers painting.
While designers are often eager to play with color and form, and stakeholders are equally eager to see their website designs in full color, wireframing is an opportunity to try multiple and mutually exclusive layouts in a form that is easy to work with or tear apart. The generic presentation is an asset to this process, as it takes a great deal less time to draw a wireframe than a fully realized design. An experienced designer is able to wireframe all the major pages of a website in a fraction of the time she would take to create a single full-color concept.
By the time a design team reaches the point of wireframing, it should already know everything that will be included in the site architecture:
While a website's design will continue to evolve, the entire team should already be in agreement as to what the site needs to serve the user.
Wireframing is meant to solidify a site's functionality and layout. Study the wireframe and determine whether the most important site functions are prominent and easy to use.
Some companies begin user testing at the wireframe stage - bringing in outside subjects and giving them a series of tasks to perform. For instance, if a subject is unable to find the shopping cart on a wireframe, it may need to be resized or moved to make it more obvious.
Once a wireframe is approved and agreed upon, the site layout should be locked. Major changes made in subsequent design steps will cost more time and money.
Resist the urge to add content to wireframes. They should be entirely content-free so as not to distract from studies of form and function.
Other best practices for wireframing:
Wireframes are the foundation of good design. They encourage experimentation and promote innovation. Once the blueprints are drawn, experimentation ends.