The Wonder of Wireframes
There is a lot that can be said about wireframes, both good and bad. While many people feel that wireframes are an invaluable part of the web design process, some feel that they are a relic of the past and should be discarded in favor of more modern approaches. Before some of these questions can be answered, we need some more information, information about things like…
What is a wireframe?
At its most basic, a wireframe is a rudimentary representation of the information that will be found on a web page. There should be few, if any, graphical frills and there should be no emphasis placed on branding or style. The focus of a wireframe should be on content and the organization of information on a page.
One of the reasons for the simplistic design of a wireframe is that it is an evolving document. Changes can and should be made quickly and easily as new ideas are introduced and discussed. The usefulness of a wireframe lies in its ability to evaluate a wide range of thoughts and ideas and allow both designers and clients to select what is best for the website.
A wireframe should not be shown to people outside of the project unless they have an in-depth understanding of the projects content. While it is sometimes useful to ask an outsider for their opinion looking in, a wireframe’s focus on information rather than design limits the feasibility of this approach. A wireframe should not be used to represent a detailed view of the final design of a page, but rather act as a generalized overview of the organization of a page’s contents.
Are Wireframes Useful?
I am of the opinion that wireframes are one of the most important documents that can be created when designing a website. Content is the only reason for a website to exist, and a wireframe is the perfect tool for organizing that content. Those that are critical of wireframes tend to focus on the wireframe’s inability to represent the interactive media that plays such a vital role in web design today. While this is a valid criticism, I feel that this is only a problem if too much focus is placed on the presentation of information rather than the organization of information.
Wireframe Resources
There are countless tools available for easy and effective wireframing. Mashable has a list of 10 free wireframing tools available as web-based products, stand-alone software, or browser add-ons. If you prefer to do your wireframes by hand, Smashing Magazine has free, printable wireframing templates for both web and mobile designs available to download and print.
