User Experience

Wireframing Guidelines


When I started wireframing about 1 year ago my biggest difficulty was figuring out what to wireframe. What should I wireframe so that the designer and, ultimately, the developer understood well my ideas?

During this year I was able to come up with a set of guidelines that help me through this process. It’s still a work in progress but here it goes.

Search Engine Optimization (SEO)

Before you start wireframing you must have an idea of the structure of your website. Without a structure you’ll be wireframing in the dark. So make your sitemap, task flows, etc. but take into account SEO. SEO has a direct impact on your site taxonomy and therefore on the type of pages your site will have. Here’s a great article to help you with this:


What is the width of the pages you wireframe? How do you layout the elements?

I usually wireframe sites for 1024×768 resolution and as I consider the width of my page (usually between 940px and 960px) I must also take into consideration the vertical area visible when the page loads, because this is where you want to put the most important elements. This area, also as I call it “area above the fold”, measures 600px.

Laying out you’re elements can be hard sometimes. However there are some guidelines to help you. The 960 grid system divides the width of your page in columns that you can use to dimension your page elements:


Starting “decorating” your wireframe can be one of the biggest mistakes you can make. When the wireframes go to the designer he/she may choose to take the design into a completely different direction and all the effort you had turns out to be a total waste of time. Other possibility is that the designer gets stuck with what you made and the final result it’s not that good. So keep your wireframes simple, don’t use color unless necessary (stay with white, black, and shades of grey), use standard fonts, like Arial or Helvetica, and focus on the Usability of your interface, not on its look.

Be rigorous

When I built my firsts wireframes I used to think they were perfect and nothing could go wrong. However when the site was being developed I got myself thinking “Damn, how could I forget this?”.

The truth is, on the beginning when I was wireframing my pages for the best case scenario. And when things got out of that scenario the result was away from perfect. That’s when I realized that I must think of every possible variation of the elements I put on my pages. For example, when filling a form where do the validation errors appear? Or, in a page that lists news, if the title of one of them is very long, how does the element behave?

It’s true wireframes aren’t intended to represent function, however you must have a very clear idea of how it will function if want to do a good job.

Test your wireframes with real content

Sometimes your wireframe may be perfect but the for the content those type of pages will have, it will suck. For example for a product page, you do your research and come up with a product page that clearly explains your product, all it’s characteristics, and you fill it with “lorem ipsum” text, you think that it’s gonna work  just well. However when it’s time to put the real content on the pages you see that you have much more or less content that you expected, and you see that your layout is not going to work that well.

I know that it can be complicated to anticipate the  real content of a page but try to be realistic. The time and dedication of your client and of the one who’s going to make the contents, can be a good anticipation.

Other resources:

* image from Matt Brett


Susana Vilaça

One thought on “Wireframing Guidelines

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.