How to Review a Wireframe

We 💝 wireframes. Just ask our GDD team. Ask Jeter Cotton, GDD Account Manager how many problems and miscommunications are avoided with wireframing and wireframe feedback. (Hint: the number is big.) Everyone appreciates the feedback and framing they provide. Wireframes are a critical web design tool. Especially in a Growth Driven Design build.

So, instead of writing you the next great American novel on wireframes, we’re going to discuss two things. That’s it. Two.

• What is a Wireframe?
• How to Review a Wireframe

What is a Wireframe?

Digital.gov, a project to bring better UX to the government community and websites (they definitely need that help), defines wireframes as:

“A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics.”

In lay terms: a wireframe helps you see layout, understand any interactive features, and what content ideas you’ll see on page. 

It’s like an outline. And what you really need to hold on to is that last sentence:
For these reasons, wireframes typically do not include any styling, color, or graphics.

How To Review a Wireframe

Just like any creative or editorial process, there are as many ways to review a wireframe as there are wireframes. At Primitive, we think these action items top the list:

• Focus on the Big Picture
• Don't Expect Design Details
• Don’t Edit Copy
• Pay Attention to Detail
• Ask Your Questions

Focus on the Big Picture

This is the question you need to be asking: Did they cover the topics you think need to be on the page?

When you look at a Primitive wireframe you’ll see labeled sections. They’ll have names like about, hero, logo soup, why, and carousel. And in some of these sections there will be cue words like, “Talk about how great your company is here,” or “Add photos with actual people who work there here.” You’ll see what topics are covered. Maybe a customer journey or the steps your potential client takes to walk through a transaction. 

So, if you’re looking at the wireframe for an About page and there are no employee bio pictures, that’s a big picture item. Hop on Userback, or whatever their feedback platform is, and let them know what it’s missing.

Don’t Expect Design Details

A wireframe is a layout. You’ll see what content sections or modules are bigger than others. In the design hierarchy, those bigger sections tell the viewer they are more important information. You’ll see notes about functionality. Maybe you’ll see a module with squares of information and there’s a note that says they’ll have expanded text. You won’t see the end design, but you’ll know to expect more copy than a headline in that section.

Don’t Edit Copy

This is glorified lorem ipsum. Depending on your strategist, you might see a few headlines they thought of or notes about what the copy will contain. What you should be looking at is: topic + length. The content should tell you what they plan on writing about. Wireframe copy should also indicate length. 

For example, this isn’t an opportunity to give a list of features:

Use 1

• Giving some more deets here
• And a fancy example to boot
• Giving some more deets here
• And a fancy example to boot

This tells you the copywriter will showcase a use feature and short, bulleted text. 

Descriptive Text About Your Team

Immobilus momentum impedimenta impedimenta locomotor immobilus locomotor sonorus immobilus incantartem. Impedimenta locomotor protego muffliato engorgio crucio portus rictusempra unction lumos aparecium.

Break Body Text Up With Headers

ncantato aresto aparecium quietus expecto mortis locomotor legilimens. Rictusempra mobilicorpus engorgio ennervate ennervate protego immobilus legilimens lacarnum.

Consider Talking About Values

Morsmordre inflamarae stupefy rictusempra leviosa incarcerous scourgify. Aparecium protego wingardium quodpot impedimenta charm. Mortis mortis engorgio incendio momentum. Avis aparecium petrificus mobilicorpus expecto petrificus petrificus mortis avada.

This isn’t the moment to wonder if your copywriter is planning to make your website a Harry Potter fan site. This About wireframe tells you that there will be a section of text describing your team and looking at your business values.

Pay Attention to Detail

Use the details to decide if the flow of ideas makes sense to you. Think about if the way the sections and topics are laid out flow into each other. Do they feel disjointed? Is anything missing? Think about if sections immediately above and below each other relate. Remember, a good website tells YOUR brand’s story. 

And while this may feel like big picture, it’s actually detail work. Because it’s seeing how modules and content ideas relate to each other that make the difference.

Ask Your Questions

This is the most important way to use a wireframe. The wireframe is the last time you’ll see your webpage before it goes through design and copy. So, before the agency you hired spends your money on their time, ask all the questions you have. Ask what a module does. Ask what topic the copy will cover. Ask what a function will look like if you don’t understand it. This is YOUR moment. Because this is YOUR website. Your website will turn out infinitely better if you’re involved in the building process. We promise (and I’m a web copywriter) that we’d rather get your initial feedback here than after we’ve done a full iteration of your website.

We promise, if you truly review a wireframe, the end product will better reflect you and your brand. And when you’re paying to build your business’s online storefront, that matters.