Patterns Launch screens

Launch screens

The launch screen is a user’s first experience of your application.

A placeholder UI displays core structural elements such as the status and app bars until the app has loaded.

Branded launch screens display your logo or other elements that improve brand recognition.

Usage

A placeholder UI is best for apps with very short load times.

Types of launch screens Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Because launching your app while displaying a blank canvas increases its perceived loading time, consider using a placeholder UI or a branded launch screen.

A placeholder UI is the most seamless launch transition – appropriate for both app launches and in-app activity transitions.

Branded launch screens provide momentary brand exposure, freeing the UI to focus on content.

Branded launch screen

Placeholder UI

Placeholder UI Expand and collapse content An arrow that points down when collapsed and points up when expanded.

For apps that have very short load times, or don’t have a strong branding need, a placeholder UI presents the fewest possible transitions and greatest perceived responsiveness.

On launch, core structural elements such as the status bar, app bar, and bottom sheets are displayed without content until the app has loaded.

Example of placeholder UI

Branded launch Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Branded launch screens are a good way to portray a brand while the app is loading. Take advantage of the loading time to display your logo or other elements that improve brand recognition. Avoid using text on this screen except your logo and, if applicable, a tagline.

Branded launch

Launch screens should be used for initial, cold launch from the home screen, and should not be displayed if the application is running, or if the launch comes from another application.

Examples of branded launch screens