A case for annotating wireframes

Clarity is the main goal of any wireframe or UI mockup. What you need to understand at this point in time is that when structuring a wireframe you need to ensure that you :

1. Focus on the client requirements

2. Ensure that the design is clear and uncomplicated

3. And concentrate on annotating the design.

If you have experienced rejection at the hands of your clients, one too many times, you must remember that it may not actually be a fault of your design. Rather it could be all to do with the way you present your design to your client. While most designers are adept enough to get 1 and 2 sorted, then usually forget to do 3. And this is where it all goes horribly wrong.

Looking at a design from a client’s perspective, he/she would need to understand it before taking a decision on it. This is what annotating does.

Consider this task as a step by step guide to the functionality of explaining what a wireframe design is all about. So at this stage, a client would be able to understand the whole concept and then, after much reflection, pass judgment on it.

Find 4 best practices when it comes to annotating wireframes.

1. Short, simple and sweet

Think about it. How many clients do you know has plenty of time for meetings? You get the point. When annotating, make sure that you are clear and succinct in what you state. Be convincing, state the usefulness of whatever you annotate and keep it really short.

2. Annotate for the sake of usefulness

Your wireframe design is meant to solve a problem. Your client is only concerned about how useful your wireframe design is, so make sure that you annotate with “usefulness” being the main priority.

3. Order, please!

So your client has little or no time to spent meandering around a document figuring out how the wireframe design he is looking at is going to him out. If you got the first two best practices sorted out, then all you need to do is to ensure that you arrange everything in numerical order. From the client’s perspective, this will lead to a natural flow whereby all information can be easily assimilated.

4. Get some space

You already probably know how the natural progression is to read from left to right. So its natural to have your design on the left while your annotations on the right.

An example using all these 4 best practices are shown right below.

Image from - http://www.terptopics.com

Learn How Creately Diagrams works

Learn How Creately Diagrams works