Designing mobile app splash screen
Animated Flat Camera Icon by Kushagra Agarwal

You’ve got a brilliant idea, a pool of investors, an exceptional roadmap, and advanced technology to create the mobile application that would take smartphone users by the storm.

Seems perfect, but hang on!

Let’s say you’re working on an important task and an idea crosses your mind. You want to document it, so you decide to use a note-taking application. Most apps go by the 3 Second load-time Rule. But no matter how fast the app lets you in, you are bound to feel it’s taking forever.

According to a study by Localytics, about 24% users abandon an app after their first experience which is about a quarter earning opportunity lost.

In this blog, you’ll learn to create a splendid first experience through the medium of Splash Screen. I’ll cover the general notion about it, its purpose, guidelines for iOS and Android, best practices, and a tons of examples.

Let’s get started!

What is a Splash Screen?

Splash Screen is the first visual users see when an application is launched.

One might wonder what is ‘splashy’ about Splash Screen. Frankly, very little! Its chief purpose is to engage users while the app loads. And in order to do that, it may feel like a of splash of visuals virtually thrown them.

Here are two examples of Splash Screens:

Example of Splash Screens

Black and White never fails!

Uber’s Splash Screen is a classic example of simplicity and style. The app opens with its new wordmark logo in San Serif succeeded by two parallel lines that gives it a dramatic opening. Within less than 3 seconds, Uber gets straight to business.

Static Splash Screen

Conversely, we have Amazon who chooses to employ a static Splash Screen with its logo that represents their ideology of selling a wide range of products from A to Z.

And of course, we have exceptions:

Facebook - No Splash Screen

Facebook is one of the few applications that has chosen to drop their splash screen and take users straight to their feed.

Purpose of Splash Screen

In the first place, if you’re wondering what’s wrong with having a blank screen at the start of your app the answer is: Absolutely nothing!

But here’s the catch:

According to Thermopylae, the human brain processes images 60,000 times faster than text, and 90 percent of information transmitted to the brain is visual.

Having said that, adding a splash screen to your app works as a spectacular opportunity to stick in the minds of users. Moreover, you want your app to build excitement and curiosity and a creative app splash screen does exactly that.

I’ve collected a few classic examples that shows diversity in splash screens designs.

LinkedIn splashes its Signature with its Blue and White Palette
LinkedIn splashes its Signature with its Blue and White Palette
Twitter’s Signature Mountain Bluebird is one of the most recognized in the world
Twitter’s Signature Mountain Bluebird is one of the most recognized in the world
Snoo from Reddit’s Splash Screen welcomes Users with a Smile
Snoo from Reddit’s Splash Screen welcomes Users with a Smile
McDonald uses its signature Golden Arches to make its load-time interesting
McDonald uses its signature Golden Arches to make its load-time interesting
Booking.com’s Splash Screen spells itself with their customized typeface, Booking Sans
Booking.com’s Splash Screen spells itself with their customized typeface, Booking Sans
Evernote applies its iconic Elephant symbol to its Splash Screen
Evernote applies its iconic Elephant symbol to its Splash Screen

For more static and animated splash screen inspiration, you can explore Mobile Patterns

Building a mobile app with trending technologies is always a preference for any business. And equally important is to create an engaging Splash Screen.

How to Create a Splash Screen?

We’ve all taken inspiration from popular applications, in one way or the other, while designing our mobile apps. But have you wondered how they got there?

Many may echo, “trial and error” but after having analyzed more than 1,000 apps closely I’ve concluded that the success of these mobile app designs are purely based on improvisation.

Let’s take a look at some critical facets to be covered:

1. Size Matters

Given that “one size fits all” is cliché in today’s world, Splash Screens must to be designed to meet the need to fit into the multifarious sizes of different devices.

With myriads of smartphones and tablets of different shapes and sizes being launched every year, it’s become essential to know and understand the dimensions of these devices.

Material Design - A comprehensive resource for sizing, resolution, and more across multiple devices
See the full list on Material Design

2. Ditch the Sales Pitch from your Splash Screen

Splash Screens can often be mistaken as a proclamation of a brand’s existence; however, smartphone users have become as smart as their phones these days.

It takes one simple technique to make a beautiful splash screen: Choose elements that resonate with your brand.

Adding small details that identify your brand such as logo, typographic messaging (if any) to the background besides using a designated color palette.

GoodReads spells its Brand and Messaging in this simple Splash Screen
GoodReads spells its Brand and Messaging in this simple Splash Screen
Microsoft OneNote | The digital note-taking app sticks to its brand identity
Microsoft OneNote | The digital note-taking app sticks to its brand identity

3. Create a Splash Screen that eliminates load time, not increase it

Splash Screen can be looked at with two perspectives:

One, you can choose to flaunt your brand with the coolest graphical animations and the other is to build curiosity among users.

In both cases, you don’t want to forget the real purpose of creating a launch screen. The splash that distracts users from the wait must be designed to reduce load time and not otherwise.

Number Count Down

4. Let them in on Launch Prep

