Wireframing in Web Design

After a discussion that happened here about an inquiry for a wireframing tool I thought that it might be a good idea to post an article about Wireframing in Web Design.

You might have heard the term Wireframing and/or Prototyping in web or application design/development or you might not. For those of you who haven't heard this term so far here is the explanation for you:

Wireframing: Wireframes are a basic visual guide used in web design to suggest the layout of fundamental elements in the interface. Because of this they are often completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page. Wireframes also allow for the development of variations of a layout to maintain design consistency throughout the site. This is an important part of the initial development stage because it creates user expectations and helps to develop an awareness of and familiarity with the site. Wikipedia

In some cases you'll come to a situation of creating a skeleton for a website/web application in which your developer and your designer must coordinate their work in order to reach a very premature stage of the project. That premature stage is going to be your wireframe.

Wireframes' purpose is to present the hierarchy of how things are going to work when the project is done or how the content is going to be distributed in real life. In some cases wireframes are useful to simulate common tasks of user interaction or even perform tests for certain actions such as user login or password recovery etc. Also they might be used for planning and comparing different approaches of the website's navigation. The list can go on for a lot of things but I think you got the point.

When you start an new project from scratch the risk of falling into pitfalls is really ahead of you. This might not be bothering when working as an individual but imagine that the whole team of yours falls into pitfalls over and over again not because their not doing their work well but because things don't work out well every time or because of some misconception between you and your client.

So you might start getting the idea of using wireframes. A good question might be "How do you create a wireframe?". You can create a wireframe with either a tool (check the list at the bottom of this post) or with you bare hands and your web design tools you use daily. Remember that a wireframe doesn't have to be eye candy or of great design concept but has to present the overall user interaction with the user.

Interesting stuff:

Articles:
Usability.gov
Designing interactive products with Fireworks
Quick and Easy Flash Prototypes

Web Design Wireframing Tools:
Axure
Pencil
Photoshare

Videos
Comp and Wireframing - Web Usability
Usability Testing