How to Build an Interactive Wireframe

In this example we’re going to redesign a marketing site that promotes a swimming pool company. Although the example is fictitious, the problems stem from real projects.

For example, its rambling structure had built up for more than five years as various freelance designers came and went.

1. Create a Content Inventory

Before you begin to design something new, you need to know where you stand.

A content inventory is a list — spreadsheet, doc or outline — that describes everything users can expect to find in a site. Getting started may be time-consuming up front, but will keep your work organized and your priorities straight.

Here’s how it works:

  1. List all the content you want to keep. If possible, include original URLs and a brief description of why the content matters.
  2. Eliminate redundancies to focus your site.
  3. Reorganize the content goes into web pages.
  4. Optionally you can assign responsibilities and deadlines to people for each page.

For the swimming pool company, their “keep this” list resulted in an outline:

2. Create a Visual Hierarchy

Once you know which content appears on each page, you can start to structure how those pages should look.

As explained in the free guide Web UI Design for the Human Eye, this is when the true design work starts — you’ll need to understand user flows to what content should be prioritized, and visual principles to understand how.

The important part is that you understand where your user wants to go and how they’ll likely try to get there (plus where you want them to go). Then you can start threading pages together.

Visual hierarchy

The pool company’s site is heavy with examples of their work, and their visual hierarchy reflects that. For example the they decided that their case studies are what sell, and a typical case study page plays up photos of their projects.

As indicated above, the image-heavy case study page emphasizes its visuals, but leaves room for a little text that explains what readers are looking at. Meanwhile the services page lists its content with text accompanied with a small photo. These rough visual outlines show what percentage of different kinds of content go on each page, plus their importance, indicated by position. But they’re by no means real layouts.

3. Build the Lo-Fi Wireframe

While content wireframes describe relationships between sections, low-fidelity wireframes spell out the content itself. Low-fis roughly show where images, text, navigation, and other media should go on the page, including their (approximate) size. Not that it helps a designer working on the pool company’s website.

So how do you start with a blank slate? Give every page two jobs.

Every page needs purpose: an idea around which everything else flows. These individual ideas come from the visual hierarchy and content inventory, the go-to sources that drive the website.

For example, a case study page has one business goal: to convince prospects to contact the company. It also has a user goal, which is to explain what they can expect from the company. In most cases, the goals overlap. A case study page needs one “hero” photo that grabs immediate attention and sets the tone for the rest of the page, convincing people to contact the company.

Grid
Interactive Wireframe created in UXPin

After that, the page practically builds itself. Every other element is a lighter box that suggests where content, like thumbnails and explainer text, should go. To ensure correct alignment, we also use a 12-column grid in the background.

A typical case study page would mix text with photos, giving more room to imagery throughout the page. Although the visual hierarchy didn’t indicate that text and photos would coexist, the pool company decided that each photo would need some explanation. Such decisions are fine at this point because they’re based on what each page actually has to work with.

Grid

And let’s not forget the call to action. This button or form, represented with another dark box, supports the page’s business goal. There’s no need to go further. Content-wise, this page has everything it needs.

We could add boxes to represent navigation and a footer, but they aren’t necessary here. It’s safe to assume they’ll exist, so we’ll add them to the next round of development. This wireframe justifies the page’s existence.

Grid

Business goals. User goals. This case study page has it all. Once approved, it’s ready to move on.

Gray boxes are fine for quick wireframes when you’re testing ideas, but ideally you’d work with real substance.

4. Make the Transition With a Mid-fi and Real Content

To make sure everything fit, the pool company outfitted the low-fi wireframe with real content … to an extent. This mid-fi wireframe gives an idea of what to expect per page, even if the final work isn’t quite there yet.

Mid-fis are like hi-fis in development. You’ll often find them when the content isn’t finalized. In this case, the text is ready but the company was waiting for new photos.

Grid

Notice also that the navigation and company logo have come into play. These details start to make the site come together.

5. Add Interactivity

Giving a wireframe links and animations shows how the project flows.

This vital step lets your team and clients walk through the whole experience, seeking redundant steps, odd loops, and testing calls to action. Should a form come earlier or later in the process? Does a given page offer users too many choices and options? Going interactive will uncover problems like these.

After exploring ways to ask for newsletter signups, the pool company settled on a tried-and-true modal. Although this would interrupt the reading experience, they decided the newsletter was a top priority to expand their perception as thought leaders in waterscaping and backyard fun.

Interactive

Get the full 114-page Guide to Wireframing

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