Joshua Krohn

In Defense of Hi-Fi Wireframes

The topic of high fidelity wireframes in web design is one fraught with contention. Opinions seem to be divided into two camps: those who believe they’re a waste of time and those who don’t. Specifically, hi-fi wireframes for marketing sites seem to attract the most negative attention.

Hi Fi Hero C

Imagine that you’re a custom home builder. You take people’s dream homes and make them a reality. They’ve seen homes you’ve built in the past and can’t wait for you to get started. When you discuss their budget, it becomes clear they’ve saved up for this investment. You feel their excitement as they gush about all the details they want in their new home.

What’s your next step? Do you start asking them about paint colors? What kind of light fixtures to install? The style of trim and baseboards? Yes, eventually you’ll ask those questions (and more!) as part of your discovery process; it’s what’ll help define the scope and cost of the project.

But above all, what’s most important is the structure. You start with the blueprints and the layout of the house. This has the biggest impact on the scope of the project.

“You’re not going to go out to the site, pour the foundation, and start raising walls without the client approving the blueprint.”

For me, web design is very similar. I’m not going to fire up Sketch or Photoshop and start building out a client’s new marketing site without first getting the blueprint approved. There’s too much opportunity to waste time in visual design; I need that blueprint. And that blueprint is the high-fidelity wireframe.

This isn’t a knock against lo-fi wireframes. In fact, nearly all of my web design projects start out as messy sketches. They’re an essential part of the process. The goal isn’t for these to be high-fidelity; it’s to quickly get a sense of space and layout. And sketching is the best medium for that. The fastest hand and mouse can’t keep up with paper and pencil.

Hi Fi Supporting 1

Here’s a tip for sketching low-fi wireframes: the bigger the canvas, the bigger the writing tool. If you’re sketching in a small notebook, a pencil works great. Large notebook? Switch to a marker. Whiteboard? Get markers with the fattest tip. This removes the temptation of getting too detailed. Remember: the goal is for you to get a good idea of the layout.

After I’ve sketched a number of layouts, I’ll cull the list and move the strongest ones to high fidelity, grayscale wireframes. Whether you use Photoshop, Illustrator, or Sketch doesn’t matter. The goal is to put more structure around the lo-fi sketches. This is where I’ll define the page’s grid system and start blocking out where images, headlines, and copy go.

Wireframes High Fidelity

This is the step that some argue is a waste of time; that it seems like so much work for something that couldn’t get approved. My counterargument is that even more time could be wasted doing visual design without this step. During visual design, I could go down a rabbit hole (or multiple holes) of selecting colors, choosing typography, and designing specific assets, only to realize it was all wasted because the page layout didn’t work. Constraining everything to grayscale resists the temptation to spend any time on color.

I also lose flexibility when moving straight into visual design because I’m bogged down by those details. I’m so focused on getting the right shade of blue or the perfect typographic hierarchy that I lose sight of the big picture. It’s important to note that even though I’m designing from the lo-fi sketches, I’m not obligated to follow them. This is still time for experimentation. But if I move straight to visual design, I feel time for experimentation is lost.

“But above all, the biggest reason I design hi-fi wireframes—more than saving time or having flexibility or getting the layout right—is to get client buy-in. ”

Client approval and buy-in is paramount. If they don’t approve the hi-fi wireframe, there’s no way they would’ve approved the visual design.

Once wireframes are approved, it's into visual design. For me, visual design is actually the boring part of the project. And it should be. Why? Because by the time design starts, all the layout and structure should be approved. The client already knows what to expect; you’re just adding the finishing touches.

Going back to the home builder analogy, imagine you built that client’s home without getting the blueprints approved. Do you think you’d build their dream house correctly the first time? Just think about the time, money, and confidence wasted.

As with most things in design, there are lots of different ways to get to the end result. There isn’t a wrong way or a right way to get to a final, approved design. This is the process that works for me. In my experience, hi-fi wireframes provide me a much greater rate of success to getting a design approved.

Wireframes Finished Design

But what do you think? Are you in favor of hi-fi wireframes? Do you think they’re a waste of time? Have you tried them already but they don’t work for you? We’d love to hear about your experience and process. Hit us up!

Give this a share if you enjoyed it :)