One of my favorite sessions at Bay Area Drupal Camp this year was "Wireframing Smarter," presented by Garret Voorhees.
A wireframe is a blueprint that shows the bare-bones layout of a webpage. It shows where the navigation, content area, banner images, etc. go in a sparse, clean format that focuses on function rather than the form you see in design mockups. This shows an example of a wireframe, courtesy of Voorhees' presentation.
Wireframing allows designers to focus on the usability of a website before jumping into design. The first step of wireframing is usually scribbling pen on paper, and then translating those scribbles into a graphic layout program. The layout is in black and white, with a little blue to indicate links, and is quite simple. While reviewing wireframes, the client is asked to focus on the placement of elements on the page and functionality. The designer can ask the client to point to elements on a page to indicate a click and then show the page that would result from that click.
Once a wireframe is approved by the client, the designer begins to design, based on information in the wireframes.
In my opinion, there are pros and cons of the wireframing process, depending on the particular website project.
Pros of wireframing:
That said, there are reasons I've skipped wireframing and gone straight to design in the past: