April 25th, 2012

There will come a time when you will have to start annotating your wireframes and designs. There are many tools out there to use, so, which one is the best for you? Below is a quick summary of a couple of the programs that I use day to day.

Adobe Illustrator

First up we have Adobe Illustrator. I find this invaluable as the majority of my wireframing and annotations are done here. The fact that you can create pages and have them all in one document helps immensely. Exporting and printing is also a plus as depending on how you’ve exported the document you won’t get any loss in quality. Do bear in mind that when annotating a screenshot (i.e. an imported jpeg) there will be some degradation when exporting.


Axure is a bit like Marmite, people either love it or hate it. For me, I’ve found it perfect for creating prototypes to show to stakeholders and clients. Trust me, you’ll be saving a huge amount of time when a user can run through a complex journey when its put down in front of them – not to mention its perfect for early user testing.

Tips for annotating wireframes and designs:

  • Keep your annotations clear and concise.
  • Don’t clutter the page with too many sections.
  • Keep consistent spacing between sections
  • Keep to a numbering system when referring to required areas.
  • Choose a good eye catching colour for your section numbering. I tend to stick to green or orange.
  • Choose a good legible font. Recently I’ve been using Dakota – Handwriting as I like the handwritten style and its less rigid. If thats not your thing, I would go with the tried and tested Arial or Helvetica.

Below are a couple of examples which I’ve worked on:

An example annotations screen

2. Annotations for Raconteur's article page

If you’ve got some examples of annotations you’ve done, please share them. Its always interesting to see the way other people work.