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.


  1. 10/9/13 | 13:41
    Alex James


    Great tips for annotating. I use green funnily enough, here is an example for the developer to explain the code for a particular control:


    I’m a fan of Axure having started with Balsamiq I find Axure more dynamic.


  2. 10/9/13 | 14:13

    Hi Alex,

    Its been a while since I’ve written a post on my blog but I’m glad you found it useful. In regards to this post, the important thing to remember is as long as you get your point across it really doesn’t matter what tool you use.

    Here’s to good UX all round!

    – Faren

  3. 22/2/15 | 20:45
    Don Droga

    Any tips on how to annotate other people’s wireframes. It seems I work with a lazy designer who is handing is wires off to me to annotate.

  4. 23/2/15 | 10:06

    Hi Don,

    In my experience, its best to sit down with them and go through their wireframes. That way they can explain their thought process and you can give your ideas or recommendations. More importantly, don’t be apprehensive of airing your views – some UXers have their reasons which may have seemed like a good idea at the time but someone else might have a different approach. Remember, User Experience is fundamentally finding out what works for the user and the best way to start that process is by asking questions.

    Hope that helps.

    – Faren

Leave a Message