Expand your prototyping knowledge

When should we start to create a wireframe?

When should we start to create a wireframe? Basically, once we’ve defined the pages that are going to be created and what they’ll contain, we can begin the wireframing process. What does this involve? Well, essentially we are drawing the objects that will be present on the pages, without too much attention to detail.

Lo-fi and hi-fi wireframes

A few years ago, web wireframes where mostly made with pen and paper, then later with presentation software. These wireframes did not contain rich interaction or graphics, but were meant to give the audience an idea of what was going on. Most of these wireframes didn’t contain color, images or many other details: they were 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 with the look and feel of the final version. In this way, the clients, (tech-savvy or not) were able to understand what was going on and what the final result was. These were called high fidelity wireframes, and sometimes, prototypes, the latter having a level of simulation that almost looked like the final product.

Things to take into consideration whilst drawing wireframes

  • The reading pattern: our world is made up of over 6,500 languages, with some of us reading from left to right and others from right to left. It is important to understand the movement of the eye, and give precedence to how a certain audience will take to reading something.
  • Fitts’s Law: it’s easier for the eye to target a larger object, than a smaller one. We should try to increase the size of things we want our users to see.
  • Reassurance: it’s important to reassure the user that they are in the place they want to be. We should inform them that they’re in the right section of the page (using breadcrumbs, color or other visual aids).
  • Related information: if we’re designing a travel agency site, we should put the names of the cities in one size and the descriptive text in another, but group them together. We shouldn’t mix different content blindly and wait for the user (or the search engine) to sort them. If you can simplify, do it.

Think about the users, always

Don’t ever create a website without the user in mind. Ask them, work in focus groups, question and create polls. The user’s feedback should always be welcome and heard.

Xavier Renom

About the Author

How to define, validate and review applications before starting to code are his thing. He is interested in everything related to web, mobile and desktop apps and how to prototype and simulate them before development starts. After hours he’s flexing his math muscles.

Comments are closed.