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.
Levels of fidelity
Wireframes can have varying levels of fidelity. More granular descriptions of these might fall into these categories:
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.
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.
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, scaffolds
- Axure RP Pro (Windows)
- Balsamiq Mockups - Rapid wireframing tool to create sketch-style wireframes. May be embedded in a CMS. (Windows, Mac, Linux, Web App)
- Cacoo (Web App) - Online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts.]
- Concept Draw (Mac and Windows)
- Connect-A-Sketch - Create click-through prototypes from images.
- Fireworks (Mac and Windows)
- Flash Catalyst (Mac and Windows)
- Illustrator (Mac and Windows)
- InDesign (Mac and Windows)
- Easy Prototype (Mac and Windows)
- Denim - A complete sketch-style tool for rapid prototyping using sketched wireframes. A UC Berkeley/Univ. of Washington project.
- Eclipse with Wireframe Sketcher Plugin
- Expression Blend (Windows)
- Flairbuilder (Mac and Windows)
- FluidIA - An open source agile UI prototyping tool.
- ForeUI - Full-featured interactive prototype builder. (Mac and Windows)
- HotGloo - Allows you to create interactive wireframes with review annotation and PNG export features.
- iPlotz - Web service for creating and managing sketch-style wireframes and rapid protypes.
- iRise (Windows)
- Lovely Charts - Wireframing and flowcharting.
- LucidChart - Rapid prototyping/diagramming tool. Web-based. HTML5-based tool to create interactive website/UI prototypes.
- Lucid Spec (Windows)
- Lumzy (Web App) - Online sketch-style mockup tool.
- MockFlow - Create click-through wireframes, add comments, export to PNG or PDF.
- Mockingbird - HTML/JS/CSS based tool to create click-through wireframes.
- Mocklinkr - Create click-through prototypes from static images.
- Mockup Screens (Windows)
- Napkin Look & Feel (Mac and Windows)
- OmniGraffle, by OmniGroup (Mac OS) with Konigi Wireframe Stencil, Sketch Stencil Icons, UX Template, Wireframe Icons, and Yahoo! Design Stencil Kit
- Oversite (Mac and Windows)
- Pencil (Web App)
- Pidoco (Web App)
- PowerMockup - Wireframing Stencils for PowerPoint
- Protonotes - Allows users to annotate HTML prototypes.
- Protoshare - Service for creating, annotating, and managing wireframes and prototypes, as well as generating spec.
- Serena Prototype Composer (Windows) - A full-featured project application for specifications, modeling, prototyping, and project management.
- Prototyper, by Justinmind (Windows)
- SmartDraw (Windows)
- Visio, by Microsoft (Windows) with GUUUI Prototyping Tools, and Yahoo! Design Stencil Kit
- "The what, when and why of wireframes." James Kelway.
- "Rapid Prototyping Tools." Dan Harrelson."
- "WireFrames." IaWiki (via archive.org).
- Videos from "The Right Way to Wireframe" presentations.
- protomoto -- Resource for finding prototyping and wireframing tools.