Wireframes

Test Out Solutions

If your site map reflects your site’s organizational structure, wireframes reflect page-level structure. Think of wireframes as architectural blueprints. No color, images or special fonts. Instead, wireframe communicate how content blocks should be organized on a page to support your end users’, and your department’s, goals.

Remember all that work you did with your content audit, stakeholder interviews and user research? This is where it all comes together.

Content Audit 

In your content audit, you noted page types and overall purpose. To provide continuity for your users, you’ll want similar page types to have a similar layout. With our templated system, you can choose basic page layouts and then customize with your own images and text.

Example “News” page type wireframe

Example “News” page type wireframe

Stakeholder Interviews

Calls to action, messaging, measurable outcomes. Your stakeholders provided valuable insights into the business objectives your content must support. With wireframes, you can visually prioritize content to push users towards specific actions or messages.

Example of a programs of study wireframe

User Research and Personas

Before you sit down to wireframe a feature or page, review your audience personas and ask:

  • Who is primary target audience for this page?
  • How does this page fit into the larger context of the site? Is it part of a workflow or is it a destination?
  • What are users trying to do when they visit this page? 
  • What do you want them to do?
  • What keywords are users looking for?

The answers to these questions will not only help you prioritize content blocks, they will also help you design content that is usable, effective, and engaging. 

Test your pages

Wireframes and sketches are a great tool for gathering user feedback at any stage in the design process. Brainstorming ideas? Sketch them out and see what people think. Want to test your pages to make sure users can find what they need? Create a wireframe and give them some tasks. 

There are three types of wireframe tests we recommend. While you may not test all stages of your wireframes, we strongly recommend that test your site with end users before going live.

Low fidelity 

A low fidelity wireframe shows the simple page structure but doesn’t include a lot of content details. A low fidelity wireframe will be tested early in the design process, often using paper prototypes to gather feedback. When testing a low-fidelity wireframe, be sure to ask users about their expectations, behaviors, likes, and dislikes.

Example of a low fidelity wireframe

You can use a low fidelity wireframe to get feedback on content placement, navigation, and labels.

Medium fidelity 

Medium fidelity wireframes include more content details, but still no color or design. Often, your medium fidelity wireframes are presented as interactive PDFs or HTML prototypes, allowing you to test task flows and more complex interactions. While you still may ask questions during user tests, you really want to sit back and watch what people do.

Example of a medium fidelity wireframe

High fidelity prototype

For more complex sites, you might want to test a high fidelity prototype. A high fidelity prototype is the closest thing to your final site in terms of design and functionality. You’ll most likely test with a high fidelity prototype near the end of the design phase to be sure that you have worked out all the kinks before your site goes live.

Example of a high fidelity wireframe