A while back I created a simple CSS based solution to annotate wireframes for one of my clients. This created a simple web based view of the wireframes. I created the wireframes in OmniGraffle. As a side note, visit I love OmniGraffle. It’s one of my most favorite applications. The Omni Group makes amazing software in general. If I didn’t have to use a Windows PC for work, I would be using their software all the time. It makes me sad that there isn’t a version for Windows. My favorite part of this solution is that is works on screen and in print. By creating a print version of the CSS it’s a simple process to print out a non interactive version of the wireframes if you need a hard copy.
The basic idea is to have a simple wireframe image loaded up with an image map to handle navigation. The image map part in this example was created using OmniGraffle, but you could use which ever tool you prefer.
HTML of the note:
The CSS used handle to layout and display:
For the print CSS it’s loaded and defined with the CSS print media type
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Here’s the print.css:
Here’s how it looks:
You can view the example of the wireframe notation.
I found this form to very helpful with several of my clients. My favorite part is the ability to walk a client through the interaction and leave it behind since the notation is inline it helps answer most of the questions about interaction that are not represented by the wireframes.