The Full Wireframe Spectrum
Traditional static wireframes are still useful for quick communication purposes. For example, hand-drawn wireframes can be made in a few minutes, which makes them great for experimenting with new ideas and communicating concepts to other team-members.
The trouble with these wireframes is they wind up as another dead-end deliverable.
The most useful wireframes you can create are interactive. They are essential low-fidelity prototypes you can test early on — giving design teams a head start on rapid prototyping. At the very least, they actually let stakeholders experience how the design works.
In this guide, we’ll walk you through the whole wireframing process, from static wireframes to a finished interactive wireframe. Let’s start by examining the different types.
Going from most basic to complex, the 3 types of wireframes are:
- Content Wireframes
- Lo-Fi Annotated Wireframes
- Interactive Wireframes.
1. Content Wireframes
Wireframes are the skeleton, on top of which more detailed elements are added. The content wireframe embodies this best.
Whether you’re sketching by hand or using a digital tool, you’ll usually start by sketching out rough blocks of content “spaces”.
Content wireframes section off the page into “content blocks” with little or no detail. The point is to help you organize your layout without distraction, and keep it consistent across different pages and devices.
2. Lo-fi Annotated Wireframes
Once you’ve created a content wireframe, you’ll likely sculpt it into a lo-fi annotated wireframe.
At this point, you’re creating the traditional “boxes and arrows” wireframe complete with notes for the team or client.
These notes help manage scope creep and explain how the design system works.
Most annotations can be categorized into the following fields:
- Functionality — Gesture controls (clicks, taps, swipes), pop-ups, data inputs and outputs, zooming issues, etc.
- Content — Any early ideas or suggestions (fonts, sizing, linking), descriptions for text, graphics, and multimedia (including dimensions, resolution, etc.)
- Behavior — Animation (styles, speed, and positioning), interactions, link destinations, etc.
- Constraints — Limitations due to hardware, software, browser, data, etc.
3. Interactive Wireframes
In other words, a low-fidelity prototype. Using a digital design tool, you can create a new iteration, then add interactions directly into your wireframe to test with users.
In doing so, you’ve saved your notes from the annotated wireframe yet demonstrated functionality with your interactive wireframe.
Big picture concepts like navigation and UI layouts get harder to modify in the later stages, so testing these early with a simple prototype saves time in the end.
You test navigation, layout, and basic usability with interactive wireframe phase and advanced functionality and visuals details in the hi-fi prototyping phase.