Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Annotate Wireframes?

Annotate Wireframes?

Annotate Wireframes?

Looking for some help here. What is the best way (tools, software, technique, etc.) to take witeframes or UI and annotate them with information for developers to code against. Such as, map a contentId to an area of the UI?


RE: Annotate Wireframes?

Where do you want these annotations to appear?

Normally, we just name the ID of the DIV.

RE: Annotate Wireframes?

After we get the wireframes or UI Flats, would like to take that and mark a circle or something with a number and then draw a table outlining the details.

I uploaded an example of my vision.

I found a free tool called "Greenshot" that gives me the ability to create circles and number them; but when I save it saves an one large image. This makes upkeeping a challenge.

Then I played with OneNote in Windows. Gives me the ability to create tables and all, but creating circles and number them is time consuming.

RE: Annotate Wireframes?

I looked at Pencil, but wasn't able to figure out how to import an image so I can draw the annotated circles and draw the table.

We are doing Powerpoint now but it is so time consuming to create the annotated circles with numbers.

RE: Annotate Wireframes?

Just drag your JPG file for the UI onto a Pencil page.

Regardless of application (PowerPoint/Pencil), you can copy/paste the first number to make additional numbers with the same style.

RE: Annotate Wireframes?

Surely, any half-way decent image editor could handle this. Given a snapshot of your UI as a bitmapped image, it should be easy to add text, arrows, circles, etc. Spamjim mentioned Impress, which would be my first choice, but there are plenty of others, including many which are free.


Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

RE: Annotate Wireframes?

So I reread my OP and I realized I missed one of my requirements...oops

I could use many editors out there like SnagIt, OneNote, Greenshot, etc. but one of the requirement is exporting as a PowerPoint or Word. The usual editors save the whole thing as an image but I am including a table with relevant ID that developers will need to code against. Most developers, like me, copy/paste the variable names and ID and etc. Exporting as an image is not going to work.


Wondering if there is a macro that can create the annotated circles with numbers? That is the most time consuming piece when we take tons of wireframe sand create a design.

RE: Annotate Wireframes?

Maybe you can do the whole thing in Word or PowerPoint? In other words, capture the image as before; insert it into a Word doc or PowerPoint presentation. Then use the drawing toolbar to add circles, arrows, text boxes,etc.

One advantage over using an image editor is that the circles, etc. will remain as separate objects, and can be independently manipulated even after adding them to the image.


Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

RE: Annotate Wireframes?

You can insert/create live tables in PowerPoint/Impress. Both save/export to PowerPoint format. And you can get that table data back out easily.

It would help to know the workflow that gives you the wireframe or UI. I don't understand why the tool that created the wireframe/UI cannot be used to meet your goal.

The requirement to export to PowerPoint or Word seems odd as designers/developers would probably be more comfortable in a free design app like Pencil.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close