Wireframes are a basic part of the application or site design process. They allow the interaction designer to quickly sketch out screen layouts without delving into the niceties of visual design. Wireframes are generally considered blueprints – they define structure, size and layout without proscribing any decorative details such as colors and fonts.
However, all wireframes are not the same. In fact, the variety of types of wireframes is almost as varied as the number of designers making them. There is no fixed recipe for successful wireframing, but generally a distinction is made between low-fidelity and high-fidelity wireframe diagrams.
Low Fidelity Wireframes – A Minimalist Start
Low Fidelity wireframes are generally a very simple place to start design. They attempt to define navigation, framework and basic structure. They are often produced in tools like Balsamiq for an intentionally hand-drawn and informal look. Low fidelity wireframes are useful for starting conversations, deciding very basic functionality as well as navigation layout. These simple sketches are NOT as useful for showing actual interactions, the weighting of elements on a page or paper prototype testing.
Here are some examples of low-fidelity Balsamiq wireframes:
High Fidelity Wireframes – Designing for the Details
High-Fidelity wireframes fill in the details missing in their simpler predecessors. They define the weighting and visual hierarchy of the page, actual form and interaction elements, and often labels, instructional text and some copy. They can be used in sequence to show how a specific task can be accomplished in a sequence of screens. High fidelity wireframes should always aspire to defining all product and interaction details. They should provide a clear enough visualization of an application or site to allow developers and the engineering team to begin their work.
Here are a few examples of high-fidelity wireframes: