Friday Project Tip: Adding Annotations to Wireframes and Designs

One of the hardest parts of project management is communicating visual ideas to a client. You have a specific vision of how a web site will look and function, and the client has their vision. That’s why communicating visual ideas in the form of wireframes, mock-ups and other designs is critical.

Annotations can help you communicate these design ideas with more precision. An annotation is simply a note that explains a specific part of the design. For example, you could have an annotation explaining why the shopping cart button needs to be positioned a certain way in the header of the wireframe.

This is pretty simple. The challenging part is finding the right way to incorporate annotations into the work. I’ve recently been experimenting with an online tool called Notable that makes this a breeze. You simply upload the design or indicate a URL of a page, add your annotations, and share the link with your client.

There are two views of the annotations. One allows the client to hover their mouse over the annotated areas of the design, and the other gives a list view of all the annotations. Both are effective ways to communicate. Give it a shot!