This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

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

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:

Insights meet inbox

Sign up for weekly articles & resources.

  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.


Posted by Anna Schneider

Related Content

Get Inspired

How to Build Dynamic Banners that Clients Love

3 MINUTES READ | May 3, 2017

Get Inspired

Stop Wireframing and Start Sketching Your Mockups.

2 MINUTES READ | February 28, 2017

thumbnail image

Get Informed

UI/UX Design Before Development is Important

4 MINUTES READ | February 23, 2017

Get Informed

Virtual Reality and Advertising

5 MINUTES READ | October 5, 2016

Get Inspired

How We Built and Tested a New Website in Five Days

7 MINUTES READ | May 6, 2016

thumbnail image

Get Informed

The Switch: Flash to HTML5

5 MINUTES READ | July 22, 2015

Get Informed

The Redesigned PMG Website (Part 1) : My 5 Favorite Things

4 MINUTES READ | August 15, 2014

thumbnail image

Get Informed

A list from Holiday's 2013

1 MINUTE READ | December 5, 2013

Get Informed

Blogging with Ghost

4 MINUTES READ | October 17, 2013

Get Informed

Will Apple's Retina Display Macs Ruin Web Design

2 MINUTES READ | May 18, 2012

All POST