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.

Types and Levels of fidelity

Wireframes can have varying levels of fidelity. More granular descriptions of these might fall into these categories:

Page Zones

Contains a rough representation of contents or modules (blocks) within a view, often indicated with only boxes and labels. Also referred to as Page Zones, Zone Diagrams, Schematics, Thumbnails, High-Level Wireframes (where pages refer to screens and views), and more.

Detailed Wireframe

Contains more detail than page zones, including labels on interface elements, sample content and media (or placeholder media), and can contain annotation and illustration of flow.

Flow Diagram

Contains a representation of views with lines and arrows indicating flow (user and system) within the view or between views.

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, page zones, blueprints

Software

Note: I work for Balsamiq. While I started this list before joining Balsamiq, I still maintain it for people researching their wireframing/interface design options. I only use Balsamiq Mockups now. I believe it's the easiest tool to use, and solves the problem of early-stage ideation on Agile projects in a way that makes sense, particularly when your goal is to find the right design and jump directly to code to test your ideas. That said, I respect all opinions and situations, so all of the tools I am familiar with are listed below so that you may find the one that fills your particular need.

It's interesting to note that this list seems to grow as fast as products die out, and many of these are clones. I have started striking the ones that are no longer around. Please be aware that some are no longer being actively developed, but are still available.
-Michael

Templates and Support Files

See Also