This guide describes how to create an interactive prototype (like the one on the right-hand side) for your mobile app idea - from PowerPoint/Keynote or from simple images - and view it online, in the browser, and on almost any mobile device. Yes, this is possible before submitting your app into the App Store! It also explains how to use it in order to get feedback about it and capture leads.
This guide is NOT about how to use different mockup and prototyping tools. In this guideline, we will use MockApp for PowerPoint as example. However, you can still use this guide (except the first step, which is specific to MockApp) with any mockup creation tool.
1Create the mock-up using one of the tools available for prototyping
There are many prototyping tools out there, but we like MockApp because it’s free and really easy to use. This is how you do this with MockApp for PowerPoint:
- Go to http://mockapp.com and download MockApp for PowerPoint. As a result, you will get 3 PowerPoint presentations (as of September 2011).
- Copy the presentation Template_if_you_will_demo_on_iPhone.ppt under the name YourApp.ppt and start designing your mockup in this presentation by adding UI elements from the Mockapp_Library_110.ppt.
2Export the presentation slides as images
This is how you do this:
- While in the presentation YourApp.ppt, go to Save as and select Other Formats from the menu.
- In the pop-up Save as, select JPEG File Interchangeable Format (*.jpg) for the Save as type and click the button Save.
- A pop-up will appear asking you if you want to export every slide in the presentation or only the current one. Click the button Every Slide. The slides will be exported as JPEG images in the folder called YourApp located in the same place as the PowerPoint presentation.
3Upload the exported images to AppDemoStore and generate your online interactive mockup
Go to www.appdemostore.com, sign up for a free account, create a new demo and upload your screenshots to it. Add a device frame, annotations, interactions and animations to it simply by clicking on the predefined controls.
The demo is HTML-based, thus runs in any desktop or mobile browser. We support the free account with Google-ads, but we try to keep them at a minimum. You can remove all the ads by upgrading to PRO.
4Share or publish your mock-up and get feedback
You can view your interactive mock-up in any modern browser on your mobile device or tablet with the link provided on the demo page. Moreover, you can do even more with your mock-up:
- Share the link to your demo via Email or social networks.
- Embed it in your website - get the embedding code on the demo page.
- Embed it in a Facebook Page. Learn how to do this here.
- Embed it in your app. Learn how to do this here.
- Download it as an HTML file and use it as you wish (PRO feature only).
- Capture leads and feedback with it (PRO feature only).
- Get in-depth demo analytics such as where did user click, interaction flow, exit screens, etc. (PRO feature only).