Trois dimensions
pour la charte graphique


• Mise en page écran
• Codage du fond d'écran
• Codage des figures : le texte et l'image
 

1. MISE EN PAGE ÉCRAN

      1a. Largeur d'écran et disposition des éléments
      • Tenir compte d'une résolution d'écran minimale de 800 x 600 px.
      • Prévoir un tableau (sans bordure) ou un cadre (frameset) pour insérer le contenu de la page:

        • EX: BORDER=0 
        width=800></center>


      1b. Code de composition ou d'organisation spatiale des éléments

      •  Découpage d'une page écran en parties +- égales,  mais ayant généralement : 

        • - un titre intégré ou non dans un bandeau de navigation
        - un corps de page avec  menus (principal et périphérique)
        - un bas de page, souvent optionnel où la mise à jour est précisée.
    Selon la disposition des éléments iconiques et linguistiques dans le corps de la page, différents itinéraires de lecture sont possibles : convergence vers le centre (focalisation perceptuelle des éléments vers le centre), lecture du haut vers le bas (verticale) ou lecture en Z (horizontale).


   2. CONTENU DES PAGES

    2.1 Codage du fond d'écran/background
    • Couleur/texture/trame/image de fond : Palette Pantone , codage hexadécimal:

      • bgcolor="#E8E8E8" (gris de la page d'accueil)
      bgcolor="#D1D1D1" (gris de la page actuelle)
2.2. Codage des figures: le texte et l'image
• Codage typographique
     
    Format HTML
    (programmation)
    Style/format
    Caractéristiques
    police- taille- couleur
    Rôle du texte
    Grand Titre(titre 1)  (page d'accueil)  graphique
    <center><img SRC="titreinter3.gif" 
    Le titre: format GIF


















     

    		 sand
    30 pts
    CF1623

     

    		 Titre général de la page  affichée
    Identifier/accrocher

    sous-titre (titre 2)

    		 majuscule et normal gras verdana
    18 pts    		 SOMMAIRE

     titre 3 

    		 normal  gras verdana 
    14 pts    		  sous-sections

    titre 4

         		 normal  verdana 
    12 pts 
    body text="#000000"    		 Texte/définitions
    titre 5
    		 normal Comic Sans MS
    9/10 pts    		 Extraits...
    titre 6
    		 normal gras Georgia 
    9 pts    		 Consignes : haut/bas de page ou avancer/reculer/retour page d'accueil

     

    • Codage iconographique


    Nature de l'image fixe /en séquence


    couleur/lumière cadrage/plan gestuel/regard mtv/animation

    photo
    dessin
    logo
     

    icône
    bouton,
    flèche: 

    hyperliens: ink="#0000FF"
    vlink="#551A8B"
    alink="#0000FF">

    bande verticale/horizontale:

    cadre
    tableau
    schéma
    organigramme

    Autres: 
    plate-forme interactive (FAQ)
     
    Types 

    1. image signal : flèche, boutons d'action...

    2. image symbole : logo, métaphore, signature

    3. image indice : hyper liens...

    4. image référentielle, qui montre, témoigne, telle que la photo d'une personne, d'un lieu ou encore le schéma explicatif.
    Tout dépend de l'angle, de l'éclairage...

    Rôles 

    1. signal
    dicter une conduite,
    favoriser l'action

    3. 
    Indice
    guider...
    2. 
    Symbole
    accrocher, évoquer
    s'imprimer dans la mémoire

    4. 
    Référentiel
    informer/montrer

    Accueil - Définitions  - Exemple - Grille d'analyse