Reviewing Wireframes: Here’s What to Look For

by Gina Armstrong, Lead Designer

Insights / Website Design / Reviewing Wireframes: Here’s What to Look For

In a typical web design process, wireframes are usually the first designs you’ll see and review. Creating them is a beneficial step for everyone involved in the process, but if you’re unfamiliar with their purpose, analyzing them and providing feedback can be difficult.

As a reminder: wireframes serve as blueprints of the website, determining the overall layout and content placement. They are presented in grayscale and use very little, if any, real content.

Since you won’t see colors, fonts, or any imagery, what should you be paying attention to?

Here are five key areas you should focus on when reviewing wireframes.

Content Placement and Hierarchy

Although most of the content in wireframes will be filler lorem ipsum text, headers and subheaders are typically included to present the flow of the page.

You should review each page for high-level content and ensure that the order of information makes sense for your users. For example, a homepage typically contains information that introduces your organization, using small blurbs that link out to top-level pages from the navigation (About Us, What We Do, Our Work, etc.).

If you know you’ll have events or blog posts that you want to feature, make sure there’s an appropriate space included for those.

Amount of Content

Since we know that users don’t spend a ton of time reading online, you have the opportunity during a redesign to re-assess your content and pare things down to only the most relevant information.

Including a few sentences under each header on a page is usually enough, but you know your content best. If, for example, you know that a certain section needs a longer explanation, be sure to account for that amount of text during the wireframe phase.

Use of Photos and Icons

Although wireframes won’t include any imagery or iconography, there will be placeholder graphics to indicate where photos will go.

If you have a great library of images to use but don’t see many placeholders in the wireframes (or if you don’t have images, but see placeholders throughout), that’s feedback you should share. Stock imagery can be used to fill in gaps, but make sure you are planning a realistic approach.

Functionality

As you review wireframes, be sure to consider the functionality needs for your new site.

If you want to be able to display a photo gallery or know that your events calendar will need filtering options, make sure you either see an example in the wireframes or have communicated those needs previously.

Links and CTAs

Each page is created with user journey in mind, directing visitors with links to relevant information elsewhere on the site and a call-to-action (CTA) at the end of the page. Consider your end goal for each page and review the included links and/or CTAs to ensure they are encouraging the appropriate action from your users.

The most important thing to keep in mind is that wireframes are high-level look at the structure of a site  – so don’t get caught up trying to imagine what the page will look like once designed, or what photo would be best where. Instead, remain focused on the overall flow of content and the goals of your site. Doing so will improve the efficiency of the process and set you up for a successful website design.

If you have any questions regarding wireframes or our website design process, we’re here to help.