Five Tips for Producing a Demo Video for Your iPhone App

By
On November 23, 2009
Guest author Aaron Kardell runs Performant Design and created the iGarageSale app.

One of the best ways to showcase your application’s functionality is to produce a great video. A video is one of the few opportunities potential customers will have to experience your application before buying it. And, a great video is an important key to getting iPhone app reviews. Here’s five tips to get you pointed in the right direction:

Tips

1. Record using iPhone Simulator, SimFinger, and Snapz Pro X

Use iPhone Simulator, SimFinger, and Snapz Pro X to record your demo video. The combination provides the illusion of recording directly from the iPhone without the hassle of attempting to record directly from the device.

SimFinger adds polish to videos by:

  1. Providing a bubble pointer to emulate a fingertip driving the app – instead of a mouse pointer
  2. Installing native app icons in the simulator to give the appearance of running on an iPhone
  3. Providing a white background and gloss overlay to give the appearance of an actual iPhone being used, and
  4. Allowing the carrier text and time to be overridden (e.g. display AT&T instead of Carrier)

SimFinger was written by Loren Brichter, the author of Tweetie, and is offered as donation-ware. The source is freely available on Github.

Snapz Pro X is a straightforward screen capture utility that will record a specific selection of your screen and save the results as an MPEG video. Make sure “Cursor Visible” is unchecked, or the SimFinger effect won’t take. Capture a 2:3 aspect ratio area to simplify post production – 320 x 480 for just the screen, or 506 x 759 (give or take) for the entire phone. A free trial of Snapz Pro X is available and costs $69. A less expensive option to consider is iShowU HD for $29.

2. Keep it short

Potential customers and reviewers will make a quick decision on whether to purchase or review your app based on your video. An ideal video should be between thirty seconds and two and a half minutes. Videos that approach the two minute mark should highlight the most important functionality in the first thirty seconds of the video to get the point across quickly to those with limited time or attention spans.

3. Edit using iMovie

Use iMovie to add captions and splice together just the video you need. First time iMovie users may benefit from watching the numerous iMovie tutorials provided by Apple.

Export in Large or HD format for any videos you plan to upload to YouTube or other online services. This ensures that the video will be encoded at high quality. Note that if the source video isn’t large enough, the Large export size may not be available in iMovie. Work around this by adding an image at the end of the movie. The image can just be a white background. Or use the opportunity to provide information on where to find your app.

If you create a second version of the movie for viewing on the iPhone, be sure to use a 3:2 aspect ratio, and use the Cropping & Rotation mode and rotate right 90 degrees.

4. Dub in appropriate audio

