Prototyping vs annotated wireframe deliverable

30 Jan 2014 - 11:29am
2 years ago
7 replies
3413 reads

I am wondering if it is possible to create annotated wireframes with a browser chrome or a device around the UI that can be viewed in an annotated deliverable but then be able to remove the chrome/device in the prototype version of the same wireframe file. I.e. Maybe put the device/chrome in a layer that can be turned off when the prototype is generated? Anyone have ideas which programs may be able to do this?


11 Feb 2014 - 11:31pm
Jochen Wolters

The two wireframing tools I use on a daily basis are OmniGraffle and Axure RP.

OmniGraffle's page metaphor is the canvas, which can have multiple full-size layers that you can un-/hide.

Axure does not  have layers, but offers "dynamic panels", which are rectangles on a page, that can be un-/hidden, and which can contain UI widgets that are hidden, moved, etc., together with their respective dynamic panel.

Both applications allow static and programmatic (i.e., in response to clicking a widget while in presentation mode, etc.) un-/hiding of layers/dynamic panels.

You can learn more about OmniGraffle, which is available for OS X and iOS, on the Omni Group's website. Axure RP, which runs on OS X and Windows, lives at (Unfortunately, Axure is built on a cross-platform library so that, on the Mac, it does not feel like a native application at all.)

On a personal note, there are many other applications besides Axure and OmniGraffle out there that you could use for the purpose you describe. That said, of all the wireframing tools I've used or test-driven so far, OmniGraffle has the single most effective user interface -- by far. Yes it's pricey, but it is worth every penny if you actually work with this thing. :)

12 Feb 2014 - 7:53am

Thanks so much Jochen!

19 Mar 2014 - 5:50pm

Axure does allow you to capture page notes for each page which can be viewed from the left pane of the prototype. These notes also get included in the specification document along with interation notes. I find this tool extremely useful Smile

19 Mar 2014 - 10:13pm

I am a fan of Invision App for prototyping.  In Omnigraffle, I start with a tabloid sized canvas, one half for the wire itself and the other half for annotations regarding specs and fucntionality.  

In Omnigraffle, I Export single wires by selecting objects that comprise my wires and export to jpg which then upload to Invision and create clickable prototypes.  Easy peasy.  

Most people I work with like it.  

20 Mar 2014 - 9:17am
Jochen Wolters

That reminds me of one of my absolute favorite Nifty Little Features™ in OmniGraffle: The Edit > Copy As sub-menu.

Via this menu, you can copy the current selection to the clipboard as a PDF, PNG, TIFF, and even AppleScript. So if you want to copy (part of) a wireframe into another document, you do not have to take the detour of first exporting it to a file.

I do most of the "designing-thinking" in OmniGraffle. When a wireframe is ready, I'll copy it to the clipboard as a PDF image, paste it into Axure, add annotations, and push the resulting pages to our deliverables website. Thanks to the thoughtful "Copy As" feature, this is a super-smooth, extra-efficient workflow.

20 Mar 2014 - 8:58am

If I'm understanding you correctly, you can do precisely that with Indigo Studio: 

You and viewers can toggle annotations on/off. When you view a wireframe/prototype targeted at a mobile device in a desktop browser, you will see your selected chrome. When viewing on the device, it is hidden, and in the designer itself, you can control the transparency of the chrome.

20 Mar 2014 - 10:33am

This wireframing tool does in-browser, responsive annotations.

Here's a live example:

Syndicate content Get the feed