ARTICLE

Guidelines to Create Splash Screen For Windows Store Application

Posted by Krishna Garad Articles | Windows 8 December 03, 2012
In this article we will see the guidelines to consider when building splash screens for our Windows Store application.
Reader Level:

Before reading this article, please go through the following articles:

  1. Developing Windows Store Apps : Introduction And Requirement Specification
  2. Plans For Designing Metro Style Apps (Windows Store Apps)
  3. Windows Store Application Life-Cycle
  4. Guidelines to Pass Windows Store App Certification
  5. Navigation Patterns to Develop Windows Store Application
  6. Templates to Develop Windows Store Apps
  7. Develop Your First Windows Store App (Hello World)

  8. Controls to Design Windows Store Apps

  9. Lay-out Design Guidelines For Windows Store Apps

Introduction

In my last article we saw the layout design guidelines for Windows Store applications. In this article we will see the guidelines to consider when building splash screens for our Windows Store application. A Splash screen is what is first seen in a Windows Store application; it is where the user lands first. As a general term we are saying "First impression is last impression". When the user launches our application then the first thing that happens is that the Windows Store application launches the application splash screen. To provide a great user experience about our application we must customize our application's splash screen.

Splash screens are mainly used to notify the user that something is happening; in other words the application is loading. In this article we will go through some important guidelines provided by Microsoft to build the splash screens. As Microsoft suggested every Windows Store application must have a splash screen. Let's see those guidelines.

Customizable Splash Screens

Your Windows Store application splash screen must be built using the background color and the transparent image on that. This background color and image make your application splash screen very good to display. Make your splash screen in such way that we can make it the way want later; basically, keep your splash screen simple.

Create Extended Splash Screens

If your Windows Store application needs to load any data or pull the data from the network then use the extended splash screens. We will see how to create an extended splash screen in my future article.

No advertisements

Splash screens are mainly used to provide a launching experience to your user. Splash screens are displayed before an app is ready so placing an advertisement in the splash screen makes your user experience bad; they may think they have opened some other application.

No Multiple Images

While preparing splash screen for your application use only one image on the splash screen which resembles your application. Don't use multiple images on the application's splash screen.

Non descriptive

Every Windows Store application splash screen must not contain any description about the application. For example instead of placing any description about your application in the splash screen, place it inside the application, don't use the splash screen for that.

Resemblance Image

Use only the image which is resembles your application. Also, use only those colors which resemble your application, which makes one unique identity to identify your application.

Transparent Image

When creating a splash screen for your Windows Store application use a transparent PNG image without any background color for the image. If your image contains any background color and you are also providing the splash screen background color and the two colors are different then it will not look good.

Three copies of image

As we discussed in my last article layout design guidelines for Windows Store applications in the market various sizes devices are available. To support those devices as well as to support the various orientations three different sizes of an image are to be supplied for the splash screen. The following are the specified scaling factor and image size:

  • 1x620*300px
  • 1.4x868*420px
  • 1.8x1116*540px

Listen dismissed event

Listen for the splash screens dismissed event to show your initial event related UI. Don't perform any action or don't raise any event on the splash screen; instead use the splash screen dismissed event. To have a greater user experience use animation as the splash screen dismisses.

Conclusion

By following these guideline for your application's splash screen you can make a great first impression on the user. In the next article we will learn how to create the splash screen.

COMMENT USING