PMG Digital Made for Humans

TURN YOUR STATIC WIREFRAMES INTO CLICKABLE PROTOTYPE IN MINUTES

2 MINUTE READ | March 24, 2017

TURN YOUR STATIC WIREFRAMES INTO CLICKABLE PROTOTYPE IN MINUTES

Author's headshot

Anna Schneider

Anna Schneider has written this article. More details coming soon.

Creating wireframes or Sketches is a critical step before developing new software. But what happens when you have multiple wireframes that outline several pages in a piece of software, or several user states that the app can have? It can be a bit overwhelming to review, and you quickly lose the context of what you’re viewing. This is when creating a clickable prototype of your wireframes comes in handy.

Using a 3rd party prototyping software, like InVision, allows you to create clickable, interactive prototypes in just a matter of minutes. There are a lot of prototyping software tools available in the market. We’ve had success with InVision for multiple projects, but you might have to try a few to see which one fits your needs the best. You simply upload your existing wireframe images and use their tool to highlight the clickable areas, add gestures, etc. It’s a very intuitive process and really doesn’t take that long to create.

Upload your wireframe or Sketch into InVision:

Screen Shot 2017-03-23 at 3.59.02 PM

Draw the clickable areas on the page:

Screen Shot 2017-03-23 at 4.07.02 PM

Select the appropriate link for each clickable area:

Screen Shot 2017-03-23 at 4.07.31 PM

The final product is a shareable URL that houses your clickable prototype.

There are two key benefits from taking this extra step before any development is started:

Stay in touch

Bringing news to you

Subscribe to our newsletter

By clicking and subscribing, you agree to our Terms of Service and Privacy Policy

  1. It forces you to think through all the scenarios of the software. Once you start interacting with the prototype, you’ll be able to see if you thought of all the user states. Did you account for what happens when X button is pressed? What about when you take Y action on the page?

  2. It allows you to show the prototype to stakeholders and users of the software to see how they interact with the software. Do they find it as intuitive as you hoped it would be? Were they able to find the new feature? Then you take this feedback and iterate on the wireframes before you start building. Priceless.


Related Content

thumbnail image

Stop Wireframing and Start Sketching Your Mockups.

2 MINUTES READ | February 28, 2017

thumbnail image

UI/UX Design Before Development is Important

4 MINUTES READ | February 23, 2017

thumbnail image

Virtual Reality and Advertising

5 MINUTES READ | October 5, 2016

thumbnail image

The Switch: Flash to HTML5

5 MINUTES READ | July 22, 2015

thumbnail image

A list from Holiday's 2013

1 MINUTE READ | December 5, 2013

thumbnail image

Blogging with Ghost

4 MINUTES READ | October 17, 2013

ALL POSTS