Charte graphique
                                          multimedias 2010
                                          www.tourisme-figeac.com




 1      Introduction         14   Typographie
 2-9    Principes généraux   15   Iconographie
10-13   Gamme chromatique    16   Le site enfants
Introduction




               Ce document présente les règles de déclinaisons graphiques,
               chromatiques, typographiques, et iconographiques de l'office
               de tourisme de Figeac.
               L'application rigoureuse de ces règles a pour objectif de garder
               une harmonie et une cohérence à travers le site internet.

               Cette charte graphique permet à tout utilisateur de s'approprier
               les principes de base de l'identité.




                                                                                  1
Principes généraux

 Page d'accueil - Composition



                                                    1   Header à fort impact visuel ( zone flash), avec
                                                        accès à la vidéo et au site des Grands Sites de
                                                        Midi Pyrénées
                                1
                                                    2   Zone de recherche par mots clés, et sélection de la
                                                        langue.

                                                4       Accès aux espaces collaboratifs, vidéos, photos et
                                                    3
                   2                3                   à la carte intéractive.

                                            7       4   Accès aux thématiques visiter, bouger, déguster,
               5                                        séjourner.


                                                    5   Accès aux espaces d'informations.
                                        6

                                                    6   Zone d'actualités (Lumière sur) et événements du
                                                        pays de figeac.


                                                    7   Accès au site enfants.


              8                                     8   Pied de page présent sur tout le site, regroupant
                                                        des outils, infos pratiques ... etc




                                                                                                            2
Principes généraux

    Page d'accueil - Animations flash




+     Visuels des animations flash, du header.
      Mise en avant des atouts touristiques du Pays de Figeac.
      Affichage aléatoire.




                                                                 3
Principes généraux

    Page d'accueil - Navigation




2    Accès aux thématiques visiter, bouger,déguster, séjourner. Pour une meilleure distinction; une couleur et un picto spécifique sont associés aux différentes entrées.




                                                                                                                                                       3   Accès aux espaces d'informations.
                                                                                                                                                           Une couleur spécifique est associée aux
                                                                                                                                                           différentes entrées.




                                                                                                                                                                                                 4
Principes généraux

 Grands principes de mise en forme

                                         1   1   Visuel de fond, spécifique pour chaque grande rubrique.




                                             2   Fil d'ariane. Donne l'arborescence des rubriques que le visiteur a traversé.
                           2
                               3
                                     4
                     5                       3   Titre H1, police Aldo Semi Bold 30px, plus d'informations sur le fonctionne-
                                                 ment de couleurs dans le document annexe (Ot-Figeac.xls)



                                             4   Icônes présentes sur toutes les pages, elles permettent d'imprimer la page,
                                                 de l'envoyer à un ami, de réduire ou d'augmenter la taille du texte, et de la
                                                 partager via des sites communautaires.

                   6
                                             5   Titre H2, police Aldo Semi Bold 25px, plus d'informations sur le fonctionne-
                                                 ment de couleurs dans le document annexe (Ot-Figeac.xls)


                                             6   Titre H3, police Aldo Semi Bold 20px, plus d'informations sur le fonctionne-
                                                 ment de couleurs dans le document annexe (Ot-Figeac.xls)


                                             7   Liste à puces, la puce est de la couleur dominante de la rubrique.
                       7




                                                                                                                                5
Principes généraux

    Grands principes de mise en forme

                                                    1




+    Gamme chromatique spécifique aux rubriques :       1
                                                            Visuel de fond spécifique pour chaque grande rubrique.
     FIGEAC, Cité de Champollion
                                                            Particularité pour la page "Musée Champollion, les Écritures du Monde", qui dispose
     Villes et villages de pierre                           aussi de sa propre image de fond.
     Entre Causses et Vallées du Lot
     Plaisirs Culturels et Artistiques
     Un grand marché de Saveurs
     Sur la route de Saint-Jacques
     Pages génériques                                                                                                                             6
Principes généraux

 Visiter, bouger, déguster, séjourner - Page de résultats

                                                            1   Titre H1, police Aldo Semi Bold 30px, plus d'informations sur la couleur
                                                                associée sur le document annexe (Ot-Figeac.xls)
                                                                Une iconagraphie spécifique à la rubrique vient habiller le titre.



                                                            2   Titre H2, police Aldo Semi Bold 25px, plus d'informations sur la couleur
                                               1                associée sur le document annexe (Ot-Figeac.xls)

                        2
                                                    3       3   Zone de recherche et de localisation.
                                                                Couleur de fond et picto de localisation spécifique à la rubrique ( page. 9 )



                                                            4   Titre H3, police Aldo Semi Bold 20px, plus d'informations sur la couleur
                                                                associée sur le document annexe (Ot-Figeac.xls)



                                                            5   Résultats liés à la recherche. L'ensemble des résultats se trouve dans une
                                                                zone scrollable.



                        4




                                     5




                                                                                                                                                7
