Roger That Logo

How and When to Wireframe

One tool the Roger That team has added to our website-building toolkit in recent years is the wireframe. A wireframe is basically a sketch of a page or screen that focuses on the layout of all its elements—without getting bogged down on the content that will go into them.

This is a tactic that comes from the field of user experience design, aka UX design. UX designers use wireframes as a way to focus on how a user interacts with a page and moves through their experience with the site overall. As Roger That has taken on more complex websites in recent years, we have found that wireframes come in handy for mapping out complex experiences without eating through the design budget too quickly.

Many of our clients aren’t familiar with wireframes, so in this post we’ll explain how we use wireframes and what kinds of projects benefit from them.

Types of Wireframes

Wireframes can be designed with various levels of detail, depending on the project, the designer and the client. At Roger That, we refer to this as the “resolution” of the wireframe—a lot of detail makes for a high-resolution wireframe, and fewer details make for a low-resolution wireframe.

What do all wireframes have in common? They use shapes to represent areas where images, text and graphic elements will go. Wireframes are usually in black-and-white or grayscale, though sometimes we use a bit of color to highlight interactive elements like links and buttons.

Here are a few examples of different wireframe styles:

Image shows a low-resolution wireframe of a website, with grey boxes standing in for content, and simple labels like "logo," "link," "hero," "about," "services" and "case studies."

Low-Resolution Wireframe

Pros: This style of wireframe is fast to produce and change, so it allows us to iterate on ideas quickly and easily.
Cons: It leaves a lot to the imagination, and the layout is likely to change quite a bit as content and visual details are layered in.

We often reserve this style of wireframe for projects where the Roger That team needs to decide how to approach a design, but we’re not presenting wireframes to the client.

Image shows a medium-resolution wireframe of a website, with grey boxes standing in for images, and grey lines standing in for text. Links and buttons are in purple to indicate that they are interactive elements.

Medium-Resolution Wireframe

Pros: It has enough detail to give a sense of how the content will flow, without the distractions of placeholder copy or images.
Cons: This style takes a bit longer to produce, and requires the designer to have more information about what the content will be like.

This is the style we typically use when we are presenting wireframes to a client. It gives just enough detail to facilitate a conversation about the strategy behind each section and how the user moves through them.

Image shows a high-resolution wireframe of a website, with grey boxes standing in for images. Headlines, buttons and links have actual text, while supporting copy is simulated with "lorem ipsum" text. Text and buttons are a bit more stylized to show hierarchy.

High-Resolution Wireframe

Pros: High-resolution wireframes offer the closest representation of what the final user experience may be, short of a prototype.
Cons: We find that clients reviewing high-resolution wireframes often end up giving feedback on the copy rather than on the user experience.

This style of wireframe can be helpful when we are optimizing or redesigning existing pages, rather than starting from scratch. Since the content is already near final in that situation, it’s not as distracting.

When to Wireframe

Wireframes are especially helpful when designing pages with complex content or interactive features. The simplified approach of wireframe design makes it easy to move elements around and try different layouts to see what creates the best flow.

Working with actual content requires the designer to bring in the copy, apply colors, create graphics, find and insert images, and make sure everything looks good together. If they’re experimenting with multiple approaches to a page layout, taking every iteration through all of those steps eats up a lot of time and budget.

With wireframes, the designer can quickly iterate on a design to determine the best way for various elements to fit together. This makes it easier to collaborate with other team members as we plan copy and visuals for complex projects or features.

Wireframes also enable developers to make more accurate estimates of how much time and effort it will take to build a page or feature. That’s why we often use wireframes as part of the planning phase for large custom website projects, to help us create an accurate scope for the development phase.

Our Approach

Roger That’s philosophy is to make the most of our client’s budget by not giving them deliverables they don’t need. So, we typically only do wireframes if the project involves interactive features or complex user flows. Some examples of complex user flows include features like e-commerce, learning management systems, and client or volunteer portals.

For complex projects, wireframes ensure that everyone on the project team agrees on the approach early in the process. It’s much more cost-effective to pivot at the wireframe stage than it is to present a finished design, only to find out that the client was expecting a totally different user experience.

Another situation in which we may use wireframes is if the client’s key stakeholders are feeling uncertain or apprehensive about the project. Wireframes help them envision the finished product and get excited about what it can do for them.

Do you have a brilliant idea for your website that you want to explore? We’d love to hear about it! Our team can help you work through a strategy and build out wireframes to prove the concept and help you decide whether to move it forward.