Roslyn Zolandor Team : User Experience and Information Architecture Tags : Web Design Web Development

3 Rules to creating great wireframes for your designers

Roslyn Zolandor Team : User Experience and Information Architecture Tags : Web Design Web Development

When creating wireframes or a prototype for a project there are several things I need to keep in mind so that our designers can create an amazing design.

Explained properly to a client prototypes and wireframes can be a great way to lock down, demonstrate  and flesh-out a sites functionality.  It also has the added advantages of keeping a project on specification and budget.

Can a wireframe limit the creative process and therefore limit a sites full potential? The answers is yes but it can be reduced by following these 3 rules:

Fig 1: Wireframe for CareerNav

  1. Limit Colour

    My colour pallet when designing wireframes is black and levels of grey with the exception of link blue used for the sole purpose of highlighting a clickable element on the prototype and the red dotted line to indicate the above the fold. The reason for no colour is that the prototype is for functionality and so when you use colour you start crossing the line into design.

  2. Limit graphics

    No rounded corners, drop shadows or dotted lines as these are all design elements. I also use a place holder for a clients logo and other unnecessary graphics as any colour or form can distract from the main element on the page when everything else is black and grey.

  3. Be flexible

    You’ve created your wireframes and you are proud of them.  They go into design and what happens? Well in most cases they follow your wireframes to the letter but occasionally they place a say a flash element where there wasn’t one. This is where you need to be flexible and ask yourself does it improve the site and if the answer is yes then take your case to the client.

    Because your main goal should not only be to deliver a functional site but a great looking site too as they are not mutually exclusive.

Fig 2: Career Nav - http://www.careernav.com.au