Wireframe Your Website
Save Money, Save Time, Save Sanity: Wireframe Your Website
You’ve contracted a creative firm to design a new website, and they’re sending you the first draft. You know it will be “rough” because they need input from you, but you can’t help but be excited. You open the attachment, and…the image you see is a black-and-white layout, with Xes holding the place of images and “lorem ipsum” filler text where your copy will go later.
Welcome to the wide and wonderful world of the website wireframe! It may not be as exciting as what you were hoping to see when you opened that attachment, but it’s a vital part of the web development process— and it saves you both time and money.
What is a Wireframe?
A wireframe is a visual representation of your website with none of the design elements (color, photos); it’s strictly a layout. It may remind you a bit of seeing an apartment floor plan, seeing the basic shapes and structures before you put your furniture and art inside.
Who does a Wireframe Help?
The wireframe helps the people involved in the design process, including you. Consider this cautionary tale: a programmer and a designer put together a design that they like. The client looks at it and likes elements of it, but tells them to change colors and swap photos around. The programmer and designer make the changes, but then the client asks for even more changes. The process repeats itself until everyone’s exasperated. The real problem here isn’t the design: it’s the underlying layout.
With a wireframe, the client gets the chance to see the website’s structural functionality- its information architecture -without being distracted by the design elements. The client has a better understanding of how the site will work, and can provide valuable, actionable feedback on the site’s layout.
The programmer loves using a wireframe, because the wireframe is easy to change. By contrast, if they’ve built the layout and something has to be changed, that can result in a lot of work, possibly even re-building the entire site from scratch. The feedback the programmer gets from the client is actually something he or she can use, too.
A wireframe also helps prevent a graphic designer from having to re-do a lot of work. Additionally, the wireframe helps the graphic designer know exactly what elements he or she needs to create- how many images, what size, how many fonts, how many colors, etc. This makes things easier for the graphic designer and goes back to the programmer as well, since they won’t have to spend a lot of back-and-forth time trying to get the right image specs and whatnot.
Think about it: a good reactive agency will require weeks or months to build a custom website. The wireframe requires considerably less invested time than starting from a comp which allows for more flexibility in regards to changing it or re-doing it.
But the most valuable element is putting people with very different skill sets- the client, the designer, and the programmer -all on the same page.
Tags: how to wireframe, web design, web development, web programming, what is wireframe, wire frame, wireframe, wireframe tools, wireframing, wireframing tools