When do we start to create a wireframe?

After defining which pages are going to be created and what they'll contain, we start the wireframing process. This means start drawing the objects that will be present on the pages, without much attention to detail.

Lo-fi and hi-fi wireframes

A few years ago, web wireframes where mostly done with pen and paper, and later, with presentation software. These wireframes did not contain all rich details of interaction and graphics, but where meant to give an idea of what was going on. Most of them didn't have colours, images or other detail. They're called low fidelity wireframes, as they were just simple skeletons of the website.

Later, with the evolution of the market, there came a series of authoring tools that allowed the creation of wireframes that had the look and feel of the final version. This way, the clients, and even the less internet literate ones, could understand perfectly what was going on and what was the final result. These are called high fidelity wireframes, and sometimes, prototypes, because can have a level of simulation that looks almost like the final product.

Things to have in mind while drawing wireframes

• Reading pattern: We're used to read from right to left. People that read in other languages often read from left to right. It is important to understand the movement of the eyes, and that we tend to give more importance to what's on the left, and top of the page.

• Fitts's Law: It is easier to the eye to target a bigger object. Let's try to increase the size of the things we want our users to see.

• Reassurance: It's important to reassure the user is in the place he wants to be. Inform him that he's in the right sector of the page (using breadcrumbs, colour or any other visual aid).

• Related information: If you're designing a travel agency site, put the names of the cities in one size, the description text in other, but group them together. Don't mix different content and wait for the users (or the search engine) to sort them. If you can simplify, always do it.

Think about the users, always

Don't ever create a website the way you would like, but the way the users of it will like. Ask them, do focus groups, question and create polls. User's feedback should always be welcome and heard.

If you liked this article, follow our blog's feed or follow us on twitter.