• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
March 24, 2017

TURN YOUR STATIC WIREFRAMES INTO CLICKABLE PROTOTYPE IN MINUTES

Posted by Anna Schneider

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:

  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.
Developmentprototypingsketchuxwireframes
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020
  • A Closer Look at the Congressional Big Tech Market Power Report
  • What to Know About Reddit

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.