Charte graphique                                          multimedias 2010                                          www.to...
Introduction               Ce document présente les règles de déclinaisons graphiques,               chromatiques, typogra...
Principes généraux Page daccueil - Composition                                                    1   Header à fort impact...
Principes généraux    Page daccueil - Animations flash+     Visuels des animations flash, du header.      Mise en avant de...
Principes généraux    Page daccueil - Navigation2    Accès aux thématiques visiter, bouger,déguster, séjourner. Pour une m...
Principes généraux Grands principes de mise en forme                                         1   1   Visuel de fond, spéci...
Principes généraux    Grands principes de mise en forme                                                    1+    Gamme chr...
Principes généraux Visiter, bouger, déguster, séjourner - Page de résultats                                               ...
Principes généraux Pages visiter, bouger, déguster, séjourner - Fiche détaillée                                           ...
Principes généraux    Visiter, bouger, déguster, séjourner - Particularités                              1                ...
Gamme Chromatique Pages génériques          R : 218    R : 173    R : 235    R : 97     R : 54          V : 123    V : 102...
Gamme Chromatique Pages Déguster          R : 163                   R : 207    R : 121    R : 250          V : 65         ...
Gamme Chromatique Pages Villes & Villages de Pierre          R : 78                      R : 106    R : 121    R : 190    ...
Gamme Chromatique Pages Un Grand marché de saveurs          R : 171                   R : 20     R : 213    R : 205       ...
Typographie Aldo Semi Bold                                                      +   Cette typographie est utilisée pour le...
IconographieLes principes graphiques présentés ci-dessous, reprennent les éléments forts de lidentité du Pays de Figeac.- ...
Le site enfants                    1       Un univers original basé sur lillustration à été                            spé...
Prochain SlideShare
Chargement dans…5
×

Charte graphique

3 257 vues

Publié le

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 257
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
1 142
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Charte graphique

  1. 1. Charte graphique multimedias 2010 www.tourisme-figeac.com 1 Introduction 14 Typographie 2-9 Principes généraux 15 Iconographie10-13 Gamme chromatique 16 Le site enfants
  2. 2. Introduction Ce document présente les règles de déclinaisons graphiques, chromatiques, typographiques, et iconographiques de loffice de tourisme de Figeac. Lapplication 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 sapproprier les principes de base de lidentité. 1
  3. 3. Principes généraux Page daccueil - 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 dinformations. 6 6 Zone dactualité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. 4. Principes généraux Page daccueil - Animations flash+ Visuels des animations flash, du header. Mise en avant des atouts touristiques du Pays de Figeac. Affichage aléatoire. 3
  5. 5. Principes généraux Page daccueil - Navigation2 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 dinformations. Une couleur spécifique est associée aux différentes entrées. 4
  6. 6. Principes généraux Grands principes de mise en forme 1 1 Visuel de fond, spécifique pour chaque grande rubrique. 2 Fil dariane. Donne larborescence des rubriques que le visiteur a traversé. 2 3 4 5 3 Titre H1, police Aldo Semi Bold 30px, plus dinformations sur le fonctionne- ment de couleurs dans le document annexe (Ot-Figeac.xls) 4 Icônes présentes sur toutes les pages, elles permettent dimprimer la page, de lenvoyer à un ami, de réduire ou daugmenter la taille du texte, et de la partager via des sites communautaires. 6 5 Titre H2, police Aldo Semi Bold 25px, plus dinformations sur le fonctionne- ment de couleurs dans le document annexe (Ot-Figeac.xls) 6 Titre H3, police Aldo Semi Bold 20px, plus dinformations 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. 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. 8. Principes généraux Visiter, bouger, déguster, séjourner - Page de résultats 1 Titre H1, police Aldo Semi Bold 30px, plus dinformations 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 dinformations 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 dinformations sur la couleur associée sur le document annexe (Ot-Figeac.xls) 5 Résultats liés à la recherche. Lensemble des résultats se trouve dans une zone scrollable. 4 5 7
  9. 9. Principes généraux Pages visiter, bouger, déguster, séjourner - Fiche détaillée 1 Texte dinformation sur lactivité 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 à linformation désirée se trouvant en bas de page. 4 Cartographie. Localiser sur une carte la visite. 4 5 Coordonnées et périodes douverture. 5 6 Informations complémentaires. 6 8
  10. 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 41 Iconographie spécifique : Visiter Bouger Deguster Séjourner2 Couleur spécifique : Visiter Bouger Deguster Séjourner3 Zone de recherche et de localisation. Couleur de fond et picto de localisation spécifique à la rubrique Visiter Bouger Deguster Séjourner4 Listing de résultats : couleurs spécifiques aux différentes rubriques 9
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. IconographieLes principes graphiques présentés ci-dessous, reprennent les éléments forts de lidentité 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écriturehié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 daccueil (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 dimages sont choisis pour évoquer les grandes thématiques. Le visuel doit tendre à labstraction pour susciter la curiosité et le mystère quisont 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. BoutonsLes boutons 15
  17. 17. Le site enfants 1 Un univers original basé sur lillustration à é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 dactualités 2 4 Stickers 4 5 Pied de page présent sur tout le site, regroupant des outils, infos pratiques... etc 5 16

×