Prott is a free online prototype maker to add interaction to screenshots. Using this prototyping application, you can turn screenshots of your prototype into interactive screens of a website or mobile app for various devices like iPhone 5, iPhone 6, iPhone 6 Plus, iPad, Nexus 5, and more. Actually, what happens is when you import screenshots to this application, it lets you select any specific area of a screenshot and then link it to another screenshot. After that, whenever you click on that particular area of the screenshot it will automatically redirect you to the linked screenshot. Similar to another application Indigo Studio, you will be able to understand how your prototype’s user interface will work when your app goes active.
When linking screenshots, you can choose between 9 different gestures for redirecting to the linked screenshot. In addition to that, you can also select different transitions (currently only 9 transition effects are available) for the change of screenshots. If you want some assistance while making your prototype screenshots interactive, then this application also allows you to invite others for collaboration.
Note: The free version of Prott is limited to only 1 user and 1 project. However, the number of screens and collaborators which you can use are unlimited in the free version.
How to Add Interaction to Screenshots of your Prototype using Prott:
Step 1: Visit the homepage of “Prott”and register for your free account. After that, the dashboard will open up and you will see a button named, New Project on the right. Simply click the button to create your new prototype project and add interaction to the screenshots. First, you can give a name to the project and then choose a device for your prototype. The available devices are iPhone 5, iPhone 6, iPhone 6 Plus, iPad, Nexus 5, Nexus 6, Nexus 7, Apple Watch (38 and 42 mm), and also web application. If you want to try out your prototype for any other devices, then you can select the Custom option.
Step 2: After selecting a device, you can choose the status bar style (black, black translucent, and white translucent) and orientation (portrait and landscape). To set status bar style and orientation, click on the option “Set Detail” below the devices drop-down menu. Once you’re done, hit the “Create New Project” button to proceed.
Step 3: When the new project is ready, you can go ahead and import your prototype screenshots from your PC or Dropbox account. After importing screenshots, simply select any one of the screenshot to start adding interaction to it. Now, on the preview screen the selected screenshot will be visible and you can simply select any specific area of the screenshot by dragging your mouse cursor. When any area is selected, a connector will appear which you can place on any other screenshots, as shown below.
Step 4: After placing the connector, a popup window will appear with all the available gestures and transition effects. Currently, Prott supports only 9 types of gestures and also 9 different types of transition effects. You can assign a gesture to the selected area of the screenshot and make that area interactive. Now, whenever the gesture is performed on that particular area, it will redirect you to the other screenshot which you’ve linked using the connector. The transitions can be added to the change of screenshots. For example, lets say you’ve added the “Flip”transition effect, then when you perform the gesture the screenshot preview will flip and open up the linked screenshot.
Step 5: In the same manner, you can select any screenshot you want and make any part of the screenshots interactive. Finally, when you’re done with adding interaction to your prototype screenshots, click the Preview button at the top to check out how the added interaction works and how your prototype’s user interface will look like after it gets live.
Step 6: Another useful feature of this prototyping tool is that it allows you to invite others for collaboration. If you want to make your screenshots interactive with the help of your team, then go ahead and use the collaboration feature to invite unlimited members to your prototype project. You can also save and share your project via unique URL, Slack, Hipchat, and even get the embed code for displaying it on your website.
My Final Verdict:
It is a pretty useful application and can come handy when you are making a new website, building a new app, or designing simple prototype ideas. You easily add interaction to your prototype screenshots and then see how they act with different gestures and transitions. If you’re an app developer or web designer, then you got to try this app as you will be able to check out the working of your prototype user interface by making screenshots interactive.
