Annotate Wireframes?

[GUJUm0deL]

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?

Thanks

 

[spamjim]

Where do you want these annotations to appear?

Normally, we just name the ID of the DIV.

 

[GUJUm0deL]

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.

 

[spamjim]

This kind of thing could be done in PowerPoint or Impress.

Or you can just drop your flat design in Pencil and add numbers and a table.

http://pencil.evolus.vn/

 

[GUJUm0deL]

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.

 

[spamjim]

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.

 

[Mike Lewis]

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

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

 

[GUJUm0deL]

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.

Thoughts?

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.

 

[Mike Lewis]

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

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

 

[spamjim]

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.