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:

1. Content Wireframes

Wireframes are the skeleton, on top of which more detailed elements are added. The content wireframe embodies this best.

Content Wireframe created in UXPin
Content Wireframe created in UXPin

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.

Annotated Wireframe created in UXPin
Annotated Wireframe created in UXPin

These notes help manage scope creep and explain how the design system works.

Most annotations can be categorized into the following fields:

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.

Interactive Wireframe
Interactive wireframe created in UXPin

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.

Get the full 114-page Guide to Wireframing

Don’t worry, we’ll keep your email safe.