Splash Screen

An intuitive splash screen maker

What is a splash screen?

Splash screens—commonly known as opening screens or startup screens—are a popular feature of many mobile apps, appearing immediately after the user opens the app and before it is fully functional. Regardless of how quickly an app loads, any short delay can feel like a hiccup from the user perspective. A splash screen helps to smooth over those delays for what feels like a perfectly seamless experience.

Most splash screens show the app’s logo as a short animation. The splash screen may include a current version number or a loading progress bar as well.

Although the primary purpose of an iOS or Android splash screen is to provide a smooth transition into the app while it’s loading, there’s obviously a limit to how long users will wait. We recommend keeping a splash screen animation under 3 seconds to keep people from bouncing.

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 app 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 creating splash screens

The following are some best practices to adhere to when making 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 splash screen designs, 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.

Create a splash screen in Framer

In Framer you can make 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 to which it transitions. 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!