Reusability – Hand drawing is great for getting ideas down quickly.

Hand-drawn sketches give the wrong impression of flexibility at later stages of development when the interface has already been “locked down.” In situations where wireframes are intended to live past the initial concept stage and turn into functional specifications documents or user guides, hand-sketching is not the most appropriate method. Some may see the architect as suddenly becoming “sloppy” or “lazy.” In these cases, it is critical to sell the benefits of sketchy wireframes to stakeholders and opinion leaders.

Perception – When people become accustomed to seeing fully fleshed-out wireframes, introducing sketchy may be a challenge.

Many organizations feel it’s best to standardize their deliverables by forcing everyone to use the same tool. This leaves a disparity in the quality of sketched deliverables produced by the team.

Drawing ability – Wireframes are essentially presentation tools, and not everyone may feel that their drawing skills are “presentable.” In team environments, there can be a wide range of drawing skill levels… from the “can’t draw a straight line” people to the “can’t put down their sketchbook” people.

If hand-sketching has so many advantages over computer-based tools, why don’t we all ditch our mouse pads for sketch pads? There are four major reasons:

Sketches don’t require the same level of detail, and can be produced faster than traditional computer-based wireframes, allowing for a more iterative design process. Hand-sketching of wireframes, proponents argue, allows for faster expression of ideas and freedom from artificial confines of diagramming software. An informal poll by (as of 8/24/09) showed 22% of respondents identifying sketching as their primary tool for wireframing. To compensate for the drawbacks of traditional wireframing, some designers ditch the computer in favor of hand sketching. This differentiation becomes especially murky in the middle of the project, where conceptual and final elements are commingled on the same page. Early-stage, conceptual wireframes look identical to late-stage, functional specifications. As a result, wireframes look the same regardless of which stage of completion the wireframe is representing. The problem here is that traditional computer wireframing tools, like Visio, OmniGraffle or InDesign, lay out drawings as hard-lined boxes, lines and fonts. By the end of the process, wireframes can turn into a highly detailed functional specifications document. As the project continues, parts of the wireframe begin to be “locked down” as functionality is reviewed and “signed-off.” During this process, wireframes can become a confusing hybrid of conceptual ideas and finalized functionality. In the early stage, wireframes act as a tool for exploration and concept development, when sweeping changes are expected and encouraged. Throughout a project lifecycle, wireframes can be used for different purposes depending on the stage. The same wireframe in sketchy and traditional representation. These allow computer wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artifacts. There is a growing popularity toward something in the middle: Computer-based sketchy wireframes. This speeds up the ideation process, but doesn’t always produce presentable or maintainable documentation. To compensate for the drawbacks of traditional wireframes, many practitioners put aside the computer in favor of simple pencil sketches or whiteboard drawings.

While these artifacts have served us well, they can also be slow to produce, burdened with unnecessary detail and give a false impression of “completion.”

However, using traditional diagramming tools like Visio, OmniGraffle, and InDesign, most wireframes today look the same as their ancestors did from a decade ago – assembled with rigid, computer-drawn boxes, lines and text. When it comes to user interface documentation, wireframes have long been the tool of choice.

Wireframesketcher export complete html