Today we will share with you our experience of how to create a video for the App Store page. What can a developer do? What can you outsource? What features would be better to refuse?

A video in an app description is arranged on the place of the first screenshot and in the App Store search, it’s in the most visible place.

You can choose any frame you want for the preview. It’s possible to upload the video and screenshots only while updating. You can upload different videos for various devices, but you can’t localize them yet: only one video for all the languages. We hope that they’ll eliminate this injustice some time.

Apple requirements

The main Apple requirements and advice are described here. These are the recommendations on content:

  • A video should be suitable for an audience of 4 years.
  • Apple doesn’t recommend to show users or their hands interacting with the interface and asks to avoid zoom in the video.
  • You mustn’t create an illusion with the help of montage that your app contains functions which in reality it doesn’t.
  • You mustn’t use somebody else’s content if you don’t have a special license for it.
  • You can use graphics, captions, music, and offscreen text.

Though, I don’t think that Apple will be furious if you use a zoom or a hand in the shot: screenshots requirements are even more severe but you can’t find an app which 100% conforms to them.

Technical requirements:

  • 15-30 seconds.
  • to 500 MB.
  • MP4, M4V, MOV.
  • height-to-width aspect ratio (a video may be both horizontal and vertical).
  • for 4-inch iPhones (5, 5s, 5c): 1136×640, 640×1136, 1920×1080, 1080×1920.
  • iPhone 6 (4,7 inches): 1334×750, 750×1334.
  • 6+ (5,5 inches): 1920×1080, 1080×1920.
  • for iPad: 1200×900, 900×1200.
  • for 4s (3,5 inches) App Store doesn’t allow to upload videos but on the whole, it’s 960×640.
  • you can upload videos from OS X not older than 10.10 through Safari.
  • the video goes through post-production (on the Apple side) before going to moderation. And it may last longer.

Here’s an example of a good video.

Vertical or horizontal?

Video for App Store is the case when you can make a vertical video if we mean apps for vertical display arrangement.

But the question is: do you need it?

Pros:

  • real size interface on the whole screen — a user has a feeling that he/she has already installed the app and use it.
  • all the little details and text are easily seen.

Cons:

  • no place for additional information.
  • you can’t show the interaction of the app with real objects.
  • you won’t be able to use the video on video hostings and social networks.

The horizontal arrangement gives more space for creativity: you get more area where you can place caption, infographic, illustration, and real environment. It helps to quickly attract attention to interesting features of the app, which is very important as you have little time.

Thus, a vertical video is a great option if an app speaks for itself and you don’t need additional comments. If you need to showcases, you better use a horizontal one.

Work stages

Script

It’ll be easier to get down to scenario if you already imagine what will be shown in the video: interface only, interface inside a phone + footnotes, captions, or interaction of the app with the external world. The complexity of the video, tools, and programs which you’ll need will depend on that.

I usually write scenarios on a table: in the first column, I write time, in the second — what’s happening in the app interface (it may be described with words or you may add screenshots with comments). It’s a basic variant so you can add other columns:

  • offscreen text.
  • captions.
  • infographics.
  • video.

It would be better for perception if you make an accent on cases but not features. 30 seconds of video cover 1-2 cases or descriptions of 5 interconnected features. It’s great if you can tell a story: for example, how different app functions help a user during a day, on all the stages of a trip planning, etc.

The most difficult thing while writing a scenario is not to make a mistake with timing. On paper, it may seem that 30 seconds may contain an endless amount of information. But it’s not true.

In order to evaluate time more or less precisely, we rehearse actions we want to show, make a video file of it and create a draft montage: cut out all the mistakes, pauses, speed up the video to the degree when everything on a screen looks natural and understandable. We also add pauses among the cases or other logical blocks and add several seconds in the beginning and in the end of the video.

Speaker

AppStore doesn’t allow to localize videos, so if an app works in several languages, you should use a minimum of captions and avoid a speaker’s voice. But if you need to use a speaker’s voice it’s better to order it from a professional speaker: you can make it online via a production-studio.

Music

You can select music on stocks, which is distributed according to a Creative Commons license. The obligatory condition is that a license should allow using the track as a part of another composition (in Creative Commons it’s called derivative work). Plus you can buy a track in a production-library.

Interface animation

There are two main ways of interface animation: screen takeover + montage or drawing and interface animation on the base of screenshots.

  • For a screen takeover in OS X Yosemite, you can use a pre-installed QuickTime Player — it can capture video directly from the iPhone or iPad. In Mavericks you should firstly transfer video to Mac with the help of side programs (for example, Reflector) and only then to record it in QuickTime. Most of them are paid but with a trial period which is enough for our goals.
    You can montage it in any convenient program, depending on your OS and experience (Adobe Premiere, Movie Maker, Final Cut, etc). Cut out all the unnecessary pauses, wrong clicks, and speed up final action a little bit. While you transfer to another case, it’s not obligatory to show the way from the previous stage or start page. You can create a montage transfer and start from the needed interface. The main transfers would be better to arrange in accordance with the music.
  • Animation with an interface drawn in the vector is a far more complex task. All the actions are animated in this technique: the appearance of elements, texting, tapping each button, etc. Such an animation looks neatly and gives more freedom: you can add transfers which are absent in the app functionality (only small details, remember that you mustn’t deceive users!), any content (in order to avoid troubles with author’s rights and not to fill in demo accounts in the app). You’ll spend more time creating it so it would be better to trust the task to professionals.

Phone animation

There are 2 ways as well: you can use 3D-model of the device or shoot a user with a real phone (I remind you that Apple is against it but it’s unlikely that they’ll turn it down because of it).

  • You can download the phone model with animation and the simplest caption from Videohive. You’ll get your own pattern in the format of After Effects for 20-30$. It’s easy to work with it and you can learn using it from the scratch: necessary data is indicated in the name of each track. But surely you can recognize a pattern in this format at first sight. If you want to change it a little bit but haven’t worked with AE previously, I recommend learning the basic course by Andrew Kramer.
  • It would be better to order shooting of the video from a freelancer or a studio. Pay attention to how to interface animation is placed into a phone screen. I don’t recommend shooting phone live: because of the difference in light and color temperature, it would be difficult to create a video so that it looks OK, not speaking about endless attempts. So the best way out is to make a green screen and place needed animation later on.

Motion-design, infographics, captions

You can add a caption in any montage program: the key thing here is simple animation, good taste and ability to work with fonts. If you need animated infographics or illustrations, it would be better to trust the task to a motion-graphics studio or freelancer-video designer.

You can make a whole video animated: show users, advantages of the app, problems it solves, and scheme interface where it’s needed. Such a video looks better but it violates the main Apple requirement — to show real interface. We’ll see if moderators tolerate this.