In-App Storyboarding Mockups

Click Here To See It in Action! This fictional app “TravlAgent”, can be shown in the simulator and installed on a phone.  It’s a series of image-mapped screenshots.  A great way to demo or pitch apps!

PointAbout has developed a way to perform in-app storyboarding mockups right from iPhone & Android phones. This high-ROI process only requires the use of a designer with Photoshop skills or similar to produce completely realistic iPhone and Android app mockups. It’s a stunning way to pitch clients on mobile applications, and then you can use our phone2projector device to demo the app on a projector, and/or put the app on a handful of iPod Touches to let your clients try the app out themselves.

The in-app mockup process can be handled by PointAbout for $250 for 1 to 5 screenshots + $60 per additional screenshot. Just contact us at right or call 1.800.976.3703. Our turn-around time is typically 3 business days (you can rush the order for an additional $100).

Here’s what we need from you:

1. Have a designer create a mockup of the application in Photoshop or any editing software. The mockup should have the following characteristics:
   1. For iPhone, the icon should be a 57 x 57 pixel square, flat PNG. No rounded edges or gloss; we add that when compiling the app. Here’s an example of what the icon should look like.
   2. For iPhone, the splash screen should be a 320 x 480 pixel flat PNG. Here’s an example of what the splash screen should look like.
   3. Create one or more PNG or JPG screen mockups of the app itself. The picture size should be 320 pixels wide by 460 pixels tall (the actual phone screen is 480 pixels tall, but the carrier bar takes up 20 pixels at the top).

You can also handle the rest of the process yourself for free if you have the time and HTML or Dreamweaver experience. Here are the steps:

1. The next step is to host these images on a URL. If you have some HTML experience, this should be easy. The end result will be something like www.YourDomain.com/Image_1.jpg , www.YourDomain.com/Image_2.jpg , www.YourDomain.com/Image_3.jpg ,etc.
2. Then, you want to use image mapping software, such as Dreamweaver, to create an image map of the images (to simulate clickable buttons, etc.). If you’re not sure what an image map is, click here.
3. Lastly, you (or we) will use our tool www.AppMakr.com to create a native application out of these linked, image mapped images, which will result in an “in-app storyboard”.

Presto! Now you have a native app that sits on an iPhone or Android device. Once the app is opened by clicking on the icon, your mockup screenshots come up, just like the native app would. Visually, the mockup is completely indistinguishable from a functioning native application. And by making parts of the mockup clickable using image maps, you end up with what looks like a fully native application but with just very little design work, and no development work.

In your head tag, add the following code to lock your screen left to right:

Note: The < and > brackets have been removed from the code samples below. Add them back in before using code

meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /

And write your body tag as follows to remove any padding:

body style="padding:0; margin:0"

Note: All links (to images and web pages) must be absolute, and not relative.