Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Tool for turning screen shots into clickable interactive demo

VirtualRain

VirtualRain

macrumors 603
Original poster
Aug 1, 2008
6,304
118
Vancouver, BC
Hey, I could use some advice...

I have a bunch of screen designs for a web app from our designers in Sketch that I can export as PNG. I need a tool that will allow me to construct a clickable interactive demo... Such that I can identify a clickable region on one screen that will lead to another. Etc. I need it to be easy and intuitive... I don't have a lot of time to invest. The demo consists of maybe 10-15 different screens. It's not complex.

Ideally it's viewable/usable in a browser when I'm done so I can share it with stakeholders by sending them a link. A nice to have is that if a screen design changes slightly it's easy to update the demo without too much rework.

Thanks for any suggestions!
 
Actually... I'd just use Keynote.

Open an empty slide... place the screenshot there. Repeat for every screen shot that you have.

If you then want to simulate actual buttons... put a transparent object (square, circle... whatever fits) ON the screenshot... right click said object... and select "Add Link". Link it to the screen shot that would naturally follow. Like this... you can create interactive screen shots with ease... no programming skills required!
 
VirtualRain said:
Hey, I could use some advice...

I have a bunch of screen designs for a web app from our designers in Sketch that I can export as PNG. I need a tool that will allow me to construct a clickable interactive demo... Such that I can identify a clickable region on one screen that will lead to another. Etc. I need it to be easy and intuitive... I don't have a lot of time to invest. The demo consists of maybe 10-15 different screens. It's not complex.

Ideally it's viewable/usable in a browser when I'm done so I can share it with stakeholders by sending them a link. A nice to have is that if a screen design changes slightly it's easy to update the demo without too much rework.

Thanks for any suggestions!
Click to expand...


I made you a quick video to show you how to do it... and that it is pretty easy to do!

https://dl.dropboxusercontent.com/u/8343906/Keynote Simulation.mp4
 
Dude. I've been using InVisionApp for this very thing. It's pretty great. It's free if you've only got one project and reasonably priced if you need more. Try it out and you'll love it.
 
VirtualRain said:
Hey, I could use some advice...

I have a bunch of screen designs for a web app from our designers in Sketch that I can export as PNG. I need a tool that will allow me to construct a clickable interactive demo... Such that I can identify a clickable region on one screen that will lead to another. Etc. I need it to be easy and intuitive... I don't have a lot of time to invest. The demo consists of maybe 10-15 different screens. It's not complex.

Ideally it's viewable/usable in a browser when I'm done so I can share it with stakeholders by sending them a link. A nice to have is that if a screen design changes slightly it's easy to update the demo without too much rework.

Thanks for any suggestions!
Click to expand...
Could you be looking for something like 90s style image maps? I haven't done these in so long! I guess I'd just write a couple of lines of code to make it work as an online interactive presentation.

A really quick search: 'Online image map' came up with many things such as this:
https://www.image-maps.com/ and http://imagemap-generator.dariodomi.de/

I haven't used anything like this, but it may start you in the right direction.
 
There are a ton of tools for this now.

InVision
proto.io
Flinto
Marvel
Fluid.ui

Invision is probably the best known and widely used. All are super easy to use. You load in your assets, define hotspots and then pick what types of gestures to trigger them.

In a pinch, keynote can work—its the way we used to do things "back in the day"—but the gesture support of these prototyping apps really set them apart and the result is far more professional.
 
thejoshhoward said:
Dude. I've been using InVisionApp for this very thing. It's pretty great. It's free if you've only got one project and reasonably priced if you need more. Try it out and you'll love it.
Click to expand...

lucidmedia said:
There are a ton of tools for this now.

InVision
proto.io
Flinto
Marvel
Fluid.ui

Invision is probably the best known and widely used. All are super easy to use. You load in your assets, define hotspots and then pick what types of gestures to trigger them.

In a pinch, keynote can work—its the way we used to do things "back in the day"—but the gesture support of these prototyping apps really set them apart and the result is far more professional.
Click to expand...

Thank you. I'll investigate these further, starting with InVision.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back