Create an Engaging Splash Screen for Your iOS App
Note: This post was first published on July 14, 2014.
Splash screens appear for a few seconds when you launch a mobile app, serving multiple purposes that enhance the user experience and strengthen your brand. They reassure users that they’ve opened the correct app and provide a perfect opportunity to showcase your app logo. To learn more about designing app icons, check out our guide on creating app icons.
According to Apple, a well-designed splash screen can also make your app appear faster and more responsive. If you’re developing for iOS, incorporating a splash screen is definitely worth considering.
This tutorial is part of our Cordova series. If you’re new here, make sure you’ve checked out our earlier posts on:
- Setting up a project for mobile development with Cordova, here,
- Building a basic UI with jQuery Mobile, here, and
- Adding the app icon, here.
How to Customize Your Android Boot Animation (2 Methods)
Have you ever seen an eye-catching boot animation on a friend's Android device or online? Customizing your own... Read more
Prepare Your Splash Screen Images
First, let’s determine the required image sizes for different iOS versions. As with app icons, the necessary dimensions for splash screens vary by iOS version. Below is a table detailing the sizes needed:
| Size/Platforms | iOS 6.x | iOS 7.x |
|---|---|---|
| 320×480 | ✔ | |
| 640×960 | ✔ | ✔ |
| 640×1136 | ✔ | ✔ |
We assume iOS 7 is installed only on iPhones with Retina displays. Therefore, the highest resolutions, 640×960 and 640×1136, are necessary for devices like the iPhone 5 and 5c, which have a 4-inch screen size.
After determining the sizes, you can create your splash screen images using any graphic design software you’re comfortable with, such as Photoshop. Save your images as PNG files, following the naming conventions used by Cordova and Xcode. This will simplify setup and ensure your images are recognized by Xcode automatically.
Here’s an example of a splash image I created with Photoshop:
Implement the Splash Screen
Now, let’s add the splash screen image to your app. Move your images to the following directory: {TheProjectDirectory}/platforms/ios/{TheAppName}/Resources/splash. Next, compile the app in Xcode by pressing the Play button. Your app will launch in the iPhone Simulator, displaying the splash screen for a few seconds before transitioning to the main app.
Wrapping Up
We have now added engaging content, navigation menus, an app icon, and a splash screen to our app. It’s nearly complete and almost ready for launch. Stay tuned for our next post, where we’ll discuss how to compile your app into a distributable format using Phonegap.