Tool for turning screen shots into clickable interactive demo

Discussion in 'Design and Graphics' started by VirtualRain, May 6, 2015.

  1. VirtualRain macrumors 603

    VirtualRain

    Joined:
    Aug 1, 2008
    Location:
    Vancouver, BC
    #1
    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!
     
  2. MacDawg macrumors Core

    MacDawg

    Joined:
    Mar 20, 2004
    Location:
    "Between the Hedges"
    #2
    Probably a little steep on the learning curve for your needs
    And pricey as well
    But I'd probably use Captivate
     
  3. TheralSadurns macrumors 6502a

    Joined:
    Jul 8, 2010
    #3
    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!
     
  4. TheralSadurns macrumors 6502a

    Joined:
    Jul 8, 2010
    #4

    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
     
  5. VirtualRain thread starter macrumors 603

    VirtualRain

    Joined:
    Aug 1, 2008
    Location:
    Vancouver, BC
    #5
  6. TheralSadurns macrumors 6502a

    Joined:
    Jul 8, 2010
    #6
    You could just share it via iCloud?! The "Link" Feature should work there too.
     
  7. thejoshhoward macrumors member

    Joined:
    Aug 2, 2010
    Location:
    Chicago, IL
    #7
    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.
     
  8. 960design macrumors 68030

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #8
    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.
     
  9. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #9
    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.
     
  10. VirtualRain thread starter macrumors 603

    VirtualRain

    Joined:
    Aug 1, 2008
    Location:
    Vancouver, BC
    #10
    Thank you. I'll investigate these further, starting with InVision.
     

Share This Page