TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL

La page est créée Aurélien Tessier
 
CONTINUER À LIRE
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
                 VERSION 3 - 08 / 2020
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
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
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
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
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
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
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
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
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
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
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
                        CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL

1.

INTERNAL APPLICATIONS
APPLICATIONS INTERNES
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
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
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
                             CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL

    2.

    NAMING RULES
    RÈGLES DE NOMENCLATURE

9
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS - CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL
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

10
EXCEPTIONS                                                                                                                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.

11
SPECIFICITY 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.

12
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
                                        CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL

     3.

     ICONS OF TOTAL APPLICATIONS
     ICÔNES DES APPLICATIONS DE TOTAL

13
ICON 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.
14
CONSTRUCTION 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

15
EXAMPLE 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.

16
EXAMPLE 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.

17
EXAMPLES 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.

18
EXAMPLES 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.

19
TOTAL 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.)

20
PRESENTATION 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’application
PRESENTATION 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

22
PRESENTATION 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.

23
SPECIFIC 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.

24
SPECIFIC 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.

25
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
                                    CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL

     5.

     ANIMATION PRINCIPLES FOR THE SPLASH SCREEN
     PRINCIPE D’ANIMATION DU SPLASH SCREEN

26
ANIMATION 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.

27
TOTAL MOBILE APPLICATIONS GRAPHIC STANDARDS
                         CHARTE GRAPHIQUE DES APPLICATIONS MOBILE TOTAL

     6.

     INSIDE SCREENS
     ÉCRANS INTÉRIEURS

28
CONSTRUCTION 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.

30
FOOTER 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

 31
Vous pouvez aussi lire