If you’ve ever been part of a website redesign, you’ve probably encountered wireframes. Wireframes may not be as exciting as a web page’s design, but they’re an integral part of the redesign process and a surefire way to keep us on the same page as our nonprofit clients.

Okay, so what’s a wireframe? We’re glad you asked.

We like to say that a wireframe is to a web page what a blueprint is to a house. A wireframe uses placeholder elements to illustrate how the content of each web page will take shape. This content can include text, imagery, icons, infographics, forms, social media feeds, buttons, and navigation.

Here’s a wireframe we created for Spectrum360 and the finished design.

As you can see, a wireframe is intentionally un-designed. No thought is put into fonts, color, photography, or any other visual elements. 

So why do we need wireframes?

By focusing on the content, wireframes allow us to make sure each page is telling a clear, action-oriented story. For example, we feature the most important information up top, strike the right balance between showing (imagery/graphics) and telling (text), and connect users to key actions (e.g. making donations or signing up for emails).

From a tactical perspective, we work with our clients to make sure the wireframes suggest a reasonable amount of text for key sections, such as descriptions of an organization’s history, programs, impact and ways to give. This way, we wind up designing a page around realistic character counts, rather than pigeonholing clients to fit an arbitrary amount of text into a less thought-out design.

Looking ahead, wireframes allow the design process to focus on design. So when we share a home page design, the discussion doesn’t circulate around the page’s content and how it shakes out from top to bottom. Instead, we focus the conversation on the different design elements we’ve proposed, empowering us to more efficiently make our way through the redesign process.

Like a blueprint, wireframes might not be the most exciting part of the process. But if you want your house (and website) to come together smoothly, you need to first sort out the architecture.