NOTE: This blog has been moved to http://www.looksgoodworkswell.com

Tuesday, September 28, 2010

Snap, Annotate & Share Workflow Tools

Commonly I just want to grab a screenshot or wireframe and annotate it and share it with others for commenting on.

If you are snapping, annotating & sharing something that has a public URL then BounceApp by the Zurb guys is pretty cool. Notable App takes it further, but there are no free plans at the moment and it is limited to snapshots of public URLs. But for that space it is the quickest snap, annotate & share tool I have seen.

But what I have been using of late is two tools to accomplish flow. Little Snapper and Tiny Grab. I like Little Snapper because I don't mess with filenames. And it has a simple interface like iPhoto. And I like TinyGrab because you can drag any image to it and it uploads it to the cloud and creates a tiny url link on your clipboard.

Here is my workflow.
  1. Snap an area with little snapper. No filenames needed. Image displays in Little Snapper (which looks a lot like iPhoto).
  2. In Little Snapper I edit the snapshot.
  3. I use the annotation tools to mark up the snapshot.
  4. Then I drag the annotated image to either the TinyGrab app in the dock or the TinyGrab tool in the upper right area of the system menu.
TinyGrab then uploads it to their servers and creates a tiny URL. It copies that URL to my clipboard.

Then all I have to do is just paste that URL into email, etc.

Then to take it one more step. In gmail, go to Settings: Lab and turn on Insert Images. This provides an image button in the email editor. You can then pick from URL and paste in the URL that was on the clipboard.

This allows me to quickly grab a snapshot, annotate it and share it without messing with file names, etc. Here is a quick video of the annotate & share part of the workflow:



You can also use HipChat or CampFire in this process if you need to also do a lot of collaboration back and forth on an annotated snapshot.

I am curious. What do you use to snap, annotate & share (and collaborate)?

Update. @balsamiq reminded me of Skitch. I hadn't tried Skitch in a couple of years. Looks very promising. All in one tool. I didn't like the way it stored your snaps (as history). Also I wish it just copied a short URL to my clipboard like Tiny Grab. Don't want to go to the website and pick one of 6 different ways to share just for the most common case.

4 comments:

Anonymous said...

Skitch.com. Mac only, very ugly UI but works fast and is simple. Gets clunky for more advanced uses but really well for quick snaps, annotations and a choice of public/secret/private url.

Not used the commenting part of it often, mostly the other parties re-snap and extend on the grab itself.

James said...

I like that workflow, a nice quick way of publishing an annotated pic.

What I keep looking for is something like Confluence, but cheaper or free.
-Take screengrabs or upload PDFs
-Shareable URL
-Everyone can annotate.

Notable looks like the closest I guess.

Anonymous said...

I would usually (as a Windows user):
press printscreen button > paste in Fast Stone Image Viewer > press D for annotating > annotate > press enter > press copy (ctrl+c) > paste into outlook...

I will try to use your suggestions now though :)

David Trejo said...

You might also like markup.io, which makes conversation and annotation pretty streamlined. As a bonus, it uses fancy technologies like Node.js and Raphael.js.