Why Wireframes Are Used in Web Design

By Brad Stitgen

As part of the web design process, it’s common to hear web designers refer to the creation of “wireframes”. If this is the first time you are having a professional website built you may be wondering what exactly wireframes are and if the time, and let’s face it… money is being well spent on such an activity.

A Short History Lesson

The term “wireframe” predates its use in web design. Wireframes were originally created to show 3-D objects in Computer Aided Design (CAD) programs. Objects drawn in this manner consist simply of outlines. With no fill to give the object opacity the drawings appear to be constructed out of wire… hence the name. An example of wireframes in the physical world can be seen every year around the Christmas holidays. The reindeer, angels, etc constructed out of wire and covered with lights are a good example of 3-D wireframes in the physical world.

Wireframes as Used in Web Design

With the advent of web design, the term wireframe has also come to refer to a tool used in the layout and planning of websites. While the wireframes used by engineers represent three-dimensional objects the wireframes used for websites are simply two dimensional. Website wireframes can vary greatly in their construction as well as their level of detail. In their most simple form website wireframes can literally be created on the proverbial “cocktail napkin”, although I recommend using a plain sheet of 8×10 paper (and staying out of bars when trying to create websites!). Commonly referred to as low fidelity wireframing, proponents of this method tout the ease and speed at which their wireframes can be created.

While hand-drawn wireframes are a quick way to get the initial site layout on paper, revisions can get a bit messy and tedious as projects get bigger. Another issue with paper-based wireframes is that they are difficult to share by those not at the same physical location. For these reasons, I recommend using a software-based wire-framing tool for all but the initial design work.

What Wireframes Are… and What They Are Not

The creation of wireframes needs to be done early in the website creation process. Once the discovery phase has been completed it’s time to start laying out the wireframes. At this stage, it’s important to understand that the wireframes serve two primary functions. Their first duty is to help determine the site layout and aid with ensuring a good user experience. Rather than just throwing content on a page it’s important for the designer to make sure site visitors can easily find what they are looking for.

While wireframes depict how a site will be laid out they are not is a literal representation of the completed website. As the name suggests, wireframes simply outline content area’s as if they were created with wire. The typical wireframe is created in low fidelity. By this I mean there is limited use of the actual site graphics. In fact, some wireframe software deliberately try to make it apparent that the wireframe is not to the final product by making it appear as though the wireframe was hand drawn! The point is that wireframes are not a mockup. In fact, the wireframes are used as a guide when creating the mockups.

The second primary purpose of the wireframes is to serve as a communications tool so that everyone on the project understands where the site is heading. This is important. It’s a lot more time consuming (and expensive) to keep having to go back make site changes in the later stages of the project. Using wireframes can help make the whole project progress much more smoothly when everyone can see where the project is heading in an easy to comprehend visual manner.

How Detailed Do They Need to Be?

Depending on the project their complexity can vary greatly. For a simple small business website a minimum of two wireframes, a home page, and a content page are typically recommended. From there the client and designer should have a pretty good idea where the site is going.

For more complex websites involving teams of people, both on the client side and on the designer’s side, more lengthy wireframes are often called for. This is especially true for projects involving non-standard forms and shopping carts.

In the end, it really depends on how comfortable everyone on the team (both client-side and vendor side) with how the site is being laid out. If there are any doubts or fogginess on how the project is progressing it’s always best to map it out on a wireframe to make sure everyone is onboard.

Some Examples of Wireframes in the Wild

The following links showcase some of the many forms wireframes can take. From simple sketches to detailed high fidelity type documents. Which type is right for your project really depends on the scope of your project and the dynamics of your web team.

The Takeaway

Wireframes are an important part of the web design process. They serve two main purposes. Firstly as a planning tool and secondly as a communication tool. Wireframes can take many forms. From a few ultra simple hand-drawn diagrams to numerous detailed pages created by sophisticated wireframing software. To determine which form your wireframes should take really just depends on the dynamics of your team and the complexity of the project.