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:
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
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.
- Antetype (Mac)
- Axure RP Pro (Windows)
- Balsamiq Mockups - Rapid wireframing tool to create both sketch-style and traditional 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. COutline
- Denim - A complete sketch-style tool for rapid prototyping using sketched wireframes. A UC Berkeley/Univ. of Washington project.
- Draw.io (Web App)
Easy Prototype (Mac and Windows)
- Expression Blend (Windows)
- Fireworks (Mac and Windows)
- Flairbuilder (Mac and Windows)
Flash Catalyst (Mac and Windows)
- FluidIA - An open source agile UI prototyping tool.
- Fluid UI (Web App)
- ForeUI - Full-featured interactive prototype builder. (Mac and Windows)
- Framebox (Web App)
- Gliffy (Web App)
- HotGloo - Allows you to create interactive wireframes with review annotation and PNG export features.
- Illustrator (Mac and Windows)
- InDesign (Mac and Windows)
- Infragistics Indigo Studio (Mac and Windows)
- iPhone Mockup (Web App)
- iPlotz - Web service for creating and managing sketch-style wireframes and rapid protypes.
- iRise (Windows)
- Justinmind Prototyper (Windows)
- Lovely Charts - Wireframing and flowcharting.
- LucidChart (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 Creator (Windows)
- Mockup Builder (Web App)
- Mockup Screens (Windows)
- Mockup Tiger (Web App)
- Moqups (Web App)
- Napkin Look & Feel (Mac and Windows)
- OmniGraffle (Mac OS)
- 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.
- SmartDraw (Windows)
- UXPin, formely JustProto (Web App)
- Visio, by Microsoft (Windows)
- Wireframe Sketcher Plugin (Mac and Windows, also as an Eclipse plugin)
- Wireframe|cc (Web App)
Templates and Support Files
- Konigi Wireframe Stencils for OmniGraffle
- EightShapes Unify
- Extjs Wireframe
- Social Wireframe Elements, by UX Array
- “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.