Wireframes: Web Site Blueprints
If you’ve ever built a house from the ground up, you know the critical importance of blueprints. Without them, how would you know what the layout of the rooms would look like? How would the contractors know what to build?
This same scenario plays out in Web design. Only instead of a blueprint, a document called wireframe is used to show where content and design elements will be placed on the site — critical pieces like navigation, contact information, photos, body content, company logos, site search tools and login boxes, among other elements.
When we build Web sites, we roll wireframes into the project. It can be easy to overlook something so obvious, so we would like to take some time to address wireframes and illustrate their importance in Web design.
Before the contractors agreed to build your house, they wanted to see the blueprints to make sure they knew the scope of the project and how much time it would take to do the work. The blueprint shows where the living room will go and how large it will be, how many bedrooms and bathrooms the house will have, and the exact measurements and locations of plumbing pipes. Without the blueprint, the builder has no documented plan to work from, and the future homeowner has no idea what to expect when it’s time to move in.
That, in a nutshell, is what a wireframe is to the Web design industry. Wireframes allow Web designers to accurately estimate the timeline and cost of projects, and they allow the client to see the layout of their Web site and make changes before it’s fully designed.
Wireframes are generally black and white, mainly because the emphasis needs to be on the structural elements of the site, and not the design elements. That will come later. At the time of the wireframe, we are more concerned about how the site elements will be arranged. Wireframes come in a variety of formats – anything from hand-drawn sketches to computer-generated documents.
Once the wireframes are completed and have been approved by the client, the design team the starts to design the site. This is where the fun stuff happens: the walls go up, the paint is applied, the floors are installed — or in our case, the colors are applied and the photos are placed. This is where it all comes together, and in working from a wireframe, there is no confusion among the designers and the client. Everyone knows exactly what to expect.
Conversely, without the wireframe, a Web design project could easily spin out of control, costing the client and design firm time and money. Wireframes are a good way to avoid project headaches and to ensure you don’t end up with a ranch when you requested a mansion. (A word of caution: if you are working with a design firm that does not include wireframes in the project, be prepared to spend extra money and time tweaking the design and its underlying structure after the site launches.)
If you’re in the market for a new Web site, or if your existing site could use some sprucing up, give us a call. You can expect the wireframe to be an important part of our Web design process and an integral piece of your online success.
