Wireframes

While 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.

Wireframes 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:

News wireframe example

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 toward specific actions or messages.

Programs of study wireframe example

User Research and Personas

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

  • Who is the 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.

Create Wireframes

Wireframes and sketches are great tools 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 Wireframe

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 Wireframe

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.

Medium-fidelity wireframe example

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