Day 16: On wireframes

My regular posting slipped up a bit but partly I blamed WordPress that lost my post saved as draft and now I have to begin all over again.

So today I want to write about wireframes.

website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

This from Wikipedia. Why Wikipedia you might ask? Because every other website has a much more complicated and subjective view of what wireframes are. What got me really interested is how many different ways there are to use the wireframes in. I always used it as a rough draft for my designs and a html box structure. To be honest, I never really treated wireframes seriously. Well, I won’t make this mistake again. After having read the articles I mention in this post, I’ve learned that wireframes can become a quite powerful tool. So let’s take it one by one, shall we?

Wireframes as design tool.

This is the most obvious use for wireframes. They are used by designers to plan the layout of webpages. A simple sketch from which to work. While this is definitely a valid use, it is not the only one. A special sub-set of designers, the UI designers can also use wireframes to conceptualize user interfaces and the information flow on the website. Simple use of post-it notes can do wonders to interaction planning.

Wireframe as information architecture tool.

Wireframes can be used to organize the content. And this is both valid for single pages and for relations between pages. This helps to establish menu structure and generally organize information hierarchy.

Wireframes as thinking devices.

As this brilliant article from Semantic Foundry explains wireframes can be used to formulate the design problem and, by sketching many concepts, finding the right solution to the problem. I have to say that this particular use of wireframes is especially appealing to me. I tried it in my recent work and it really is a great tool I will keep using. I will never again underestimate wireframes.

Wireframes as communication tool.

Wireframes can also be used to communicate with your stakeholders in the early stages of the design process. Instead of talking away about your communication strategy, you can visualize it to your client using the rough sketches.

Wireframes as SEO tool.

Now this was a bit of a surprise to me. I wouldn’t have expected it but it seems that SEO efforts can also be helped with wireframes. Using wireframes you can plan for keywords’ use and optimizing each page.

http://www.seomoz.org/ugc/seo-wireframing

 

Resources:

Introduction to wireframes: http://gluue.com/2009/01/content-wireframing-ducks-meet-row/

Online tools: http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/

The boxing glove technique: http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique/

All about wireframes: http://wireframes.linowski.ca/