Apps are alive when
Learn how to view your iPhone app prototypes directly on your phone using share.axure.com or your own web server.
Viewing on Your iPhone
Viewing an App Prototype on Your iPhone
Upload your prototype to AxShare by clicking the AxShare button in the toolbar, or Generate > Publish to AxShare in the main menu (F4). If you don't have an account, create a free one by clicking "Create an account" or browse to share.axure.com. Click "Publish" to upload your file. You can also publish your generated prototype to your own web server.
Step 1: Generate to AxShare or Web Server
Next, open the prototype in your browser and get the URL of the starting page without the sitemap. Click on "Show Links and Options" and navigate to the App Home page, or whichever page contains the start of your app design. Copy the URL from the field labeled "without sitemap".
Step 2: Click "Show Links & Options"
Options for configuring the iPhone browser are in the Mobile/Device section of the Generate > Prototype dialog. The settings seen below are the typical settings for viewing an iPhone app on your phone.
The Viewport tag affects the size or scale of the prototype on the device. If your app was designed to a 320 px wide you should not need to edit the default viewport tag settings. "Hide address bar" removes the strip above the browser where you enter a website URL. "Prevent vertical page scrolling" keeps your app design from being pulled from the edges of the screen. Finally, "Hide browser nav" removes the browser buttons when the prototype is launched from the home screen.
Open that URL in your iPhone's browser. Emailing it to yourself is an easy way to get the link to your phone.
You'll be able to interact with your prototype now, but the browser's navigation is still visible.
Step 3: Open URL in Your iPhone Browser
Press the Options button located in the center of the bottom navigation and select "Add to Home Screen".
You will be prompted with a preview of the home screen icon and asked to select a name. Click "Add" and now you can launch your app prototype from the home screen which should show the splash screen and launch the browser without the bottom navigation.
Step 4: Add to Home Screen
Get a realistic app experience by viewing your iPhone app design directly on your phone. Before you start, set up a free account on AxShare share.axure.com to host your prototypes (or you can use your own web server). The tutorial below will use AxShare to host the prototype for viewing on the iPhone browser.
Viewing on Your iPhone Overview
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
Back to Overview
The Round Up
Click the Checkboxes Below to See the Effect on the Browser
The home screen icon is a 114px by 114px PNG image that displays on your iPhone home screen just like a real app. The icon image can be added in the Generate > Prototype > Mobile/Device settings. The tutorial below shows how to to add the icon to your iPhone's home screen.
When designing the icon, keep in mind that transparent areas will be given a black background when viewed on the phone.
Home Screen Icon
The splash screen is displayed while waiting for the prototype to load when launching the prototype from the home screen icon (just like an app). The splash screen image is a 320px by 480px PNG which can be imported in the Generate > Prototype > Mobile/Device settings.
If your splash screen needs to appear in landscape / horizontal view, rotate the image in your graphics tool before importing.
Now your iPhone app design is on your phone's home screen and you're prototyping like it's your job.
This zip contains the iPhone App Template and files to complete the iPhone app tutorials
You might find that viewing a prototype on the iPhone 5 causes the screen to be cut off at the top and bottom. The fix for this is to clear the viewport field for "width", so that it is blank. We include an iPhone 5 template in our download which includes this setting and the appropriate guides. Happy Prototyping!
Viewing on the iPhone 5