Wireframes

Computer Science; Graphic Design; Digital Media

A wireframe visually represents the basic elements of a proposed website before a web designer actually builds it. Creating a wireframe ensures that both the designer and the client can agree on the basic layout and functionality of the site. It also allows them to map out how the end user will ultimately interact with the site.

A wireframe is a visual, noninteractive representation of a proposed website. A web designer may use a wireframe to determine how best to lay out the elements of the site. If the site is being designed for a client, the designer may show the client a wireframe to get approval for the final product.

A website is essentially a sophisticated information storage bank. Ultimately, it is designed for the end users, who will need easy, efficient access to the information it contains. To that end, a web designer will block out the basic elements of the proposed website first, most often drawing them on paper. This drawing is the wireframe. Though it may be no more than a set of squares, circles, columns, and lines that represent the individual elements of the pages, it allows the designer and the client to review the site concept together before it is built. Any changes in the website format can be easily made at this stage.

A wireframe also allows the designer to sort the content of the proposed website into an information hierarchy. The designer can then determine how best to arrange it on the page. Part of web design is knowing what information users expect to find and where they are most likely to look for it. Eye-tracking studies have determined that upon accessing a website, a user will first look at the top-left corner of the page, scan across the top, then look down the left side and scan partway across the screen. This essentially forms an F-shape. Thus, crucial information should be concentrated mainly in the upper left portion of the page. Such insights into how users interact with and experience websites are an important part of the design field known as interaction design.

When designing a website, particularly for a business or other organization, certain elements are standard. These elements may include:

The client's logo, to identify the business or organization in a recognizable way

A navigation bar, to provide access to the different pages of the site

A front-page image or slide show of images

A search box

A registration or login box, if the site allows (or requires) users to register

A header containing an index of the major elements of the website

A footer containing contact information, privacy guidelines, and other legal information

Many websites also include external content such as news headlines, weather reports, or social media feeds. In most cases, the creator of this external content generates a portlet or widget that designers can simply plug into the code of the site. While portlets and widgets work in similar ways, they differ mainly in their execution. A portlet is executed on the server, so that the code it generates is not visible to the end user. A widget is executed in the browser.

A wireframe should incorporate any and all of elements that will be included in the final website. In most cases, the wireframe serves as a blueprint, with no distracting aesthetic features such as font, color, or images. The emphasis is on functionality—that is, how the proposed site will accommodate the end user. This type of wireframe is also called a “low-fidelity wireframe.”

Once the client is onboard with the concept, the designer may produce a more sophisticated, high-fidelity wireframe. This type of wireframe is usually created using dedicated software. It represents the final website in much more detail. It incorporates such design elements as images, color schemes, and typography. Sequences of images are used to represent how users will interact with the site. However, the wireframe itself is still noninteractive.

Sometimes, between the high-fidelity wireframe and the final product, a designer will produce an interactive prototype. While a prototype will usually look very similar to the final product, its appearance matters less than its functionality. A prototype should simulate the user experience with the completed website. Prototypes are ideal for early user testing. Any problems with the interface can be addressed before the designer begins coding for the final site.

Much as an architect creates a blueprint for a skyscraper or a director storyboards a film, a web designer uses a wireframe to spot potential problems before building the final product. This saves both the designer's time and the client's money and, ultimately, shields the end user from frustration—all critical factors in the highly competitive world of Internet marketing.

—Joseph Dewey