Use a voiceover describing the application’s functionality if your application requires detailed explanation. Dubbing in a voiceover is straightforward with iMovie (https://www.apple.com/ilife/tutorials/#imovie-voiceover). Or, if you record your video in one take, you can also record the audio in real-time with Snapz Pro X.

Background music is a simpler option and may be more appropriate for self-explanatory apps. License music for this purpose from sites such as Jamendo. Alternatively, independent artists value exposure and are more likely to license their music for a low-fee (or even no fee) in return for mentioning them in your video. Contact artist’s managers directly to investigate.

5. Host it on YouTube or host it yourself using a QuickTime supported format

A significant percentage of your prospective customers and reviewers will want to view your demo video directly on an iPhone. To ensure iPhone support, host the video on YouTube or host it yourself, using a format QuickTime supports. Also, all Mac owners will have QuickTime, and iPhone owners using a PC will have a very high likelihood of having QuickTime installed, since it is typically bundled with iTunes.

Choose YouTube for free hosting, easy deployment, and to promote sharing and embedding your video on other sites. Upload a high-resolution version of your video with standard dimensions (16:9, 4:3, or 3:2) and include the tag yt:quality=high to force the video to be viewed at high quality. Standard resolution iPhone app demos on YouTube lack detail and appear grainy and pixelated. Consider uploading two versions of the video – the standard one for viewing on a Mac or PC, and an iPhone version rotated 90 degrees to a landscape view. Use user agent sniffing on your website to determine which version of the video to show.

Host it yourself in a QuickTime supported format if you want more control over the layout of the video on your website. Check out the websites for Byline, Convertbot, and Where To? for great examples of how to pair good web design with QuickTime movies.

Up Next

Stay tuned for the next article in this series which provides a tutorial for emulating the launch of native apps (Maps, Phone, YouTube) in iPhone Simulator.

Have your own tips, or alternate suggestions? Leave a comment!

Want to contribute an article? Email Dan. Please include links to writing samples.

15 responses to “Five Tips for Producing a Demo Video for Your iPhone App”

  1. Dan Grigsby says:

    I prefer a different capture and edit setup. I use the setup Geoffrey Grosenbach describes in his excellent, and well worth the $9, screencast on screencasting:

    iShowU classic to do the capture, QuickTime Pro to do edits, and iMovie for recording voice overs.

    Editing feels more smooth with QT Pro, and the classic iShowU is both snappier and easier to use.

  2. Adam Weiss says:

    iPhone Simulator can be a great way to demo your apps to begin with, but it’s really not that hard to record straight from the device if you have the right recording setup (you can make one cheap) and know what you’re doing. I’ve made a number of app demo videos for developers, and they tell me that having a video of the real device makes a difference in press coverage and reviews. My first demo (of the GV Mobile app) has been viewed over 150,000 times on YouTube — and that was made before I knew all the tricks of how to make them look good.

    A simulated video will be good for demonstrating your app, but on-camera demos can get much more attention. More than one of my videos have been embedded in featured posts on sites like Gizmodo, Engadget, and Lifehacker, and I’ve never seen a simulator video featured that prominently anywhere.

  3. Stuart Crook says:

    (I’m afraid this is a shameless plug for my own product, so feel free to delete it.)

    Last week we released SimCap, our $15 iPhone Simulator screen capture utility. It records the contents of the simulator screen, no matter where it is, which orientation it’s in, or how deeply it’s buried. It also shows finger location, multi-touch position, taps, and can automatically crop out the status bar.

    And we should be pushing an update to allow you to record voice-over within the next 24 hours.

  4. Marty Gough says:

    I’ll add the free camera animation files we created to include camera-like functionality to our screen recordings.

  5. Jeremy Olson says:

    I use SIM Finger + Screenflow. Screenflow is nice because you can do any basic editing/polishing in there. Cropping, adding transitions, speeding/slowing down, recording your voice after the fact, adding text overlays—all pretty easy to do with Screenflow.

  6. Berit says:

    Funny, your post came a few days too late for us. We were reflecting a lot about how to make the video for our first app look best. Nice to see that we basically came up with the same ideas as you.
    The post was anyways a good read 🙂

  7. Subhodh says:

    Thanks for sharing information. May be these tips might help me in developing mobile application whihc i am planning to showcase at the upcoming Forum Nokia developer conference on 7th dec.

  8. RichardL says:

    A second recommendation here for ScreenFlow. It makes things like focusing in on the Simulator screen very easy. Titling and callouts are a snap. You can use a finger image for the cursor, but I’ve found using a little semi-transparent circle for the mouse/pointer works well. You can set it to invert or animate on a click/touch. That’s good for tutorials because the user can see when you click/touch.

    The one flaw with most of these screen capture programs and techniques has to do with optimal workflow.

    I find it’s very hard to read a script and perform the actions in one take. And trying to sync the voiceover to already recorded actions is very hard because you are concentrating on two things at once.

    I’ve found it works much better for me to work the way animators do: start with a script and do a really good recording of the script BEFORE recording the screen capture. THEN record the screencast syncing the action to the voice script.

    But I’ve found it very hard to do this with most of these tools. They don’t provide for monitoring of your existing audio while recording a new screencapture with audio. The best solution I’ve found is to record and monitor the voice track from another computer or recorder.

  9. great post. we covered this subject and brought up a few more options for our App Star Awards last year

    https://blog.appsfire.com/app-star-awards-tips-and-tools-to-create-a-pe

  10. Jesus says:

    If you need a professional voice over for this recordng you can write to https://www.locutortv.es