WINDOWS 8 DESIGN HANDBOOK

Designing a Splash Page

The splash is displayed after an app is launched but before it has time to load. It is very basic but provides feedback to the user that something is happening, even though the app is not displayed yet. Make sure to avoid these common mistakes when designing your Windows 8 app's splash screen.

splash screen tablet

1. BACKGROUND IMAGE

background image dont

You can't set a full bleed background image. You can only set an image for the allotted area.

background image do

Do use a solid background color.

2. BACKGROUND TEXTURE

background texture dont

You can't use a texture or background pattern. You can only use an image for the allotted area.

background texture do

Do use a solid background color.

3. LOGO POSITIONING

logo position dont

You can't position your logo outside the allotted area.

logo position do

Do place your logo in the center of the splash screen within the allotted area.

4. BACKGROUND IMAGE

background image dont

Don't crop a background image to the allotted area if it doesn't blend in with the background.

background image dont

Do use a transparent image that blends in with the background color.

5. LOGIN SCREEN

login screen dont

You can't add a login form as part of your splash screen.

login screen do

Do add a login form as part of your extended splash* screen.

6. WEBSITE URL

website url dont

Don't add your website URL to your splash screen.

website url do

Do keep everything at a bare minumum.

7. ADVERTISEMENTS

advertisements dont

Don't include advertisements in your splash screen.

advertisements do

Do design your splash screen with simplicity in mind.

8. LOADER

loader dont

You can't add a loading icon on your splash screen.

loader do

Do use a loader as part of your extended splash* screen.

9. VERSION DATA

version data do

Don't include any version data on your splash screen.

version data do

Do keep everything a bare minimum.

10. BRANDING

branding dont

Don't include a title if its not part of your logo.

branding dont

Do keep everything at a bare minimum.

An extended splash screen is an optional screen that follows after the normal splash screen. You can use it to show a login form, or to show a loader while your application is initializing. Although the splash screen and extended splash screen should share the same design/layout to avoid abrupt transitions, an extended splash screen is not constrained to the same rules above.