TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
VERSION 3 - 08 / 2020
CONTENT TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
EN Introduction: strategic vision for mobile applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 04
About accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 05
1. INTERNAL APPLICATIONS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07
1.1 General rules for internal applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 08
2. NAMING RULES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 09
2.1 General rules on the naming system for mobile applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Exceptions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3 Specificity of the name on a smartphone: marketplace and home screen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3. ICONS OF TOTAL APPLICATIONS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.1 Icon Decision tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2 Construction principles for the icon of a TOTAL application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3 Example of a non-specialized application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.4 Example of an application linked to a specific activity: TOTAL Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.5 Examples of an application linked to a Blockbuster brand: TOTAL Direct Énergie and TOTAL QUARTZ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.6 Examples of applications linked to an offer from a blockbuster brand. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4. APPLICATION PRESENTATION INSIDE THE STORE (APPSTORE, ETC.) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1 Presentation of an application inside the stores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2 Specific case: presentation of an application linked to a Blockbuster brand. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5. ANIMATION PRINCIPLES FOR THE SPLASH SCREEN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6. INSIDE SCREENS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.1 Construction grid for screens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
6.2 Home screen / Menu / Header. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
6.2.1 Footer menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.2.2 Burger menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
7. MAIN COMPONENTS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
7.1 Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
7.2 Pop-up window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
7.3 Evaluation form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
7.4 Buttons and symbols. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.5 Pictograms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2 7.6 Fonts and colors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
SOMMAIRE TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
FR Introduction : La vision stratégique pour les applications mobiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 04
Note sur l’accessibilité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 05
1. APPLICATIONS INTERNES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07
1.1 règles générales sur les applications internes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 08
2. RÈGLES DE NOMENCLATURE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 09
2.1 Règles générales sur la nomenclature des applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Exceptions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3 Spécificité du nom des applications sur smartphone : marché d’applications et écran d’accueil. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3. ICÔNES DES APPLICATIONS TOTAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.1 Icône d’application : arbre de décision. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.2 Principes de construction de l’icône d’application mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3 Exemple d’une application généraliste de TOTAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.4 Exemple d’une application TOTAL dédiée à une activité spécifique : TOTAL Services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.5 Exemples d’applications liées à une marque Blockbuster : TOTAL Direct Énergie et TOTAL QUARTZ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.6 Exemples d’applcations liées à un service d’une marque blockbuster. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4. PRÉSENTATION DE L’APPLICATION DANS LES STORES (APPSTORE, ETC.). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1 Écrans de présentation de l’application dans les stores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2 Cas particulier : présentation d’une application liée à une marque Blockbuster. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5. PRINCIPES D’ANIMATION DU SPLASH SCREEN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6. ÉCRANS INTÉRIEURS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.1 Grille de construction des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
6.2 Page d’accueil / Menu / Header. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
6.2.1 Menu bas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.2.2 Menu burger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
7. COMPOSANTS PRINCIPAUX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
7.1 Carte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
7.2 Fenêtre pop-up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
7.3 Formulaire d’évaluation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
7.4 Boutons et symboles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.5 Pictogrammes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3 7.6 Typographies et couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
INTRODUCTION: STRATEGIC VISION FOR MOBILE APPLICATIONS TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
INTRODUCTION : LA VISION STRATÉGIQUE POUR LES APPLICATIONS MOBILE CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
EN TOTAL’s strategy is based on two fundamental principles: ensuring its visibility
and facilitating the customer navigation through the ecosystem of applications.
The objective for the mobile applications is threefold:
- Create a relevant ecosystem of mobile applications, which guarantees TOTAL’s visibility
- Ensure a better understanding of the mobile application’s function for its user, in order to ensure differentiation
between multiple applications.
- Ensure a better consistency by unifying the look & feel of the ecosystem.
All the graphic standards for the mobile applications have been defined so that they are adaptable to
all the TOTAL brands, and especially in two specific cases:
- Mobile applications linked to blockbuster brands
- Mobile applications linked to light-endorsed brands
FR La stratégie de TOTAL se fonde sur deux principes fondamentaux : assurer
sa visibilité et adopter une démarche centrée sur l’utilisateur.
L’objectif pour les applications mobile est donc triple :
- Créer un écosystème d’applications mobile cohérent qui garantit la visibilité de TOTAL
- Assurer une meilleure compréhension de la fonction de l’application application mobile de la marque commerciale TOTAL
auprès de son utilisateur, et ainsi assurer une différentiation entre plusieurs applications.
- Assurer une plus grande cohérence en unifiant le design à travers tout l’écosystème.
Toutes les règles graphiques d’applications mobile ont été conçues pour s’adapter à l’ensemble des marques
de TOTAL et plus particulièrement dans deux cas particuliers :
- Les applications liées aux marques blockbuster
- Les applications mobile liées aux marques light-endorsed
4
ACCESSIBILITY TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
ACCESSIBILITÉ CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
To make sure mobile applications can be used by all users (including those with physical, sensory or cognitive limitations), digital accessibility
EN must be taken into account throughout the project.
Since 2017, TOTAL has undertaken numerous actions to make its content accessible (site audits, changes’ implementation, businesses’ awareness, etc.)
Definitions Legal obligations
Digital accessibility is a set of good graphic, functional, technical and editorial By the decree of July 24, 2019, the law extended the obligation of accessibility to the
practices, making it possible to ensure that digital media (documents, websites, mobile private sector, in particular companies generating a turnover of 250 million euros
applications, etc.) are perfectly accessible to all users, including those in handicap (achieved in France on the average of the last 3 years). This decree will be applicable
situation. for mobile applications from July 1, 2021. Each mobile application must then publish
an accessibility statement justifying compliance with the RGAA, the level of
The accessibility rules that refer to the international level are called the WCAG (Web compliance as well as the elements explaining the reason for the non-compliance.
Content Accessibility Guidelines). They are published by an international consortium
called the W3C and are organized into 3 increasing levels of accessibility: level A Stakes
(imperative), level AA (reduction of obstacles) and level AAA (improvement of user Digital accessibility involves several challenges for the Group:
comfort). In most countries where accessibility has become a legal requirement, the - Expansion of the audience
required level is level AA. Some countries have supplemented the WCAG with a - SEO improvement
national document: in France, the RGAA (General Accessibility Improvement Standard) - Reduced need for assistance
is the reference. - Improved brand image
- Eventually increase in turnover
FR Afin que les applications mobiles puissent être utilisées par l’ensemble des utilisateurs (y compris par celles et ceux qui ont des limitations physiques,
sensorielles ou cognitives), l’accessibilité numérique doit être prise en compte tout au long du projet.
Depuis 2017, TOTAL entreprend de nombreuses actions afin de rendre ses contenus accessibles (audit de sites, mise en place d’évolutions, sensibilisation des métiers…)
Définitions Obligations legales
L’accessibilité numérique est un ensemble de bonnes pratiques graphiques, Par le décret du 24 juillet 2019, la loi a étendu l’obligation d’accessibilité au secteur
fonctionnelles, techniques et rédactionnelles, permettant de s’assurer que les supports privé, notamment les entreprises générant un chiffre d’affaires de 250 millions
numériques (documents, sites internet, applications mobiles…) sont parfaitement d’euros (réalisé en France sur la moyenne des 3 dernières années).
accessibles à tous les utilisateurs, y compris à ceux en situation de handicap. Ce décret sera applicable pour les applications mobiles à compter du 1er juillet 2021.
Chaque application mobile devra alors publier une déclaration d’accessibilité
Les règles d’accessibilité qui font référence au niveau international se nomment les justifiant la mise en conformité au RGAA, le niveau de conformité ainsi que les
WCAG (Web Content Accessibility Guidelines). Elles sont publiées par un consortium éléments expliquant la raison des non-conformités.
international nommé le W3C et sont organisées en 3 niveaux croissants d’accessibilité :
le niveau A (impératif), le niveau AA (réduction des obstacles) et le niveau AAA Enjeux
(amélioration du confort d’utilisation). Dans la plupart des pays où l’accessibilité est L’accessibilité numérique revêt plusieurs enjeux pour le Groupe, à savoir:
devenue une obligation légale, le niveau requis est le niveau AA. Certains pays ont - Elargissement de l’audience
complété les WCAG avec un document national: en France, c’est le RGAA (Référentiel - Amélioration du référencement
Général d’Amélioration de l’Accessibilité) qui fait référence. - Réduction du besoin d’assistance
- Amélioration de l’image de marque
5 - Augmentation, à terme, du chiffre d’affaires
ACCESSIBILITY TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
ACCESSIBILITÉ CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
EN Focus on some good practices aiming to make a mobile application accessible (all notices are available on https://www.accede-web.com/en/guidelines/)
Colors and contrasts Forms Recent smartphones
To be accessible, the colors used must respect a level of contrast. To develop your forms, consider: offer tools to facilitate
The W3C-WCAG accessibility standard recommends two contrast ratios: - Provide an explicit title for each form field the user experience and
3: 1 = for texts or solid areas where the surface area is large enough for easy - Place each title near its field promote accessibility.
readability. - Clearly indicate the required fields at the beginning Online documentation is
4.5: 1 = for texts or solids whose surface is smaller and whose readability becomes of the form available at:
more difficult. - Provide explicit error messages and a confirmation iOS :
Example: The Orange defined by the graphic charter (# DB7E04) is not considered message https://www.apple.com/
accessible (Ratio = 3) and must therefore be used only for decorative purposes. - Allow the user to go back through multi-step forms accessibility/
Use Contrast Finder and / or Color Contrast Analyzer (available online, free) Android :
to test the contrast of your colors! Navigation
In order to facilitate navigation for your users, make https://developer.
sure to: android.com/guide/
Rich and multimedia content topics/ui/accessibility
For a video to be accessible, the following must accompany the video, in order of - Provide at least two means of navigation among
priority: a main menu, a site map and a search engine
1. A full transcript - Differentiate the current position in the menus
2. Subtitles - Ensure visual consistency of navigation
3. Audio description - Indicate the contact details of an accessibility referent
- On a help page or on the «Accessibility» page
It should also be possible to pause moving content.
FR Focus sur quelques bonnes pratiques visant à rendre une application mobile accessible (toutes les notices sont disponibles sur https://www.accede-web.com/notices/)
Couleur et contraste Formulaires Les smartphones
Pour être accessibles, les couleurs utilisées doivent respecter un niveau de Pour élaborer vos formulaires, pensez à: récents proposent des
contraste. - Prévoir un intitulé explicite pour chaque champ outils pour faciliter
La norme d’accessibilité W3C-WCAG préconise deux ratios de contraste : de formulaire l’expérience utilisateur et
3:1 = pour des textes ou des aplats dont la surface est suffisamment importante - Positionner chaque intitulé à proximité de son champ favoriser l’accessibilité .
pour obtenir une lisibilité aisée. - Indiquer clairement les champs obligatoires au début Les documentations en
4,5:1 = pour des textes ou des aplats dont la surface est plus réduite et dont la du formulaire ligne sont à consulter sur :
lisibilité devient plus ardue. - Prévoir des messages d’erreur explicites et iOS :
Exemple: Le Orange défini par la charte graphique (#DB7E04) n’est pas considéré un message de confirmation https://www.apple.com/
comme accessible (Ratio = 3) et doit donc être utilisé uniquement à but décoratif. - Permettre à l’utilisateur de revenir en arrière accessibility/
sur les formulaires à étapes multiples
Utilisez Contrast Finder et/ou Colour Contrast Analyser (disponibles en ligne, Android :
gratuitement) pour tester le contraste de vos couleurs ! https://developer.
Navigation
Afin de faciliter la navigation de vos utilisateurs, veillez à: android.com/guide/
Contenus riches et multimédias topics/ui/accessibility
- Prévoir au moins deux moyens de navigation parmi un
Pour qu’une vidéo soit accessible, les éléments suivants doivent accompagner
menu principal, un plan du site et un moteur de recherche
cette dernière, par ordre de priorité:
- Différencier la position courante dans les menus
1. Une transcription intégrale - Assurer la cohérence visuelle de la navigation
2. Des sous-titres - Indiquer les coordonnées d’un(e) référent(e)
6 3. Une audiodescription accessibilité, sur une page d’aide ou sur
Il doit également être possible de mettre en pause les contenus en mouvement. la page «Accessibilité»
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
1.
INTERNAL APPLICATIONS
APPLICATIONS INTERNES
GENERAL RULES FOR INTERNAL APPLICATIONS TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
RÈGLES GÉNÉRALES SUR LES APPLICATIONS INTERNES
1.1
EN Naming rules and Registration Construction principles for the icon of internal application
Règles de nomenclature et Référencement Principes de construction de l’icône d’application interne
The name of internal applications should be descriptive X
and direct, it should not include the word TOTAL.
Internal applications should be registered on Apps@
work, our dedicated platform. They should not be
registered on traditional app stores as they are not
for customers. If you can’t register the app on Apps@
work, you may register it on a traditional app store but
you should choose the local registration (registering the PICTOGRAMM 3/4 X
application only in the countries where it is used).
Please contact your IT or digital manager.
STOP CARD
LOGO 1/4 X
L’icône présente le logo ou l’identité créée pour
FR l’application ou le programme et le logo TOTAL
doit être utilisé dans sa version colorée sur un quart
de l’icône.
The icon should include the logo or identity created for
Les applications internes doivent être référencées sur
the app or program and the TOTAL logo should be used
Apps@work, notre plateforme dédiée. Elles ne doivent
in its colored version on one fourth on the icon.
pas être référencées sur les app stores traditionnels
L’icône présente le logo ou l’identité créée pour
car elles ne sont pas destinées aux consommateurs.
l’application ou le programme et le logo TOTAL doit être
Si le référencement sur Apps@work est impossible,
le référencement sur un app store traditionnel R&C News utilisé dans sa version colorée sur un quart de l’icône.
est autorisé mais il doit se faire de manière locale
(référencer l’application seulement dans les pays
concernés).
Veuillez contacter la DSI de TOTAL Marketing &
Services pour toute information et avant de référencer
une application.
8 Get on board
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
2.
NAMING RULES
RÈGLES DE NOMENCLATURE
9
GENERAL RULES ON THE NAMING SYSTEM FOR MOBILE APPLICATIONS TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
RÈGLES GÉNÉRALES SUR LA NOMENCLATURE DES APPLICATIONS CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
2.1
EN Rules have been defined to guide the creation Attribution
of a new application, or the update of an existing one. Attribution Total Services: Station finder TOTAL Services
TOTAL should always be written in all caps to name the Total Investors TOTAL Investors
The naming system relies on two pillars:
attribution to the TOTAL brand and faciliation of the application, whether it is the commercial brand or the Total Safety TOTAL Safety
navigation through the ecosystem of the brand. corporate brand, to ensure the attribution to our brand.
TOTAL doit toujours être écrit en majuscules dans N.B. The TOTAL Services app now offers more services
Please follow these rules when naming an application. le nom de l’application, qu’il s’agisse de la marque than just a station finder.
commerciale ou corporate, pour assurer l’attribution L’application TOTAL Services offre désormais plus de
The registration of an application is to be done by the
à notre marque. services que la localisation de stations services.
IT or digital manager through their developer account
on traditional app stores (iOS/Android). Please contact
them for any project.
FR Des règles ont été définies pour guider la création Facilitation
d’une nouvelle application, ou la mise à jour Facilitation
d’une application existante. TOTAL Hi-Perf
For blockbuster brands: Use the name of the brand
Le système de nomenclature repose sur deux pilliers : Pour les marques blockbuster : Utiliser le nom TOTAL Wash
attribution à la marque TOTAL et faciliation de la de la marque TOTAL Direct Energie
navigation à travers l’écosystème de la marque TOTAL.
If multiple applications are linked to a single blockbuster
Veuillez respecter ces règles quand vous nommez brand, a descriptor may be added. It should describe the
une application. main feature, the benefit or the destination.
Si plusieurs applications sont liées à la même marque TOTAL Direct Énergie Ma Maison
Le référencement des applications est pris en charge blockbuster, un descripteur peut être ajouté. Il doit
par la DSI de TOTAL Marketing & Services qui référence décrire la fonctionnalité clé de l’application, son bénéfice
les applications via ses comptes développeur sur les app ou sa destination.
stores traditionnels (iOS/Android). Veuillez les contacter
pour tout projet.
For other brands: Describe the main functionnality, TOTAL Services
the benefit or the destination of the application TOTAL Investors
Pour les autres marques : Décrire la fonction, TOTAL Safety
le bénéfice ou la destination de l’application
10EXCEPTIONS TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
EXCEPTIONS CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
2.2
EN Applications for an internal target Local applications Applications linked to a light-endorsed brand
Les applications pour l’interne Les applications locales Les applications de marques à endossement léger
TOTAL Services Liban AS 24 Driver
Action – Accueil en station
TOTAL Services Maroc AS 24 Fleet Manager
TOTAL should not be written in the name of the When a mobile application is designed for a specific The endorsement disappears from the name of the
application when the application is only dedicated to country, sometimes gathering multiple functions, the application for light-endorsed brands
internal uses or for third-party suppliers. name of the country should be put in the name after L’endossement disparaît du nom pour les marques à
Internal applications are to be registered in a dedicated the descriptor. This will ensure that the application is endossement léger
store (see chapter 1). In the case of a registration on targeting the right users.
traditional stores, the absence of the word TOTAL allows Quand une application mobile est créée pour un
FR internal applications not to appear in researches. pays en particulier, parfois en rassemblant plusieurs
TOTAL ne doit pas se trouver dans le nom fonctionnalités, le nom du pays doit être ajouté au
de l’application si l’application est destinée nom de l’application après le descripteur. Ce faisant,
à l’interne ou à des prestataires. nous nous assurons que l’application cible les bons
Les applications à destination de l’interne sont utilisateurs.
référencées sur un store dédié (voir chapitre 1).
Dans le cas d’un référencement sur les stores
classiques, l’absence du mot TOTAL permet
que les applications internes ne remontent pas
dans les recherches.
11SPECIFICITY OF THE NAME ON A SMARTPHONE: TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
MARKETPLACE AND HOME SCREEN CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
2.3 SPÉCIFICITÉ DU NOM DES APPLICATIONS SUR SMARTPHONE :
STORE ET ÉCRAN D’ACCUEIL
EN On a smartphone, the official name of the application Example
in the application store and the name displayed Exemple
on the home screen can be different (see example The application TOTAL Lub-on-Ship
on the right). can display on «Lub-on-Ship» as its name on
the home screen.
To ensure the readability of the name on the home
L’application TOTAL Lubmarine Lub-on-Ship
screen and avoid repetition, the name on the home
peut afficher uniquement «Lub-on-Ship» comme nom
screen should be optimized. Only the service / benefit /
sur l’écran d’accueil du téléphone mobile.
destination should appear.
FR Sur un téléphone mobile, le nom officiel de l’application
dans le store et le nom sur l’écran d’accueil du téléphone
peuvent être différents (voir exemple ci-contre).
Pour assurer la lisibilité du nom sur l’écran d’accueil et
éviter les répétitions, le nom sur l’écran d’accueil doit
être optimisé. Seul le service / le bénéfice / la destination
doit apparaître.
12TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
3.
ICONS OF TOTAL APPLICATIONS
ICÔNES DES APPLICATIONS DE TOTAL
13ICON DECISION TREE TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
ICÔNE D’APPLICATION : ARBRE DE DÉCISION CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
3.1
EN Rules have been formalized to create the icon of an A decision tree has been created as a guide.
application. The icon should not be built the same way Un arbre de decision a été créé pour servir de guide.
depending on its destination and the kind of brand it is
linked to.
FR Des règles ont été formalisées pour la création de l’icône
d’une application. L’icône ne doit pas être créée de la
même façon selon la destination de l’application et le
type de marque à laquelle elle est liée.
Blockbuster
Yes, the application Is the application linked to a No logo
is linked to particular product or service Non
a Blockbuster brand of the brand?
Oui, l’application L’application est-elle liée
Blockbuster
est liée à une marque à un produit ou service Yes logo
Blockbuster spécifique de la marque? Oui
Pictogramm
No, the application
is linked to Brand logo
a light-endorsed brand
Non, l’application Pictogramm
Is the application est liée à une marque
linked to a à endossement léger
Blockbuster brand?
L’application est-elle
liée à une marque No, the application is linked
Blockbuster? to a general product TOTAL logo
or service of TOTAL
Non, l’application est liée Pictogramm
à un produit ou service
général de TOTAL
No, the application
is linked directly to TOTAL
or is a local app
TOTAL logo
Non, l’application est liée
directement à Total ou c’est
une application locale.
14CONSTRUCTION PRINCIPLES FOR THE ICON OF A TOTAL APPLICATION TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
PRINCIPES DE CONSTRUCTION DE L’ICÔNE D’APPLICATTION MOBILE CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
3.2
N.B. To ensure the visibility of logos, and as an
EN exception due to the size of icons, the usual protection
zone may be adapted. Only the margin in dark grey must
be respected.
Examples can be seen on following pages.
FR Pour assurer la visibilité des logos, et en guise
d’exception due aux dimensions des icônes, les zones
de protection habituelles peuvent être adaptées.
Seules les marges représentées en gris foncé doivent
être respectées.
Des exemples peuvent être vus sur les pages suivantes.
1/20 X 1/20 X
LOGO 1/3 X
1/20 X
1/20 X
LOGO
PICTOGRAMM 1/3 X
15EXAMPLE OF A NON-SPECIALIZED APPLICATION TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
EXEMPLE D’UNE APPLICATION GÉNÉRALISTE DE TOTAL CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
3.3
EN When the application is linked directly to TOTAL Example
without offering a particular service or piece of Exemple
information, or when the application is a general
application locally, the TOTAL logo should be used
in its colored and vertical version.
FR Quand l’application est liée directement
à TOTAL sans proposer de service particulier
ou sans donner une information particulière,
c’est le logo TOTAL qui doit être utilisé,
dans sa version couleurs et verticale.
16EXAMPLE OF AN APPLICATION LINKED TO A SPECIFIC ACTIVITY: TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
TOTAL SERVICES CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
3.4 EXEMPLE D’UNE APPLICATION TOTAL DÉDIÉE À UNE ACTIVITÉ SPÉCIFIQUE :
TOTAL SERVICES
EN When the application is dedicated to a particular Example: the TOTAL Services application (France)
activity, the TOTAL logo should be used in its colored Exemple : l’application TOTAL Services (France)
and horizontal version, for a third of the icon.
The other two thirds should be used to display a
pictogram of the service provided / destination
addressed by the application. The pictogram should
be white and used on a TOTAL red background
(R: 225 / G: 0 / B: 50).
If no pictogram is available, a text may be written in
Helvetica Neue heavy font, but it should not be longer
than two words or 12 characters. It should be written
in white, on a TOTAL red background.
FR Quand l’application est dédiée à une activité particulière,
le logo TOTAL doit être utilisé dans sa version couleurs
et horizontale, sur un tiers de l’icône.
Les deux autres tiers de l’icône doivent servir à afficher
un pictogramme associé au service ou la destination de
l’application. Le pictogramme doit être blanc sur un fond
rouge TOTAL (R : 225 / V : 0 / B : 50).
The TOTAL Services application (in France)
Si aucun pictogramme n’est disponible, un texte peut
provides customers with information about our fuels
être écrit en typographie Helvetica Neue heavy, mais ne
activity and helps them find the nearest service
doit pas dépasser 2 mots ou 12 caractères. Le texte doit
alors être écrit en blanc sur fond rouge TOTAL. Lorem station for instance. The pictogram represents
one of our service stations.
ipsum L’application TOTAL Services (en France)
donne des informations aux consommateurs
sur notre activité liée aux carburants, et
les aide notamment à trouver la station service
la plus proche. Le pictogramme représente
l’une de nos stations services.
17EXAMPLES OF AN APPLICATION LINKED TO A BLOCKBUSTER BRAND: TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
TOTAL DIRECT ÉNERGIE AND TOTAL QUARTZ CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
3.5 EXEMPLES D’APPLICATIONS LIÉES À UNE MARQUE BLOCKBUSTER:
TOTAL DIRECT ÉNERGIE ET TOTAL QUARTZ
EN When the application is linked to a blockbuster brand, Example: the TOTAL WASH application (France)
the logo of the brand should be used in the whole icon, Exemple : l’application TOTAL WASH (France)
in its colored version.
FR Quand l’application est liée à une marque blockbuster,
c’est le logo de la marque qui doit être utilisé sur toute
l’icône, dans sa version couleurs.
The TOTAL WASH application (in France) provides
customers with information and services about our car
wash services and is linked to the TOTAL WASH brand.
The TOTAL WASH logo is then used in the whole icon.
L’application TOTAL WASH (en France) donne
des informations et offre des services aux clients
de notre offre de nettoyage de véhicules. L’application
est liée à la marque TOTAL WASH, c’est donc ce logo
qui est utilisé sur toute la surface de l’icône.
18EXAMPLES OF APPLICATIONS LINKED TO AN OFFER FROM TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
A BLOCKBUSTER BRAND CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
3.6 EXEMPLES D’APPLCATIONS LIÉES À UN SERVICE D’UNE MARQUE BLOCKBUSTER
EN When the application offers a service linked to a Example: the TOTAL Lubmarine Lub-on-Ship application
Blockbuster brand, the logo of the brand should (France)
be used in one third of the icon, in its colored version. Exemple: l’application TOTAL Lubmarine Lub-on-Ship
The other two thirds of the icon should be used to
display a pictogram representing the service /
destination of the application. The pictogram should
be white on a TOTAL red background.
If no pictogram is available, a text may be written in
Helvetica Neue heavy font, but it should not be longer
than two words or 12 characters. It should be written
in white, on a TOTAL red background.
FR Quand l’application propose un service lié à une marque
Blockbuster, le logo de la marque doit être utilisé
sur un tiers de l’icône, dans sa version couleurs.
Les deux autres tiers de l’icône doivent servir à afficher
un pictogramme associé au service ou la destination
de l’application. Le pictogramme doit être blanc sur
un fond rouge TOTAL.
Si aucun pictogramme n’est disponible, un texte peut
être écrit en typographie Helvetica Neue heavy, mais
ne doit pas dépasser 2 mots ou 12 caractères. Le texte
doit alors être écrit en blanc sur fond rouge TOTAL.
19TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
4.
APPLICATION PRESENTATION INSIDE THE STORES
(APPSTORE, ETC.)
PRÉSENTATION DE L’APPLICATION DANS LES STORES
(APPSTORE, ETC.)
20PRESENTATION OF AN APPLICATION INSIDE THE STORES TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
ÉCRANS DE PRÉSENTATION DE L’APPLICATION DANS LES STORES CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
4.1
EN In order to present our applications in a consistent way Option 1 / Key features - Example: TOTAL Services
and raise the TOTAL brand visibility, rules have been Option 1 / Fonctionnalités principales - Exemple : TOTAL Services
created for the design of the screens presenting the
application in its marketplace).
The principle guiding the design of these screens is
that the application should be presented on a minimum
of three screens, linked to each others. ➏
➊
Multiple options are possible; the first option is
➏
to present the main features of the application directly
on the first screen, and then go deeper on
one particuler feature on the other screens.
➋ Save time
& benefit from the
good deals & services
FR Afin de créer de la cohérence entre nos applications ➌
et augmenter la visibilité de la marque TOTAL,
des règles ont été formalisées pour la conception
des écrans de présentation de l’application dans
Good
le store. Deals
➍
Le principe guidant la conception de ces écrans est
que l’application doit être présentée sur un minimum ➎ Quickly find ➎ Find a station
de trois pages, liées entre elles.
Station
Finder
Search
Criteria
the nearest station based on your
Plusieurs options sont possibles. La première est
de présenter les fonctionnalités clés de l’application around you search criteria
sur le premier écran, et d’approfondir sur d’autres
fonctionnalités sur les écrans suivants.
➊ TOTAL logo ➌ TOTAL red background ➎ Key features
Logo TOTAL Fond rouge TOTAL Fonctionnalités clés
➋ Catchphrase with ➍ Key features ➏ Screenshots from
the benefits brought by with pictograms the application
the application Fonctionnalités clés Captures d’écrans
Accroche avec les bénéfices avec pictogrammes de l’application
21 qu’apporte l’applicationPRESENTATION OF AN APPLICATION INSIDE THE STORES TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
ÉCRANS DE PRÉSENTATION DE L’APPLICATION DANS LES STORES CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
4.1
EN Option 1 / Key features - Example: TOTAL Services
Option 1 / Fonctionnalités principales - Exemple : TOTAL Services
total services
TOTAL Services
Good
Deals
Save time
& benefit from the
good deals & services
FR
Station Search
Good
Deals
Quickly find Find a station Save time
Finder Criteria Station Search the nearest station based on your
Finder Criteria
around you search criteria & benefit from the
good deals & services
You can choose to highlight the key features of the app
on the first screenshot.
Vous pouvez choisir de mettre en avant les Good
Deals
fonctionnalités principales de l’application sur la
première capture d’écran.
Quickly find
Station
Finder
Search
Criteria
the nearest station
around you
22PRESENTATION OF AN APPLICATION INSIDE THE STORES TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
ÉCRANS DE PRÉSENTATION DE L’APPLICATION DANS LES STORES CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
4.1
EN Option 2 / Home screen - Example: TOTAL Services
Option 2 / Écran d’accueil - Exemple : TOTAL Services
total services
TOTAL Services
Save time
& benefit from the
good deals & services
Save time
& benefit from the
good deals & services
Quickly find Find a station Save time
the nearest station based on your
around you search criteria & benefit from the
good deals & services
➊
FR
Quickly find Find a station
the nearest station based on your Quickly find
the nearest station
around you search criteria around you
➊ Home screen
Écran d’accueil You can choose to
display the application
landing screen on
Another option is to present the home screen of the first screenshot.
the application directly on the first screen of presentation.
Vous pouvez choisir de
montrer l’écran d’acceuil
Une autre option est de présenter l’écran d’accueil de l’application sur la
de l’application directement sur le premier écran première capture d’écran.
de présentation.
23SPECIFIC CASE: PRESENTATION OF AN APPLICATION LINKED TO TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
A BLOCKBUSTER BRAND CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
4.2 CAS PARTICULIER : PRÉSENTATION D’UNE APPLICATION DE MARQUE
BLOCKBUSTER
EN Option 1 / Key features - Example: TOTAL Direct Énergie Option 1 / Color alternative
Option 1 / Fonctionnalités principales - Exemple : TOTAL Direct Énergie Option 1 / Alternative de couleurs
Gérez votre Gérez votre
conso d’énergie conso d’énergie
en toute simplicité en toute simplicité
Facture Facture
& conso
FR & conso
Pass Parrainage Pass Parrainage
recharge recharge
Suivez votre conso Consultez les détails Suivez votre conso C
en temps réel de vos factures en temps réel
Contact Tableau Contact Tableau
conseiller de bord conseiller de bord
For applications linked to a blockbuster brand, the layout is identical but the colors of the brand Another option for applications linked to a blockbuster
may be used for the background, texts and pictograms if the color is part of the color palette brand is to keep the TOTAL red for the background and
(see color palette section on page 39). Otherwise, another color from the palette may be used. the digital red for texts and pictograms.
Pour les applications liées à une marque blockbuster, la mise en page est identique mais Une autre option pour les applications liées à
les couleurs de la marque peuvent être reprises pour le fond, les textes et les pictogrammes une marque blockbuster est de garder le rouge TOTAL
si la couleur fait partie de la palette de couleurs définies (voir palette de couleurs page 39 ). pour le fond et le rouge digital pour les textes et
Dans le cas contraire, une autre couleur de la palette peut être utilisée. les pictogrammes.
24SPECIFIC CASE: PRESENTATION OF AN APPLICATION LINKED TO TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
A BLOCKBUSTER BRAND CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
4.2 CAS PARTICULIER : PRÉSENTATION D’UNE APPLICATION DE MARQUE
BLOCKBUSTER
EN Option 1 / Key features - Example: TOTAL WASH Option 1 / Color alternative
Option 1 / Fonctionnalités principales - Exemple : TOTAL WASH Option 1 / Alternative de couleurs
Lavez votre Lavez votre
voiture en voiture en
toute simplicité toute simplicité
FR
Trouvez Trouvez
votre lavage votre lavage
Trouvez Rechargez Trouvez
Payez votre Rechargez Payez votre Rechargez
lavage votre compte votre lavage votre compte lavage votre compte votre lavage
For applications linked to a blockbuster brand, the layout is identical but the colors of the brand Another option for applications linked to a blockbuster
may be used for the background, texts and pictograms if the color is part of the color palette brand is to keep the TOTAL red for the background and
(see color palette section on page 39). Otherwise, another color from the palette may be used. the digital red for texts and pictograms.
Pour les applications liées à une marque blockbuster, la mise en page est identique mais Une autre option pour les applications liées à
les couleurs de la marque peuvent être reprises pour le fond, les textes et les pictogrammes une marque blockbuster est de garder le rouge TOTAL
si la couleur fait partie de la palette de couleurs définies (voir palette de couleurs page 39 ). pour le fond et le rouge digital pour les textes et
Dans le cas contraire, une autre couleur de la palette peut être utilisée. les pictogrammes.
25TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
5.
ANIMATION PRINCIPLES FOR THE SPLASH SCREEN
PRINCIPE D’ANIMATION DU SPLASH SCREEN
26ANIMATION PRINCIPLES FOR THE SPLASH SCREEN TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
PRINCIPE D’ANIMATION DU SPLASH SCREEN CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
5.1
EN In order to ensure TOTAL’s visibility and consistency Samples from animation
throughout the application ecosystem, animation Extraits de l’animation
principles have been created for the splash screen
(charging screen before the opening of the app).
The TOTAL logo should be used in its vertical and
colored version. The wordmark TOTAL is animated while
the energy sphere stays still.
For blockbuster brands and light-endorsed brands,
the logo of the brand may be used for the splashscreen
(with the endorsement to TOTAL in the case of an
endorsed brand).
Animations can be downloaded on the M&S brands
norms website. Their use is strictly limited to mobile
applications.
FR Pour assurer la visibilité de TOTAL et créer de la
cohérence dans l’écosystème d’application, des
principes d’animation ont été créés pour le splash
screen (écran de chargement avant l’ouverture
de l’application).
Le logo TOTAL doit être utilisé dans sa version verticale
et colorée. Le mot TOTAL est animé et la sphère
d’énergie reste immobile.
Pour les marques blockbuster et les marques à
endossement léger, le logo de la marque peut être
utilisé pour le splashscreen (avec endossement
à TOTAL le cas échéant).
Les animations peuvent être téléchargées sur le site
des normes M&S, leur utilisation est strictement limitée
aux applications mobiles.
27TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
6.
INSIDE SCREENS
ÉCRANS INTÉRIEURS
28CONSTRUCTION GRID FOR SCREENS TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
GRILLE DE CONSTRUCTION DES PAGES CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
6.1
EN All of our applications should be built on a responsive GUI Grid
grid in order to allow customers to use the application GUI Grille
on any device.
Content should placed in the areas of the screen
The grid is made up of three parts: 16px 9px 35px that contain columns. Column width is defined using
percentages, rather than fixed values to allow to
➊ the columns (in blue) flexibility. The number of columns displayed in the grid
45px
is determined by the size of the screen.
➋ the gutters (in between the columns)
Gutters are the spaces between columns. They help
➌ the margins
separate content. Gutter widths are fixed values but
➊ can adapt to different screens. Wider gutters are more
appropriate for larger screens, as they create more
whitespace between columns.
➋
Margins are the space between content and the left and
right edges of the screen. Margin widths are defined as
fixed values but can adapt to different screens. Wider
margins are more appropriate for larger screens, as
➌ they create more whitespace around the perimeter of
FR Toutes nos applications doivent être construites content.
en suivant une grille réactive (responsive) pour permettre
aux consommateurs d’utiliser l’application sur n’importe Les contenus doivent être placés dans les parties de
quel appareil. l’écran contenant des colonnes. La largeur des colonnes
peut être exprimée en pourcentages plutôt qu’en valeur
absolue pour permettre plus de flexibilité. Le nombre
La grille est composée de trois éléments: de colonnes affichées sur la grille est déterminée par la
taille de l’écran.
➊ les colonnes (en bleu)
Les gouttières sont les espaces entre les colonnes.
➋ les gouttières (entre les colonnes) Elles permettent de séparer les contenus. La largeur
➌ les marges des gouttières est une valeur fixe mais elle peut
s’adapter selon la taille des écrans. Les gouttières
larges sont plus adaptées aux écrans larges car elles
créent plus d’espace entre les colonnes.
Les marges sont les espaces entre le contenu et les
bords gauche et droit de l’écran. La largeur des marges
est une valeur fixe mais elle peut s’adapter selon la taille
35px
des écrans. Les marges larges sont plus adaptées
aux écrans larges car elles créent plus d’espace autour
29 du contenu.HOME SCREEN / MENU / HEADER TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
PAGE D’ACCUEIL / MENU / HEADER CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
6.2
EN Guidelines have been formalized for the header Dashboard / Menu / Header 1 Menu / Header 1
and the menu inside the application.
The header should be in TOTAL red.
Different options are possible for the menu, the first
option is a fixed menu at the bottom of the screen,
present on all the pages. It includes direct access
to key functionnalities and/or pages. It may also be
unrolled with a swipe up for more features. ➊ ➌
➊ Title OBJET UN OBJET DEUX OBJET TROIS
€
Factures Electricité
➋ Fixed menu with key features
Dernière Facture 112,6€
➌ Page items Prochain Prélèvement le 05/06/2020
The second option is to use a burger menu, for more
information please report to page 33. Consommation Electricité
1325 kWh
Mai 2018
+ 1,2% par rapport à Avril 2017
FR Des lignes directrices ont été formalisées pour l’en-tête
et le menu. Parrainages
Vous avez gagné 60€
L’en-tête doit être en rouge TOTAL.
Plusieurs options sont possibles pour le menu,
Parrainages 1\Z[PÄJH[PM
la première est d’utiliser un menu fixe en bas de l’écran,
Déménager en tout 2EWHQLUXQMXVWL¿FDWLI
présent sur toutes les pages. Il inclut l’accès direct sécurité de domicile
à des fonctionnalités clés et/ou pages clés. Il peut aussi
être déroulé avec un glisser vers le haut pour plus de
fonctionnalités. Pass Recharge Dépannage
Lorem ipsum dolor sit Lorem ipsum dolor sit
➊ Titre amec consec amec consec
➋ Menu fixe avec fonctionnalités clés
➌ Items de page
➋
La seconde option est d’utiiser un menu burger.
Tableau de Bord Factures Conso Live Tableau de Bord Factures Conso Live
Plus d’informations sont disponibles page 33.
30FOOTER MENU TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
MENU BAS CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
6.2.1
EN Unrolled, the fixed menu may take two forms to present Menu 1A Menu 1B
more information and features:
- icons for more features
- list of additionnal features and information
on the customers’ account (if appropriate)
➊ Key features
➋ Additionnal features and pages
OBJET UN OBJET DEUX OBJET TROIS
➌ Information on the user’s account (if appropriate)
➌
44 rue des petites écuries
75010 Paris
0DUpIpUHQFHFOLHQW
123456789
➋
FR Déroulé, le menu fixe peut prendre deux formes pour
présenter plus d’informations et de fonctionnalités :
€
- icônes pour plus de fonctionnalités
- liste de fonctionnalités additionnelles et informations €
sur le compte utilisateur (si approprié) ➊
➊ Fonctionnalités clés
➋ Fonctionnalités et pages additionnelles
➋
➌ Information sur le compte utilisateur (si approprié)
➊
Tableau de Bord Factures Conso Live
31Vous pouvez aussi lire
