< Back

Wireframing: What It is and When You Need It

By: Mary Barbour

A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page, i.e. where the content sits and how much space it takes up. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

You should decide right off the bat whether or not your site requires a wireframe. Many design firms will insist that you absolutely need a wireframe, regardless of the complexity of your site. At Command C, our approach to wireframing tends to be more instinctual and organic. Wireframes can never hurt, but sometimes there is not enough content on a site to warrant a complex wireframe. Simple sites can be diagrammed by a sketch on paper, while other sites have so much content that designing without a wireframe could end up confusing and lead to headaches down the road.

If your project is complex and you are interconnecting many different parts, a wireframe will serve you well. You want to ensure you’re not looking over any bit of content and that all the information fits together in the most sensical way. Softwares such as MockFlow.com, omnigraffle.com, and many others in between, are available to help design a wireframe.

This is where information hierarchy comes into play. We like to label each piece of content in terms of its importance level. For instance, if your customers need to contact you in order to make a purchase, you want your contact information to be readily accessible. You want it to be big, bold, and easy to find. Other information, like your warranty, for example, should definitely live on the site, but might not need to be as prominent as other content. Wireframing can help to ensure that the users eye is directed to the most important content and make sure information is in the right spot. Some of this, as we’ve said, can be done intuitively, but when you are packing a lot of information into a site, wireframing is a helpful tool in the beginning stages.

It’s good to have a clear idea of how much content you’re planning to have on your site before you begin looking for a web designer. With some projects, the money spent on wireframing will be insignificant compared to the money it saves in overhauls and redesigns over the long term. But if a site is fairly simple, we’re always happy to save our clients a little money by interweaving the site with design, foregoing the time it takes to create a costly blueprint.

Posted in: All Tags: