If there is one thing I’ve learned about web design over the years it’s that if you want a happy client long after a site launches there needs to be some substance to the work. Pretty is important but will eventually lose it’s shine.

So many times I’ve designed a comp only to have a client look straight past it’s glossiness to focus on the content, or lack thereof. “The navigation is missing a link”, “The product image is missing”, “Where is the text we talked about?” Those are hard things to hear when you’re super-proud of your latest work of web art. Often times both parties end up frustrated at the end.

The solution? Wireframes. HTML ones at that. You heard right! Un-styled HTML baby! At first it will seem unproductive since you’re not sketching or mocking things up in Photoshop but trust me. Things will fall in line. The goal, a clickable wireframe (Frameworks such as Django and Rails facilitate this). This will give you a chance to focus on the message. Then, when your designer gets a hold of it they have everything they need to start designing. They don’t have to invent elements to put into the design. The client will be well aware of what will be “in” the comps and be able to focus on the look come design presentation time.

Think about what a User wants to accomplish and account for those elements. Wireframes are supposed to look bad. Not Michael Jackson Badd. Just bad. That’s not the point though. The point is to get something into a clickable form ASAP. Something you can use to get everyone involved on the same page. You can write a novel about how a site will flow and function but until rubber hits the road it’s all just speculation and a waste or writing. And lets face it, HTML is cheap and easy. There is no excuse for you to not use it. If you can’t do it, find someone who can.

With a wireframe you and the client can point at things and have a mutual understanding of what is to be done and in what context. Try doing that in an outline or even a sitemap. Those things are important and needed to get to the Wireframe but shouldn’t be the focus.

So go on, give it a try. Your designers and developers will thank you. Measure twice, fold thrice, and cut once.