Use Wireframes to Build a Development Plan that will Future-Proof your Web Site


Wireframing is the skeleton of every click on the site. This is a “bare-bones” prototype of your site.

XHTML/ CSS form a streamlined path to wireframing a site. When the XHTML is developed with semantic markup, the operation of the site, as text-only shows exactly what the experience of the site structure will be like.

This wireframing process future-proofs a site because planning and design decisions can be tested before time-consuming, costly graphic design development has to be redone.

The wireframe answers the questions...

  • How do I know where I am?
  • How do I know where I am likely to go or should go next?
  • How do I know how to get back to where I was?

Wireframing is different than storyboarding. Storyboarding contains the graphic elements, wireframing does not. Link to Storyboarding Page on this site.

Storyboarding needs to follow wireframing in the site development process because the navigation and concept flow of the site is more granular (basic) than tracking the content of the site.

With Wireframing, designers identify various types of visitors, and even objectify these into artificial user types called "personas."

The Wireframe tracks the path of these visitors from any landing page through the site, to the most wanted response (or visitor action page).

Of course, this level of design is not often used on school district Websites, but should be.

Wireframing examines the structure of the site, and answers, “What” the visitor will do. Storyboarding answers the question, “How.”

Tools for Prototyping and Wireframing

Wireframing is often paper-and-pencil intensive, with blank paper, note cards, and sticky notes being the tools of choice. Automated design tools are difficult to use because of one tiny little issue: it is troublesome to keep redrawing the connecting lines when the diagrams are redrawn.

Of course, it is possible to develop wireframe maps with a high end Mind Mapping product such as Mind Manager™, but this software has the habit of reconnecting the lines where it wants as you move the diagrams across the page.

A better solution is a product such as ConceptDraw WebWave.

ConceptDraw WebWave not only allows connecting the wireframe with lines that stay stuck when the diagram is moved, but this software also can create diagrams of existing Websites, including links to other files (images, documents, movies, etc.).

Here is a link to the trial copy of the ConceptDraw WebWave software that is available on this site. (With Windows Xp™, select the setup.exe file.

Here are links to more planning information on this site.