How to make a great video for an app page in App Store

Alexander Sergeev

wrote this on Апр 24, 2015

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

A video in an app description is arranged on the place of the first screenshot and in App Store search it’s on 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 audience from 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 licence for it.
• You can use graphics, captions, music and offscreen text.

Though, I don’t think that Apple will be furious if you use 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): 1136x640, 640x1136, 1920x1080, 1080x1920.
• iPhone 6 (4,7 inches): 1334x750, 750x1334.
• 6+ (5,5 inches): 1920x1080, 1080x1920.
• for iPad: 1200x900, 900x1200.
• for 4s (3,5 inches) App Store doesn’t allow to upload videos but on the whole it’s 960x640.
• you can upload video from OS X not older than 10.10 through Safari.
• video goes through a post production (on the Apple side) before going to moderation. And it may last long.

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 interaction of the app with real objects.
• you won’t be able to use the video on video hostings and social networks.

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 show cases, 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 external world. Complexity of the video, tools and programs which you’ll need will depend on that.

I usually write scenario 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 accent on cases but not features. 30 seconds of video cover 1-2 cases or description 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 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 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 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 pre-installed QuickTime Player — it can capture video directly from 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 Premier, 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 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 vector is a far more complex task. All the actions are animated in this technique: 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 on 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 phone model with animation and 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 to learn 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 interface animation is placed into phone screen. I don’t recommend to shoot 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. If you don’t need to show a complex interaction with interface, then you can use TrackFinger app. It tracks finger movements and collects the information to an After Effects project.

 

Motion-design, infographics, captions

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

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 main Apple requirement — to show real interface. We’ll see if moderators tolerate this.

Here are more useful articles for you:

• Getting started with App Previews.
• App Previews: thoughts and tips
• Video from WWDC 2014