Website development starts with intense conversations about what the site should look like and what it should do to meet the desired goals. Typically several people on the client’s end are tasked with describing what the company’s needs are from each of their perspectives and to ensure nothing critical is missed by the web developer. At the other side of the table, the web development team will ask many, many questions first to understand the company’s needs and then to make sure the site’s functions are clearly defined. After these conversations, a site specifications document is drawn. The web developer writes out what the site will contain in as much detail as possible.

For simple sites, the next step is to design the look and feel. For more complex sites, the next step is wireframing.

WHAT IS A WIREFRAME?
A wireframe is a visual representation of a web page without taking into account actual design elements. See the figure below.

Immediately you get a good idea of what the content of the page will be like and roughly where on the page it might be placed. You don’t know what colors will be used, or what the chosen images will evoke, or whether the buttons will have a 3D look or not. The purpose of the wireframe is to show what elements will go into the page, what their nature will be (link, image, pulldown menu, scroller, etc.), and the function they will eventually perform.

WHY USE WIREFRAMES?

1. Decrease the gap between the written specifications and the actual design. Wireframes help create a common language between the non-technical and the technical participants in the project. It’s much easier to show the image above and point towards the bottom of it than to say or write: “the home page will include a scrollable area of random content blocks which can contain text, images, or video.”
2. Protect the budget and the timeline. Wireframes reduce surprises. Miscommunication or mistakes are quickly spotted and rectified much earlier and much easier.
3. Provide an inventory of elements and functions that go into the page. It’s easy to make a long list of everything wanted on the home page. It’s not as easy to lay out those elements in an organized way, making sure there is still enough white space on the page. Wireframes make it obvious whether the page is getting crowded or if it needs more content.
4. Communicate the type and depth of content. Wireframes communicate very quickly if the intention is to have one large image or several smaller ones; 2 paragraphs instead of 6, 7 buttons instead of 5, and so forth. Many members of the team gain important information. Writers get an approximate word count, designers realize how many (or few) images they need to search for, and everyone realizes what content exists already and still needs to be developed. The image below quickly shows a video is needed.
   
5. Show click through without having to spend hours programming. See the 2 images side by side below. It’s much easier to show these than to say or write: “the user can interact with multiple filters to get narrowed down search results from the consultants directory with automatic pagination.”
   
   

WHEN TO USE WIREFRAMES?
We started by saying that more complex sites benefit by the use of wireframes. What do we mean? What turns a site from “simple” to “complex”?

1. When there are processes involved. If users need to click through a few steps to get the data they need, a wireframe makes sense. Before programmers spend time making things functional, the client can experience the process and determine if it’s intuitive enough.
2. When there are multiple ways of getting to the same content. In large websites, content is sometimes offered in different ways since users have different ways of looking for it. Wireframes show these different displays before too much time and money are invested.
3. When different audiences get different content. Wireframes will help the client put himself in the shoes of each audience type and see how the site will be experienced.
4. When home pages are really more like dashboards, such as in the case of intranets or password-protected member areas. Wireframes help organize the content into logical placements. See the image below as an example.
   

HOW ARE WIREFRAMES CREATED?
Wireframes are not created from scratch… or they would take too much time. There are software programs, many of them online, than provide drag-and-drop ways to quickly create these sketches. Standard web elements are included. Want to show a search area, just drag the search widget into the canvas. Want to show a video player, just drag the video widget into the canvas. Almost everything you need is available, and, when it’s not, you can import your own graphic. At mb/i, we use iplotz.

In summary, a wireframe is a preview that can save a significant amount of both time and money during the development process. It’s a communication tool that ensures both the client and the web developer are truly on the same page.