Principes généraux

 Pages visiter, bouger, déguster, séjourner - Fiche détaillée




                                                                1   Texte d'information sur l'activité ou le séjour sélectionné.
                                                                    Lien permettant de retourner à la page de recherche.


                          1
                                                                2   Photographie. Visualiser plusieurs photos via une numérotation.

                                     2

                                         3                      3   Ancres. Accéder directement à l'information désirée se trouvant en bas de
                                                                    page.


                                                                4   Cartographie. Localiser sur une carte la visite.
                                4


                                                                5   Coordonnées et périodes d'ouverture.


                                5
                                                                6   Informations complémentaires.




                                6




                                                                                                                                                8
Principes généraux

    Visiter, bouger, déguster, séjourner - Particularités




                              1                                                     1                                                   1                       1
                   2                                                      2                                                 2                           2


                          3                                                   3                                                     3                       3




                          4                                                   4                                                    4                        4




1     Iconographie spécifique :
                                            Visiter              Bouger                     Deguster            Séjourner



2     Couleur spécifique :                  Visiter              Bouger                     Deguster            Séjourner




3     Zone de recherche et de localisation.
      Couleur de fond et picto de localisation spécifique à la rubrique           Visiter              Bouger                   Deguster    Séjourner




4     Listing de résultats : couleurs spécifiques aux différentes rubriques




                                                                                                                                                                    9
Gamme Chromatique

 Pages génériques

          R : 218    R : 173    R : 235    R : 97     R : 54
          V : 123    V : 102    V : 231    V : 59     V : 41
          B:0        B : 12     B : 228    B : 56     B : 39
          # DA7B00   # AD660C   # EBE7E4   # 613B38   # 362927




 Pages Visiter

          R : 99     R : 154    R : 140    R : 239
          V : 34     V : 11     V : 62     V : 233
          B : 74     B : 95     B : 110    B : 237
          # 63224A   # 9A0B5F   # 8C3E6E   # EFE9ED




 Pages Bouger

          R : 29     R : 10     R : 29     R : 221
          V : 172    V : 120    V : 98     V : 242
          B : 192    B : 134    B : 105    B : 245
          # 1DACC0   # 0A7886   # 1D6269   # DDF2F5




                                                                 10
Gamme Chromatique

 Pages Déguster

          R : 163                   R : 207    R : 121    R : 250
          V : 65                    V : 50     V : 40     V : 240
          B : 69                    B : 57     B : 45     B : 239
          # A34145                  # CF3239   # 79282D   # FAF0EF




 Pages Séjourner

          R : 149                   R : 205    R : 68     R : 244
          V : 26                    V : 64     V : 30     V : 233
          B : 65                    B : 109    B : 55     B : 237
          # 951A41                  # CD406D   # 441E37   # F4E9ED




 Pages Figeac, Cité de Champolion

          R : 122                   R : 173    R : 217    R : 198
          V : 60                    V : 30     V:0        V : 160
          B : 92                    B : 117    B : 132    B : 181
          # 7A3C5C                  # AD1E75   # D90084   # C6A0B5




                                                                     11
Gamme Chromatique

 Pages Villes & Villages de Pierre

          R : 78                      R : 106    R : 121    R : 190
          V : 46                      V : 60     V : 68     V : 170
          B : 34                      B : 44     B : 59     B : 163
          # 4E2E22                    # 6A3C2C   # 79443B   # BEAAA3




 Pages Entre Causses et Vallées du Lot

          R : 65                      R : 79     R : 93     R : 163
          V : 83                      V : 101    V : 14     V : 182
          B:0                         B:3        B:0        B : 100
          # 415300                    # 4F6503   # 5D8D00   # A3B664




 Pages Plaisirs Culturels et Artistiques

          R : 106                     R : 145    R : 196    R : 220
          V : 34                      V : 39     V : 53     V : 141
          B : 62                      B : 81     B : 111    B : 170
          # 6A223E                    # 912751   # C4356F   # DC8DAA




                                                                       12
