UI markup tools for snagit

  • 3
  • Idea
  • Updated 1 year ago
A common need I have is to describe changes I want to see in a UI, usually a web page. There are UI wireframe/mock up tools out there (Moqups and Balsamiq come to mind), but they tend to assume you're starting from scratch. UserSnap is the exception, but that's basically a closed/self-contained service oriented around providing a complete support experience. That's too much scope for what I want.

What I would love is for SnagIt to have a library of UI elements I could drop on a screen capture -- buttons, checkboxes, dropdowns, and text boxes. That way, I can start from an existing image of something and just tweak it a little bit, then paste the modified image in my project management tool of choice. I considered using both SnagIt and Moqups together -- capturing from SnagIt, then marking up in Moqups, then pasting back in SnagIt, and that was untenable the first time I tried it.

I looked around on SnagIt's Library tab thinking that it might connect me with external/3rd party shapes that might be relevant, but it didn't seem to do that.

In addition to ability to drop controls on a screen capture, the other thing that would make it really useful is ability to insert horizontal or vertical white space in a capture as a single fluent action. It's one thing to drop text boxes and buttons on a page, but you often need to make room for the new controls first by scooting existing content down or horizontally. For example, here's the capture I did from the SnagIt + Moqups combo. Notice how the text area and dropdowns simply hover on top of image content that was there originally. Ideally, I would be able to scoot the relevant image content downward before inserting my controls.



Thanks for considering this!
Photo of Adam O'Neil

Adam O'Neil

  • 6 Posts
  • 1 Reply Like

Posted 1 year ago

  • 3
Photo of Rick Stone

Rick Stone

  • 4498 Posts
  • 2007 Reply Likes
Hi there

Are you using version 13? I ask because I believe version 13 contains a list of UI elements available as stamps. Here is a screen capture of my own version 13.



Note as well that you are able to save any images you want as stamps too. So you could "build your own collection" if those don't offer what you need.

Cheers... Rick :)
Photo of Adam O'Neil

Adam O'Neil

  • 6 Posts
  • 1 Reply Like
I was using 12 -- thanks for pointing out obvious solution!
Photo of Rick Stone

Rick Stone

  • 4498 Posts
  • 2007 Reply Likes
Also, forgot to add that version 13 also has that way cool ability to select items and just move them and have it auto-fill the background so that it appears you just click and drag to relocate. 

Cheers... Rick :)
Photo of Paul

Paul

  • 1146 Posts
  • 908 Reply Likes
If I get booted off for saying this, so be it!  I have exactly the same issue as you.  I use SnagIt to capture existing UI pages or elements and import them to MockFlow to model the changes.  It has all the 3rd party elements you are looking for and you can create your own library of them.  But you do, of course, have to buy a licence for it.  SnagIt and MockFlow are the perfect combo for me.  I haven't found anything they haven't been able to handle between them yet and I have mocked up hundreds of screen designs.

Paul
Photo of Rick Stone

Rick Stone

  • 4498 Posts
  • 2007 Reply Likes
Why would you get "booted off" for your statement? Sounds perfectly reasonable to me.
Photo of Best Power Drill

Best Power Drill

  • 1 Post
  • 0 Reply Likes
The operation which you have shared for using the image editing tools is pretty impressive thanks for sharing this.
http://bestpowerdrills.net/cordless-drills/
Photo of Ren Raja

Ren Raja

  • 1 Post
  • 0 Reply Likes
Thanks for the instructions.

Melon
(Edited)