What Is a Wireframe?
A wireframe is a low-fidelity visual representation of a website’s layout design, sometimes referred to as a skeleton, outline or blueprint. Often, a wireframe represents the basic page layout structure and navigational scheme of the site’s pages, as well as major site components (like web forms and ad units).
A wireframe does not contain finished design elements as such, but does display where design elements will appear on the page. Wireframes are normally produced in grayscale using off-the-shelf wireframing software such as Mockingbird or, in its simplest form, paper and pencil.
Wireframes allow project team members and clients to do such things as:
- Test and refine navigation
- See how content lays out on the page
- Study and rapidly refine the user interface design of web forms and interactive elements
- Evaluate overall effectiveness of the page layout against usability best practices
- Determine web development/programming requirements
Here is an example of a wireframe for a home page:
Here is an example of a wireframe for an interior page:
Key benefits of wireframing web designs
It takes a lot more time, effort and expertise to create a web page design than a wireframe. When the first thing clients see is a finished design, they are seeing something that has taken considerable time to produce and will involve (potentially) considerable expense to revise.
The bad news, especially from a cost standpoint, is that design changes are just about inevitable.
Changes like the ones above, when made to full-blown, high-fidelity designs, can run up thousands of dollars of expense (to say nothing of extending the timeline to complete the project). Knowing the impact in time and cost to making design changes, clients and web development team members become almost reluctant to voice concerns for fear of the time and cost involved in addressing design issues.
The point to remember: Wireframing makes it quick and inexpensive to tweak or even overhaul a design at exactly the time when you want to be doing major changes and fine-tuning.
Wireframes Make Site Navigation Designs Better
One of the most important factors in web design is content findability, and an intuitive site navigation design is important in this regard. If users cannot easily get to where they want to go on a site, they’re gone.
As users become increasingly more web-savvy, the negative impact of shoddy navigation increases. Unfortunately, clients, designers and even developers have a difficult time evaluating navigation until they actually have an opportunity to use it.
Wireframes allow people to give the new site a test run: to see how easy or difficult it is to locate key pages; to determine whether dropdown menus clarify or confuse the user; to find out whether breadcrumbs are useful or distracting; to understand whether the overall navigational scheme is intuitive, incomprehensible or somewhere in between.
When site navigational issues come to light after designs are completed, it’s a bit like realizing your ceilings are too low after the house has been built. Changes to navigation can run the gamut, but many of them are almost prohibitively expensive to correct. I think this is one reason why we see so many websites — even large and sophisticated ones that display wonderfully creative content and dazzling design — still manage to deliver an overall inferior user experience.
Wireframes Can Improve Content
Content — whether inserted for SEO purposes or for human readers (great content addresses the needs of both) — can look clunky or elegant.
An example of clunky content is something you see every day: large blocks of undifferentiated text. Nobody is going to read it. Elegant content — content that informs and persuades — makes use of design elements such as readable fonts, properly sized fonts, numbered lists, bullets and well-positioned subheads. In a wireframe, it’s easy to play around with these elements and arrive at a formatting scheme that will maximize readability and persuasiveness.
Wireframes Can Improve User Interface Copy
For the user’s interface, little pieces of copy can be far more important than big ones. Example: should the call to action button say Learn More, More Information or Click Here? How the client and design team answer that question will have an enormous impact on conversions.
And yet, when content and user interface copy issues are addressed while reviewing a finished design, there’s a tendency to live with a problem and to compromise the effectiveness of the copy in an effort to contain cost and keep the project on schedule.
When content issues are dealt with at the wireframing stage, making changes is a piece of cake. Result: a website that blends the best of copy and design and maximizes user experience on every page.
Wireframes Help Clients Help Their Cause
Wireframes are a visual way to evaluate a new website and, as we all know, a picture is worth a thousand words. When clients green light the design phase of a project based on a sitemap and a few static design layouts, they are, to a certain extent, driving blind.
When clients are confronted with a wireframe, their reaction ranges from shock to total satisfaction (usually somewhere in between). There is no wrong response. It is far easier and less costly — and puts far less strain on the relationship — to address issues in this early phase of the project than later on, or worse, to launch a site knowing it has serious deficiencies.
Almost inevitably, wireframes generate a useful punch list of changes that are routine to make early on. In some cases, a wireframe leads a client to rethink their approach on a more strategic level. Comments typically include:
- I didn’t realize our product line was this confusing
- We have too many options in our navigation: our key pages are getting lost in the shuffle
- Our call to action is weak
- Our Contact form takes too long to fill out
- We’re talking too much about ourselves and not enough about our customer
- Our most important product photos are below the fold: nobody’s going to see them
When conversations around topics like those above are at the wireframing stages, they lead to happier and easier resolutions. When these conversations occur after design and development are completed, they frequently do not.
Wireframes Help Web Developers
Programmers benefit from wireframes. If all the web developer has to go on is a sitemap, design templates and a bunch of verbal instructions from the client and project manager, there are going to be a lot of questions and assumptions as the build process moves forward.
Wireframes give web developers a clear path of what has to be done. It clarifies the direction and objectives of the site build and allows for better decision-making as to which web technologies, techniques and processes should be used in order to achieve an excellent result.
A web development project is a lot like building a house. Both are complicated projects. Both involve teams of specialists working in concert to give concrete form to a client’s vision. If you are going to build a house, you naturally want the best builder you can find. But you also want to equip the builder with the right tools. And you want to make sure the builder has the right process in place to get the job done on time and within budget.
Wireframing is not a cure-all, but is something we’ve found to be a very valuable tool — one we would never dream of giving up.
++Contents from Brad Shorr ,Director of Content Marketing for Straight North