The splash screen is a brief screen displayed when opening an application, and its importance lies in providing a smooth transition for users during the loading process. In addition to conveying progress information, it reinforces the brand identity, creates a positive first impression, and establishes an emotional connection. As a result, the splash screen enhances the perception of speed, conveys professionalism, and contributes to a pleasant and memorable experience.
An efficient splash screen follows some essential best practices:
1. Cohesive design: Apply a consistent visual identity, using colors, logos, and visual elements that align with the application and brand. This creates a recognizable and cohesive experience.
2. Simplicity: Avoid overloading the splash screen with unnecessary information or elements. Keep it clean and minimalist, highlighting only the logo or main brand.
3. Consistent experience: The transition from the splash screen to the main interface of the application should be smooth and without visible interruptions. Avoid sudden changes or screen flickering.
4. Test and optimize: Conduct tests on different devices and connection conditions to ensure that the splash screen functions properly and does not cause delays or performance issues.
Uploading your splash screen
To upload the splash screen in your app, simply access your Site Manager area → Mobile Apps → Build your app → Loading Image and choose an image following the recommended dimension.
Recommended upload format:
For mobile devices, a commonly used dimension is 1080x1920 pixels. This resolution follows the 16:9 screen aspect ratio, which is widely adopted in smartphones.
However, it's important to consider that dimensions may vary depending on the different pixel densities of devices. In this case, it's important for the key information of the splash screen to be centered in the image and have a considerable breathing space in relation to the edges.
It is not recommended for the splash screen to be a photo or even the logo occupying the entire image space, as the goal is to provide a smooth preview of the application without distracting the user.
