In web design, wireframing is the process of creating a basic sketch of the website’s user interface, without skins or graphics. It is conceptually similar to using an outline or graphic organizer in writing, and is an invaluable part of setting up a high-quality website. By stripping away the graphics, wireframing forces a designer to work on the user interface itself, rather than the website’s appearance. In other words, it pushes the designer into creating a website that works well, rather than a nonfunctional website that looks good. With wireframing, web design focuses on user needs first, creating a site that allows users to easily and seamlessly access features.

Properly used, wireframing offers many advantages.

• Wireframing allows the designer to look at how each user interface component fits in the overall scheme of the interface. Without wireframing, it is easy for the designer to get caught up in patterns and colors, undermining the website’s accessibility.

Strategy over appearance:

• Everyone involved in the design process has an opinion about the site’s appearance, and it is easy to waste time and energy debating looks. With wireframing, everyone’s attention is on strategic design decisions, not the specific shade of blue to use for the background.

Ability to justify UI design decisions:

• Once the design moves into skinning and prototyping, there will inevitably be uninformed criticism. Wireframing allows the designer to carefully consider the value of each UI component, giving him the knowledge needed to counter such critics.

Ability to make UI design changes:

• With visual components already in place, even the slightest change to page structure can turn into a massive hassle. Moving one piece may require reformatting the entire page. Conversely, moving pieces around in a wireframe is quick and easy.

Getting started

Just as for writing, wireframing a web design can be as simple as sketching a graphic organizer on a piece of paper. Graphing paper is an easy and affordable option that helps making straight lines and keep everything in proportion. Wireframing software is also available, with programs such as MS Visio for Windows or OmniGraffle for OS X. Web designers can also opt for web-based tools such as Mockingbird or Balsamiq Mockups. Regardless of the method used, wireframing not only improves end results; it also makes the design process flow more easily. There is very little waste of time when every step is focused on one shared goal, as laid out in a wireframe.

Summary:

Anyone who frequently goes online knows that thousands of websites prioritize form over function. The Internet is littered with flashy sites that have terrible user interfaces, and most often the culprit is a lack of wireframing. A good wireframe allows the web designer to plan his work carefully, focus on interface instead of graphics, and ultimately create a user-friendly website. By working with a client on a wireframe before switching to Photoshop, web designers can make themselves, their clients and their users happier.