Gamme Chromatique

 Pages Un Grand marché de saveurs

          R : 171                   R : 20     R : 213    R : 205
          V:3                       V : 50     V : 92     V : 149
          B : 14                    B : 57     B : 89     B : 150
          # AB030E                  # CF3239   # D55C59   # CD9596




 Pages Sur la route de St-Jacques

          R:0                       R:8        R:0        R : 122
          V : 77                    V : 101    V : 145    V : 189
          B : 88                    B : 114    B : 162    B : 198
          # 004D58                  # 086572   # 0091A2   # 7ABDC6




                                                                     13
Typographie

 Aldo Semi Bold
                                                      +   Cette typographie est utilisée pour les H1, H2, H3, le texte se trouvant
 ABCDEFGHIJKLMNOPQRSTUVWXYZ                               dans le chapo et la navigation.
 a b c d e f g h i j k l m no p q r s t u v w x y z
 1234567890



 Miso Regular
                                                          Cette typographie est uniquement utilisée pour les citations et la
 ABCDEFGHIJKLMNOPQRSTUVWXYZ                           +
                                                          navigation de pied de page.

 a b c d e f g h i j k l m no p q r s t u v w x y z
 1234567890


 Arial Regular et Bold
                                                      +   Typographie générique se trouvant dans le reste du site.
 ABCDEFGHIJKLMNOPQRSTUVWXYZ
 a b c d e f g h i j k l m no p q r s t u v w x y z
 1234567890

 ABCDEFGHIJKLMNOPQRSTUVWXYZ
 a b c d e f g h i j k l m no p q r s t u v w x y z
 1234567890




                                                                                                                                     14
Iconographie

Les principes graphiques présentés ci-dessous, reprennent les éléments forts de l'identité du Pays de Figeac.

- Les hiéroglyphes. En référence au musée Champollion de Figeac, certaines rubriques auront pour éléments représentatif une icône issue de l'écriture
hiéroglyphique.

- Le jeu de papier. Le logo du Pays de Figeac se compose de lettres découpées colorées. Ce principe est repris sur des boutons spécifiques et autres petits
éléments.

- La photographie. La photographie est utilisée de façon prédominante à la fois sur la page d'accueil (header flash) et dans les arrières plans des pages du site.
Le choix des images est très important, il faut y voir plusieurs usages :
• les grands fonds d'images sont choisis pour évoquer les grandes thématiques. Le visuel doit tendre à l'abstraction pour susciter la curiosité et le mystère qui
sont les axes de communication principaux du Pays de Figeac.
• A contrario les photos utilisées dans le contenu, mettent en évidence des scènes de la vie touristique du Pays de Figeac.




      Visiter          Bouger             Deguster          Séjourner

                                                                                                  Pictogrammes :
                                                                                                  la couleur de fond change selon la rubrique.
       Visiter          Bouger             Deguster          Séjourner




                                       Puces associées aux liens



                                       Puces des listes :
                                       la couleur de fond change seulon la rubrique.                Boutons
Les boutons


                                                                                                                                                               15
Le site enfants


                    1       Un univers original basé sur l'illustration à été
                            spécialement crée pour les enfants


                            1   Header en flash avec la navigation principale composée de
                                trois entrées.


                            2   Nouvelles entrées avec pictos associés

                        3
                            3   Zone d'actualités

                2

                            4   Stickers


                        4
                            5   Pied de page présent sur tout le site, regroupant des outils,
                                infos pratiques... etc

            5




                                                                                                16

