Make Useful Annotations

The Challenge

Wireframes. UX professionals are quite used to and comfortable creating these, however annotating meaningful is still a major challenge for many. There was a time I created wireframes with no annotations, and haven been employed in a role where annotations have been critical, I had to learn fast. One didn’t have the luxury of communicating face to face with developers because they were in another country so clear and concise annotations were extremely valuable.


Now, I love to tell stories about how everything connects in the world, but a developer who has a deadline has no time for this, maybe after work in a pub. Learning how to write useful annotations has been under the guidance of very helpful ‘bosses’ who would edit my work, and we would extract what was most valuable depending on the situation or context.

Things to be mindful of;

1. The Audience – Who will use the wireframes, drop any technical speech, it should be in language that everyone can understand.

2. The Use – Currently some of my wireframe documents double as a technical documentation for developers, so there is a lot of revision being done, updates which are necessary in case some else picks it up. You should be prepared to make any change and keep a note of it.

Going Further

I began thinking about how to make annotations work harder, after an issue that made me point the developers to a particular implementation solution which was done via email. I thought I would have saved everyone’s time if I had just put this in the wireframes. So annotations go from just describing the interaction but also suggesting possible ways to implement the interactions. Even if they cannot build it that way due to one reason (technical constraints, time limit, low resource ) or the other, It creates an open and collaborative environment where everyone learns to help each other out.

An example would be a scenario where you want replicate the Amazon flyout menu . You can describe it, but it would be useful if you can point them to an implementation method like Ben Kamens’s breakdown 

Stay Curious.

About these ads


  1. Hi,

    Beautiful site!

    I scan my wireframes, then open in PS and use the ‘Axure Handwriting’ font with arrows to annoate. The arrows I found are from the adobe exchange, that I install and select from brushes palette. This has a real authentic look when combined, and is quick to maintain.

    1. That’s interesting, you say it’s quick but it looks like some work.
      The thing about using handwriting is, not everyone will understand your alphabets but an A in times new roman is largely universal.

      1. It does look good, I’ll probably try it as well however it’s always best to go with the plainest of things to avoid confusion.

        I don’t use the site but I’m going to bookmark it now.


  2. Thanks, seeing that it was posted on the day I wrote this is very nice. I really like the point about use of language in helping UX become part of the conversation. UI specifications instead of ‘wireframes’. Wireframe has a broad meaning, so it helps to be straight to the point about what you are actually delivering.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s