Too often new website design projects start with a little wireframe overload.
Creating dozens of wireframes to show a client at the start of the project doesn’t necessarily create better understanding; it can be downright overwhelming.
Like with many other aspects of design, wireframing is an art where, in many cases, less is more.
Here’s a look at how to wireframe more effectively and a guide to how many wireframes you actually need (plus, some ideas on which ones are the most important, and which you can probably miss!)
How Many Wireframes Do You Need?
Exactly how many wireframes you need at the start of a website design project depends on the scope and scale of the build.
Smaller sites will often have fewer wireframes than larger sites. But that’s not always the case.
Generally, the true indicator of how many wireframes a website has is rooted in the sitemap. How is the website organized? How many levels of pages or page types are necessary to communicate the message?
Then there’s this: Most clients can “see” the design at the wireframe stage. Showing dozens of outlines won’t mean anything to them until the content gets filled in. So less is definitely more. Use a handful of wireframes to set basic organizational “rules” for the site for clients to help get a feel of the concept of the design.
Start with a Website Sitemap and Outline
The beginning of the answer to our title question is in organizing website content. This happens before the design is even beginning to come together.
Sketch out a site map with all the pages and subpages that the website will include. Categorize them in a manner that notes how they will be visually organized, from top-level pages to secondary pages to sub-pages, shop items, or blog posts.
Naturally, you’ll start to see groupings of similar content-type pages that almost outline many of the wireframes for you.
At this stage, you may still think you have a dozen or so wireframes to create (depending on the website), but don’t worry you can narrow those down.
Think Modular
Here’s how you go from many wireframes to a few – think modularly.
Rather than outlining the entire project page by page, think about modular parts that you can use and reuse on multiple pages. (It’s mix-and-match wireframing.)
Not only will this concept help you save time, but you will have a series of replicating and repeatable parts that you can use across pages. This will help create consistency and patterns in the design that will make it easier for users to interact with the site when complete.
Another benefit? There’s less for clients to try to visualize on their own. With a solid explanation (and maybe a few high-fidelity wireframes), clients may be able to better understand your concept for the overall design.
5 Wireframes for Every Website
If you are streamlining the number of wireframes you create for a project, what exactly do you need to have?
Start with five basic wireframes that will provide a good visual outline of everything you might need for the overall site organization. Remember to think in modular parts so that you have pieces you can mix and match into wireframes (and pages) for quicker and easier building.
Homepage
The wireframe should include a full sketch of the homepage design including navigation and a footer with all the necessary elements on the page.
For some clients, having a high-fidelity wireframe of the home page is the thing that helps push an idea into the final design stages. Consider creating two to three hi-fi options so that clients can fully visualize where you are going with the project.
These wireframes should instill enough confidence to push projects forward with an actual – and somewhat visual – design plan.
Mobile Homepage
In a time when more users are probably accessing a website on a phone than not, having the same high-fidelity wireframe of the mobile homepage is important. Each hi-fi wireframe should include a mobile partner that details how elements will re-stack and rearrange on smaller screens.
You might think about noting any interactions that are different – tap or swipe versus click – as well to ensure that you are getting just the right functionality.
Secondary (Top-Level Navigation) Page
What are the first clicks from the homepage? You’ll need a wireframe for that page type.
This is truly where modular thinking comes in. Design one wireframe with all the elements you might need here and think about being able to strip away parts you don’t need on these secondary pages.
This can save the time and effort of repeating wireframes with minor changes for content.
Contact or About Page
Almost every website has a contact us or about us page. (Many websites have both.) Design wireframes for one of both of these page types upfront because this can be one of the most-visited, and important, elements of almost any website.
Shop or Blog Page
Finally, think about the purpose of the website. Most fall into the category of informational or e-commerce. Design a wireframe for that type of page.
Sometimes these wireframes might include two pages types – the full index (a showcase of items or blog posts) and a detail page (single item or blog post).
Additional Wireframes for Larger Sites
Some website designs may have much more complex needs, requiring additional wireframes. (And that’s ok.)
It’s probably something that you can actually introduce later in the design process. Start with the basic wireframes noted in the section above for client approval first and get those in the design process. Then move on to any additional wireframes.
You may create them all at once, but for most clients seeing and digesting a handful of wireframes can be a lot to take in. It is recommended that you don’t try to push an entire site of outlines on them at once. (It can lead to hasty approval, even if it’s not what they want, and can derail a project in the long term.)
Other wireframes you might include:
- Services or pricing pages
- Special pages for unique elements such as reservations, menus, photo galleries etc.
- Map or location pages
- E-commerce detail pages such as checkout or additional items
- Email newsletter or signup pages
- User login or preferences
- User generated content or feeds
- Heavy data visualizations or tables
Conclusion
There’s no magic number when it comes to the number of wireframes you need because projects can be very different. But you can start with a handful of functional wireframes that make it easier for you and clients to visualize projects and get them moving in the right direction.
The trick is not to let yourself get caught in the wireframing weeds. It’s easy to just keep creating wireframes; it’s a lot harder to turn all of those different parts into functional web pages.
The trick is to think modularly and in an organized manner and that will help you create just the wireframes you need. And don’t worry; if you need one more wireframe later, you’ll have to tools to knock it out fast.