Charte graphique

  • 1.
    Charte graphique multimedias 2010 www.tourisme-figeac.com 1 Introduction 14 Typographie 2-9 Principes généraux 15 Iconographie 10-13 Gamme chromatique 16 Le site enfants
  • 2.
    Introduction Ce document présente les règles de déclinaisons graphiques, chromatiques, typographiques, et iconographiques de l'office de tourisme de Figeac. L'application rigoureuse de ces règles a pour objectif de garder une harmonie et une cohérence à travers le site internet. Cette charte graphique permet à tout utilisateur de s'approprier les principes de base de l'identité. 1
  • 3.
    Principes généraux Paged'accueil - Composition 1 Header à fort impact visuel ( zone flash), avec accès à la vidéo et au site des Grands Sites de Midi Pyrénées 1 2 Zone de recherche par mots clés, et sélection de la langue. 4 Accès aux espaces collaboratifs, vidéos, photos et 3 2 3 à la carte intéractive. 7 4 Accès aux thématiques visiter, bouger, déguster, 5 séjourner. 5 Accès aux espaces d'informations. 6 6 Zone d'actualités (Lumière sur) et événements du pays de figeac. 7 Accès au site enfants. 8 8 Pied de page présent sur tout le site, regroupant des outils, infos pratiques ... etc 2
  • 4.
    Principes généraux Page d'accueil - Animations flash + Visuels des animations flash, du header. Mise en avant des atouts touristiques du Pays de Figeac. Affichage aléatoire. 3
  • 5.
    Principes généraux Page d'accueil - Navigation 2 Accès aux thématiques visiter, bouger,déguster, séjourner. Pour une meilleure distinction; une couleur et un picto spécifique sont associés aux différentes entrées. 3 Accès aux espaces d'informations. Une couleur spécifique est associée aux différentes entrées. 4
  • 6.
    Principes généraux Grandsprincipes de mise en forme 1 1 Visuel de fond, spécifique pour chaque grande rubrique. 2 Fil d'ariane. Donne l'arborescence des rubriques que le visiteur a traversé. 2 3 4 5 3 Titre H1, police Aldo Semi Bold 30px, plus d'informations sur le fonctionne- ment de couleurs dans le document annexe (Ot-Figeac.xls) 4 Icônes présentes sur toutes les pages, elles permettent d'imprimer la page, de l'envoyer à un ami, de réduire ou d'augmenter la taille du texte, et de la partager via des sites communautaires. 6 5 Titre H2, police Aldo Semi Bold 25px, plus d'informations sur le fonctionne- ment de couleurs dans le document annexe (Ot-Figeac.xls) 6 Titre H3, police Aldo Semi Bold 20px, plus d'informations sur le fonctionne- ment de couleurs dans le document annexe (Ot-Figeac.xls) 7 Liste à puces, la puce est de la couleur dominante de la rubrique. 7 5
  • 7.
    Principes généraux Grands principes de mise en forme 1 + Gamme chromatique spécifique aux rubriques : 1 Visuel de fond spécifique pour chaque grande rubrique. FIGEAC, Cité de Champollion Particularité pour la page "Musée Champollion, les Écritures du Monde", qui dispose Villes et villages de pierre aussi de sa propre image de fond. Entre Causses et Vallées du Lot Plaisirs Culturels et Artistiques Un grand marché de Saveurs Sur la route de Saint-Jacques Pages génériques 6
  • 8.
    Principes généraux Visiter,bouger, déguster, séjourner - Page de résultats 1 Titre H1, police Aldo Semi Bold 30px, plus d'informations sur la couleur associée sur le document annexe (Ot-Figeac.xls) Une iconagraphie spécifique à la rubrique vient habiller le titre. 2 Titre H2, police Aldo Semi Bold 25px, plus d'informations sur la couleur 1 associée sur le document annexe (Ot-Figeac.xls) 2 3 3 Zone de recherche et de localisation. Couleur de fond et picto de localisation spécifique à la rubrique ( page. 9 ) 4 Titre H3, police Aldo Semi Bold 20px, plus d'informations sur la couleur associée sur le document annexe (Ot-Figeac.xls) 5 Résultats liés à la recherche. L'ensemble des résultats se trouve dans une zone scrollable. 4 5 7
  • 9.
    Principes généraux Pagesvisiter, bouger, déguster, séjourner - Fiche détaillée 1 Texte d'information sur l'activité ou le séjour sélectionné. Lien permettant de retourner à la page de recherche. 1 2 Photographie. Visualiser plusieurs photos via une numérotation. 2 3 3 Ancres. Accéder directement à l'information désirée se trouvant en bas de page. 4 Cartographie. Localiser sur une carte la visite. 4 5 Coordonnées et périodes d'ouverture. 5 6 Informations complémentaires. 6 8
  • 10.
    Principes généraux Visiter, bouger, déguster, séjourner - Particularités 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4 1 Iconographie spécifique : Visiter Bouger Deguster Séjourner 2 Couleur spécifique : Visiter Bouger Deguster Séjourner 3 Zone de recherche et de localisation. Couleur de fond et picto de localisation spécifique à la rubrique Visiter Bouger Deguster Séjourner 4 Listing de résultats : couleurs spécifiques aux différentes rubriques 9
  • 11.
    Gamme Chromatique Pagesgénériques R : 218 R : 173 R : 235 R : 97 R : 54 V : 123 V : 102 V : 231 V : 59 V : 41 B:0 B : 12 B : 228 B : 56 B : 39 # DA7B00 # AD660C # EBE7E4 # 613B38 # 362927 Pages Visiter R : 99 R : 154 R : 140 R : 239 V : 34 V : 11 V : 62 V : 233 B : 74 B : 95 B : 110 B : 237 # 63224A # 9A0B5F # 8C3E6E # EFE9ED Pages Bouger R : 29 R : 10 R : 29 R : 221 V : 172 V : 120 V : 98 V : 242 B : 192 B : 134 B : 105 B : 245 # 1DACC0 # 0A7886 # 1D6269 # DDF2F5 10
  • 12.
    Gamme Chromatique PagesDéguster R : 163 R : 207 R : 121 R : 250 V : 65 V : 50 V : 40 V : 240 B : 69 B : 57 B : 45 B : 239 # A34145 # CF3239 # 79282D # FAF0EF Pages Séjourner R : 149 R : 205 R : 68 R : 244 V : 26 V : 64 V : 30 V : 233 B : 65 B : 109 B : 55 B : 237 # 951A41 # CD406D # 441E37 # F4E9ED Pages Figeac, Cité de Champolion R : 122 R : 173 R : 217 R : 198 V : 60 V : 30 V:0 V : 160 B : 92 B : 117 B : 132 B : 181 # 7A3C5C # AD1E75 # D90084 # C6A0B5 11
  • 13.
    Gamme Chromatique PagesVilles & Villages de Pierre R : 78 R : 106 R : 121 R : 190 V : 46 V : 60 V : 68 V : 170 B : 34 B : 44 B : 59 B : 163 # 4E2E22 # 6A3C2C # 79443B # BEAAA3 Pages Entre Causses et Vallées du Lot R : 65 R : 79 R : 93 R : 163 V : 83 V : 101 V : 14 V : 182 B:0 B:3 B:0 B : 100 # 415300 # 4F6503 # 5D8D00 # A3B664 Pages Plaisirs Culturels et Artistiques R : 106 R : 145 R : 196 R : 220 V : 34 V : 39 V : 53 V : 141 B : 62 B : 81 B : 111 B : 170 # 6A223E # 912751 # C4356F # DC8DAA 12
  • 14.
    Gamme Chromatique PagesUn Grand marché de saveurs R : 171 R : 20 R : 213 R : 205 V:3 V : 50 V : 92 V : 149 B : 14 B : 57 B : 89 B : 150 # AB030E # CF3239 # D55C59 # CD9596 Pages Sur la route de St-Jacques R:0 R:8 R:0 R : 122 V : 77 V : 101 V : 145 V : 189 B : 88 B : 114 B : 162 B : 198 # 004D58 # 086572 # 0091A2 # 7ABDC6 13
  • 15.
    Typographie Aldo SemiBold + Cette typographie est utilisée pour les H1, H2, H3, le texte se trouvant ABCDEFGHIJKLMNOPQRSTUVWXYZ dans le chapo et la navigation. a b c d e f g h i j k l m no p q r s t u v w x y z 1234567890 Miso Regular Cette typographie est uniquement utilisée pour les citations et la ABCDEFGHIJKLMNOPQRSTUVWXYZ + navigation de pied de page. a b c d e f g h i j k l m no p q r s t u v w x y z 1234567890 Arial Regular et Bold + Typographie générique se trouvant dans le reste du site. ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e f g h i j k l m no p q r s t u v w x y z 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e f g h i j k l m no p q r s t u v w x y z 1234567890 14
  • 16.
    Iconographie Les principes graphiquesprésentés ci-dessous, reprennent les éléments forts de l'identité du Pays de Figeac. - Les hiéroglyphes. En référence au musée Champollion de Figeac, certaines rubriques auront pour éléments représentatif une icône issue de l'écriture hiéroglyphique. - Le jeu de papier. Le logo du Pays de Figeac se compose de lettres découpées colorées. Ce principe est repris sur des boutons spécifiques et autres petits éléments. - La photographie. La photographie est utilisée de façon prédominante à la fois sur la page d'accueil (header flash) et dans les arrières plans des pages du site. Le choix des images est très important, il faut y voir plusieurs usages : • les grands fonds d'images sont choisis pour évoquer les grandes thématiques. Le visuel doit tendre à l'abstraction pour susciter la curiosité et le mystère qui sont les axes de communication principaux du Pays de Figeac. • A contrario les photos utilisées dans le contenu, mettent en évidence des scènes de la vie touristique du Pays de Figeac. Visiter Bouger Deguster Séjourner Pictogrammes : la couleur de fond change selon la rubrique. Visiter Bouger Deguster Séjourner Puces associées aux liens Puces des listes : la couleur de fond change seulon la rubrique. Boutons Les boutons 15
  • 17.
    Le site enfants 1 Un univers original basé sur l'illustration à été spécialement crée pour les enfants 1 Header en flash avec la navigation principale composée de trois entrées. 2 Nouvelles entrées avec pictos associés 3 3 Zone d'actualités 2 4 Stickers 4 5 Pied de page présent sur tout le site, regroupant des outils, infos pratiques... etc 5 16