Wireframes

Definitions

A wireframe is a schematic or other low-fidelity rendering of a computer interface, intended to primarily demonstrate functionality, features, content, and user flow without explicitly specifying the visual design of a product. Wireframes may function as interface specification for products such as computer applications, web and mobile sites, and all products requiring some form of human-computer interaction.

While wireframes are considered the equivalent of an architect's blueprints, they are typically not meant to be a representation of visual design. They are usually created prior to or in parallel with the visual design of a product, and are created in an iterative fashion, typically by information architects, interaction designers, programmers, and occasionally even product managers.

Wireframes are usually rendered in software, but are also created as works on paper or on other ephemeral materials, e.g. white boards. Wireframes are meant to be used as rough representations of interface ideas that can be quickly discarded and iterated upon until design solutions are selected. To focus wireframes on functionality, many designers use the lowest fidelity rendering they can create in order to avoid discussion of visual design direction at this stage of the process. Sketches are usually the lowest fidelity that can be presented, and sketch-style wireframes created with wireframing software have also emerged as a viable alternative for creating these documents.

The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimensional shape and volume. Artists who sculpt with soft materials use metal wire armatures to frame forms before layering with other media. Similarly, 3D graphic artists use digital wireframes before rendering surfaces on characters, objects, and landscapes.

James Kelway wrote an excellent summary of what wireframes are and are not, in his article and presentation, "The what, when and why of wireframes." Kelway's article includes the slides and audio of his presentation delivered via Slideshare.

Definition from other sources

A wireframe is a visual illustration of one Web page. It is meant to show all of the items that are included on a particular page, without defining the look and feel (or graphic design). It's simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work.

Source: "Define the Information Architecture." Usability.gov.

A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in web design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of 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.

Source: "Website Wireframe." Wikipedia.

Also known as: page schematics, page architecture, blueprints, scaffolds

Software

See Also