Loading screen
Visual displayed at the opening of the app while it's loading.
Overview
The loading screen appears for a few seconds when you open the app. It is displayed while the app is loading to be ready to use.
Anatomy
Here is a quick overview of what the loading screen contains to better understand this documentation:
- Background visual
- Proximus logo Centered in the screen.
- Copy Centered in the screen, it lets the user know that the app is loading.
Compositions
You have to produce visuals for iOS and Android. Depending on the resolution of the user's screen, you also have to foresee visuals for multiple resolutions for both OS. You will find all these visuals in the photoshop template.
Accessibility
In this component, HTML elements are added on top of the image. This content is in positive or negative mode and this affects the creation of the image. Image colors should be carefully considered, with legibility and accessibility as paramount concerns.
Our websites and applications have to be accessible, meaning perceptible, operable, understandable and robust for users with disabilities. Discover here our accessibility guidance.
The visual presentation of text has a contrast ratio of at least 4.5:1. Success criterion 1.4.3 Contrast
Negative mode
This loading screen only exists in negative.
How to
Please use the template and respect the following guidances:
- Produce visuals for each OS and all resolutions (from 1x to 4x)
- Respect the safe areas in the template
- Try to place your main subject in the center. Avoid putting any important information too close to the borders so it won't get cut off.
- Make sure your visuals are not too heavy and compress if needed.
You're part of Proximus organization? Go to the template - If not, request it
Technical specifications
Please respect the following specifications when you export the images:
iOS
Breakpoints | Size | Max weight | Format |
---|---|---|---|
1x | 414x896px | 200KB | .png |
2x | 828x1792px | 600KB | .png |
3x | 1242x2688px | 1.2MB | .png |
Android
Breakpoints | Size | Max weight | Format |
---|---|---|---|
1x | 609x896px | 260KB | .png |
1.5x | 913x1344px | 500KB | .png |
2x | 1217x1792px | 840KB | .png |
3x | 1826x2688px | 1.6MB | .png |
4x | 2434x3584px | 2.5MB | .png |
To ensure good UI quality and website performances, it's very important to respect the maximum weight indicated while keeping a correct image quality. Discover here our images compression recommendations.
Naming convention
Please respect the following naming convention:
- Name Short explanation of the visual, campaign,...
- Date yymm = year month (2108 = August 2021)
- OS If it's a visual for iOS or Android
- Resolutions From 1X to 4X