Design launch screens for seamless starts
April 23, 2020
Instantaneous app launches are a big part of providing a great experience on iPhone or iPad. Whether someone is tapping on your app icon for the first time or returning from elsewhere, they should be able to get started immediately. A launch screen lets you provide that seamless and adaptive experience while your app loads any pertinent information in the background, and you can create it directly in Xcode.
Designing the right storyboard for your launch screen can make a world of difference in how quickly you can immerse people into your user interface. Here are a few recommendations and tips to help you create great launch screens for your app.
Support all device screen sizes by creating launch screen storyboards in Xcode
Although people won’t be able to interact with your launch screen, you should always build your screen using an Xcode storyboard. Storyboards are flexible and adaptable and support all device screen sizes, which allows you to use a single storyboard to manage your launch screens for every platform you support.
Note: Don't use a static image for your launch screen. Static images have been deprecated and all App Store apps must use an Xcode storyboard to provide an app’s launch screen by June 30, 2020. Learn more here.
Mirror your main screen
The fastest way to convince someone your app is responsive and ready to go is to show them the same interface in your launch screen that they expect on your app’s main screen.
When an app first starts up, it shows its launch screen before transitioning to the main interface. When someone switches away, the app automatically saves an App Snapshot of its interface so that it can return to where they left off; if an app can’t restore its state in this way, however, it will display the launch screen instead.
As such, you want to make sure your launch screen storyboard looks close to identical to your main interface. If you include elements that look dramatically different, it may be confusing or jarring when your app shifts to the main screen. If you have an app that might take a bit longer to load, like a game, and you’d like to provide any kind of animated experience during that time, we recommend using a solid color background; from there, the app can move gracefully to the game’s first screen.
Consider the light and the dark
When someone launches your app, you want them to feel immersed — no matter their appearance settings. We’ve already addressed how to create adaptive launch screen storyboards, but it’s also important to think about a device’s appearance. If your app supports Dark Mode, your launch screen storyboard should as well. Make sure that your storyboard uses adaptive colors, and set the background of the view to the System Background Color.
Assess your assets
Anything you add to your launch screen storyboard should be optimized appropriately. If you want to add an asset to your storyboard, such as a static image that normally appears as part of your app’s user interface, make sure that its image dimensions are no larger than the view it's going to be placed in. Your storyboard may not display if you use assets at larger resolutions.
Launch with a global audience in mind
Unlike your app’s interface, your app’s launch screen can’t be localized into other languages: Any text you display in your storyboard will remain in the original language you select. As such, it's best to avoid including any text at all.