Before we get to this point, take a look at:

Candy Crush Saga engages users with a Splash Screen and “Loading…”
Candy Crush Saga engages users with a Splash Screen and “Loading…”

With over 293 million monthly active usersCandy Crush Saga by King Digital Entertainment is one of the most played games of all time.

There could be several reasons why an app takes longer to load such as connectivity issues, huge graphical data, un-installed app updates, multiple apps running in the background, and others.

Letting users know the progress of loading in percentage or an animated throbber can rescue you from impatience.

The new YouTube Music uses this simple animated Throbber
The new YouTube Music uses this simple animated Throbber
Audiobooks.com’s Splash Screen modernizes the traditional Throbber
Audiobooks.com’s Splash Screen modernizes the traditional Throbber
Storytel’s New Splash Screen creatively employs its Logo to intimate load-time
Storytel’s New Splash Screen creatively employs its Logo to intimate load-time
TicTok employs two dots to show load-time with its theme colors
TicTok employs two dots to show load-time with its theme colors

Guidelines for Splash Screens (Android + iOS)

Since Splash Screen isn’t a commercial or a creative presentation of a one’s skill, Android and iOS have set specific guidelines for designers to ensure users are delighted with their first experience with an app.

Splash Screen Guidelines for iOS

Apple’s Human Interface Guidelines go by four simple commandments. Here’s how they do it (with examples):

1. Splash Screen must be analogous to the first screen

TedTalks — Splash Screen
TedTalks — Splash Screen
TedTalks — First Screen
TedTalks — First Screen

Ted Talks employs white and red as its signature theme. It’s Splash Screen represents its logo along with its tagline, “Ideas worth spreading”.

Once a user comes to the main screen they see the newest uploads beside which there are popular talks. Users can also explore videos of their interest in the discovery section.

The first screen also embodies the TedTalks logo — on the top left — which gives a similar feel from the splash screen.

2. Cut out text from your launch screen

If you’re planning to roll out your application in multiple regions, Apple recommends avoiding text on your launch screen, since static splash screen text cannot be localized.

Nevertheless, if your logo spells your brand name here are some awesome splash screens to take inspiration from:

Examples of Splash Screens with Wordlogo — IMDb
Examples of Splash Screens with Wordlogo — IMDb
Examples of Splash Screens with Wordlogo — Wikipedia
Examples of Splash Screens with Wordlogo — Wikipedia
Examples of Splash Screens with Wordlogo — H&M
Examples of Splash Screens with Wordlogo — H&M
Examples of Splash Screens with Wordlogo — Headspace
Examples of Splash Screens with Wordlogo — Headspace

3. Minimalism is the key to a good launch screen design

The New York Times — Splash Screen
The New York Times — Splash Screen

The NewYork Times app is an epitome of minimalism. The splash screen with its calligraphic logo takes its users back to the 70’s for less than 3 seconds and quickly lands them back to the latest news.

4. Advertisements are a big NO-NO

According to SEOExpertBrad.com, over 88% businesses spend a great deal in marketing their products and services. Considering you are one of them, your users already know about your app before they even get to the AppStore or PlayStore.

Having said that, designing a splash screen that looks like an “About the App” or “About Us” could make you look more salesy than you can imagine.

GIF: gfycat
GIF: gfycat

Mobile Patterns - Write for Us

Splash Screen Guidelines for Android

Apple and Android, despite having distinguishable trademarks, have identical guidelines to engage users via an ecstatic experience.

Android Splash Screens are categorized into two — Branded Launch Screen — that looks something like:

Amazon Kindle — Branded Splash Screen
Amazon Kindle — Branded Splash Screen

And Placeholder Launch Screen:

The Fortnightly - Placeholder Launch Screen
via Google

Since app Splash Screens aren’t a compulsion, some apps address load-time by animating placeholders.

Apps that take little time to display its contents go for placeholder launch screens besides not feeling the need to market their brand. Oftentimes, you’d find apps like Instagram, Facebook, YouTube employing offline caching before they load fresh content to their screens.

Conclusion

“First impression is the last impression”. The good news is we now know what it takes to create a seamless mobile app launch experience.

According to Statista, the year 2022 will see a growth of 258.2 billion app downloads compared to the 178.1 billion downloads in 2017.

With this growth, Splash Screen is a bandwagon worth jumping on!

It serves as the first rung of the onboarding ladder. Agreeing on an image that resonates with your brand becomes all the more critical when you have small, yet significant elements to add to your mobile app design.

Here’s hoping you find a Splash worth your Screen!

Previous ArticleNext Article
Avatar
Designer of experiences. Write on convergence of UX Design and Marketing. Help companies become CX/UX centric with research and customer journey optimization.

This post has 22 Comments

22
  1. I believe this is an informative article and it is very useful and knowledgeable.
    I truly enjoyed reading this post. Big fan, thank you!

  2. Thanks for sharing this amazing article on Splash Screen. For a long time, I was in search of a detailed article on a similar topic.

Leave a Reply

Your email address will not be published. Required fields are marked *