You only get one chance to make a first impression. Whilst users get some idea of what your app is about from your description and screenshots in the App Store, where does their first impression of the actual app in-action come from? Your launch screen.
Also referred to as a "splash screen", this is the very first thing your app users will see when they click to open up your app. As such, its importance should not be underestimated!
Get it right -- bold, simple and relevant launch screens tend to work best -- and you'll make your audience sit up and take notice, feel genuinely excited about what's in store for them, and make them far more willing to spend time trying your app out.
Get it wrong and you've lost your audience, giving them a negative perception of your app before its even loaded.
We're going to help you make sure your app opens with a bang by showing you some real-world examples of what a good launch screen looks like.
(Note: MobiLoud is not affiliated with any of the companies whose apps we have listed below - we simply believe they have done a great job with their launch screen!)
What is an App Launch Screen?
First up, let's take a look at what a launch screen actually is. Despite their importance, from a functional point of view a launch screen actually does very little -- your app could still work perfectly well without one.
Curious about MobiLoud? Click here to learn more
A launch screen is simply a visual placeholder displayed to the user whilst the app is loading. The idea originated from iOS as a way of creating the perception that an app was fast and responsive - rather than opening up an app and having to wait a number of seconds for it to load, users would instantly be presented with the launch screen.
This played a crucial role in improving user experience, so much so that Apple made it a mandatory part of an app's design, continuing to this day. Because the launch screen's role is aesthetic rather than functional, some people sit firmly in the anti-launch screen camp.
The main argument lobbied against the launch screen is the belief that its continued usage is largely down to expectation; users just expect to see a launch screen, even though the overwhelming majority of apps just don't use enough resources to justify one - as mobile OSs become increasingly fast, they're only truly necessary for the most resource-intensive of apps.
That argument makes a fair point but misses the power of launch screens from a branding perspective. Every time a user launches your app they see the same welcome screen, which breeds familiarity and reinforces your brand. If the user loves your app, each time they're greeted with that launch screen - plastered with your branding - it starts to fill them with a sense of excitement. That's a powerful thing to be associated with.
Example Launch Screens
Now we've covered what a launch screen is and why they're important, let's take a look at some great examples of effective launch screens. Take note of what similarities they all have and you may be able to create one that is just as effective for your own mobile app!
Nike+ Running: The Nike launch screen is a textbook example, with the bold red background in sharp contrast to the simple white logo. The faint outline of the running track at the bottom is also highly relevant to the purpose of the app.
Grasshopper: The "coding app for beginners" - Grasshopper - has a sleek, effective loading screen. The dark background looks professional, and the text on the screen instantly lets users know what the app is about. Although not visible in a still image, those 4 colored dots rotate in a circle as the app loads, which make it animated and interesting to look at.
The Financial Times: If you're reading the news, you want to make sure that your sources are accurate and trustworthy. The Financial Times have created an app launch screen during which builds trust as early as possible by highlighting the quality and depth of their journalism, as well as a nice newspaper-like icon. Another interesting point to note is that you can scroll between different three versions of the launch screen, with each one containing different value propositions.
Dropbox: The Dropbox launch screen is simple but effective -- a bold navy background with their recognizable logo and company name in a very light blue color. There's no need to overcomplicate your app launch screen, and Dropbox is a great example of this.
Medium: This launch screen is smart, up-to-date, and reflects the user experience on both the mobile app and the website. Being a platform for content creators and writers, Medium have used a unique image of a piano combined with a typewriter, reflecting their slogan, "Ideas and perspectives you won't find anywhere else". The illustration style is modern and friendly.
Citymapper: "The ultimate transport app" reflect their mission in this launch screen effectively. The minimal use of graphics means that the launch screen isn't cluttered, but the arrows and circular icon highlight the app's relationship with transport.
Wikipedia: Wikipedia's app launch screen looks professional and clean, reflecting Wikipedia's regular website. The image is high resolution and instantly recognizable as Wikipedia. This launch screen is minimalistic but effective
TripAdvisor: The TripAdvisor app launch screen does a great job of capturing the look and feel of the app itself. The signature TripAdvisor green background with the logo is instantly recognizable as TripAdvisor, and the text underneath highlights some of the key benefits of using TripAdvisor to someone who has just downloaded the app!
Lyft: Another simple (are you noticing a trend here?) but effective launch screen is Lyft's. The color scheme is taken straight from their logo and app icon, which effectively promotes their brand as you open the app. The light text on a dark but distinctive colored background with a gradient stands out and draws the app user's eyes towards the logo.
Soompi: Soompi's app launch screen is effective for a few reasons. Firstly, the logo is clear and stands out against the dark background. The background is fun and animated, containing illustrations and text relating to the app contents (it's a news app focused on the K-Pop industry). Despite the animated look, the color palette maintains a professional look, and the loading circle at the bottom of the screen lets the user know that the app is loading.
Having looked at some of the best app launch screens around, is there anything we can take away and apply to our own launch screens?
The overwhelming majority of launch screens - well, the good ones anyway - use the following formula:
- Background -- Whilst there is no set rule for the background, the best ones are bold and distinct. Usually, the colour chosen is bright to make it stand out, although it's perfectly acceptable to pick a color around your brand's color scheme. While simplicity is often chosen, in some cases, using an intriguing texture is a great way to create a distinct feel to your app, and relevant images also prepare the user for the in-app experience.
- Logo -- The logo is clear and positioned prominently in the center of the screen. Most choose a colour in sharp contrast to the background, to make it jump out.
- Name -- Unless you're already a household name, most developers will also choose to include their app's name underneath the logo to further build brand awareness.
- Slogan -- Many smaller, less well-recognized apps will also include a short slogan on their launch screen. This tells the user what your app does which will prepare them for the experience they have in store.
Follow this structure to give your app a great launch screen and deliver a knockout first impression! Remember, your app itself needs to look great after the launch screen too! If your app has been created, or you are planning to create your app from a WordPress website, we've compiled a list of 5 WordPress themes that will help you build a high performing app landing page.
If you're thinking about launching an app for your website, but feel put off by the cost, time investment and stress of the entire process, check out MobiLoud. MobiLoud allows you to convert any website, on any platform or tech stack, to fully-functional, fast, powerful mobile apps, for minimal time and money.
We do everything for you - you don't need to write a line of code. We also help with putting together your app store listing, getting your app approved by Apple and Google, and can even take care of the graphic design work for your app (including your app splash page).
This is the best way to build mobile apps today.