What is a wireframe, and why is it important?

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 map.

Wireframing basics

By the time a design team reaches the point of wireframing, it should already know everything that will be included in the site architecture:

• Navigation and sub-navigation labels

• Applications such as shopping carts, wish lists or social media plug-ins

• Functionality such as drop-down menus, slide shows or animation

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.

Wireframing tips

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:

• While they can be drawn by hand, it is better to use an illustration program (e.g. Adobe Illustrator). Designers like to move, copy and delete elements on the fly

• Any content area that will contain text should be filled with lorem ipsum - nonsense Latin meant to stand in for actual content

• Images should be represented by a box filled with an X

• Even if a logo has been finalized, fill the logo area with an empty box of the estimated size labeled "logo." You may discover that the logo needs to be redesigned to fit the layout

• Navigation, on the other hand, should accurately represent the site's final navigation. Size, orientation and order may need to be changed if navigation labels don't fit into the given space

• When designing a website, use pixels as your unit of measurement. It is standard for the Web. Many illustration programs have tools for measuring pixels

• Make wireframe dimensions exact, down to the pixel. These dimensions will carry down through every subsequent design step and to the final, coded site

• If your website is responsive, create wireframes for each screen size

Wireframes are the foundation of good design. They encourage experimentation and promote innovation. Once the blueprints are drawn, experimentation ends.