Splash Screen

Learn more about splash screens

What is a splash image?

Splash screens -- often known as opening screens or startup screens -- are a common feature of many mobile apps, appearing immediately after the user opens the app, but before it is fully functional. Regardless of how quickly an app loads, there are always several short tasks to be carried out before users can interact with it. A splash screen serves to smooth over any delays from loading.

Typically a splash screen consists of the app’s logo - often displayed as a short animation - and may also include the current version number, and occasionally even a progress bar. 

Although the primary purpose of an iOS or Android splash screen is to provide a smooth transition into the app while it’s booting up, there’s obviously a limit to how long users will be willing to wait. For this reason, it’s recommended that a splash screen animation lasts no longer than 2 or 3 seconds - no matter how impressive your intro video may be.

Why app splash screens matter

Similar to the splash pages that appear when first landing on some websites (or YouTube splash screens before videos), a splash screen is effectively a way of buying time while the full app loads. However, ideally, it should go much further than this, by also making a strong impact on UX.

Simply put, first impressions count. A sleek, stylish, and seamless splash screen will raise expectations(and likely also perceptions) of your app among users. This will help to reinforce the image of your app as a high quality, well-designed, and supremely usable bit of software.

Get your splash screen right, and users will enjoy being greeted by it each time they load the app. Get it wrong, and they’ll see it as a waste of their precious time.

Best practices for using splash screens

The following are some best practices to adhere to when putting together an app splash screen. Follow these guidelines and half the battle is already won.

● Keep the duration to under 3 seconds.

● Reduce this to 1 second for apps that users are likely to open several times per day.

● When evaluating design ideas, go for simple and bold over complex and intricate.

● The same for animation; overly complicated sequences will only appear showy, and likely make users feel that their time isn’t valued.

● A strong background color or even a background image can be good options. However, if your splash screen features an animation, a basic solid or gradient background will likely work better, providing a clean canvas against which the action can take place.

● Ask a developer what’s the absolute minimum number of tasks an app must carry out on boot-up, and they’ll likely provide you with a list as long as your arm. Stay firm, and insist that this be reduced to only a handful of key tasks, with all the others taking place once the app is running.
● If you really want to produce a more complex intro sequence with flashy animation and special effects, keep this for only the first time that the user starts up the app, switching to a more simple version for all subsequent occasions.

How to make a splash screen in Framer

In Framer you can replicate a splash screen by using the out-of-the-box Video Default Component. Start by creating two screens using the Screen tool. The first screen is where your video will play, and the second will be the screen it transitions to. Next, insert the Video component from the Insert Menu. Place the Video component on the first screen and upload a video from your computer or link one from a URL.

With the Video component selected, set the controls to Autoplay: Yes, and Loop: No. Set the Interaction of the Video component to transition when the video ends, then set the Transition type to Magic Motion. Now your splash screen is ready to go!