Charte graphique.
On appelle « charte graphique » (en anglais graphic charter) le document synthétique récapitulant les règles de présentation des éléments graphiques d'un site web, traduisant son identité visuelle.
La charte graphique définit l'habillement graphique de la page, notamment les tailles, couleurs et apparences des textes, images et boutons du site ainsi que le positionnement relatif des objets dans la page.
Choix des couleurs
Il est conseillé de ne pas utiliser plus de trois couleurs différentes dans un site web afin de respecter le critère de sobriété. Le choix des couleurs devra correspondre, le cas échéant, aux couleurs de l'organisation (notamment aux couleurs du logo) et exprimer une ambiance particulière.
Quel que soit le choix des couleurs, il est recommandé d'établir une couleur prédominante, représentant la majeure partie de la page web, et une ou plusieurs couleurs secondaires plus dynamiques (plus vives), en moindres proportions , afin de mettre des éléments en exergue.
Les couleurs possèdent une symbolique implicite. Il est donc important de les choisir en connaissance de cause. En effet, les couleurs influent sur le comportement des individus :
- physiquement : appétit, sommeil, température du corps, etc.
- émotionnellement : sentiment de peur, de sécurité, de joie, etc.
- psychologiquement : dynamisme, concentration, etc.
Le tableau ci-dessous récapitule la signification classiquement associée aux couleurs :
| Couleur | Symbolique méliorative | Symbolique péjorative | Domaine |
|---|---|---|---|
| Bleu | Calme, confiance, autorisation, apaisement, sérénité, protection, sérieux, mystique, bonté, eau, espace, paix | Froid, sommeil | Voile, nouvelles technologies, informatique, médecine |
| Violet | Délicatesse, passion, discrétion, modestie, religion. | Mélancolie, tristesse, deuil, insatisfaction | Culture, politique |
| Rose | Charme, intimité, femme, beauté | Naïveté | Journal personnel, femmes |
| Rouge | Chaleur, force, courage, dynamisme, triomphe, amour, enthousiasme. | Violence, colère, danger, urgence, interdit, sang, enfer. | Luxe, mode, sport, marketing, médias |
| Orange | Tiédeur, confort, gloire, bonheur, richesse, honneur, plaisir, fruit, odeur, tonus, vitalité. | Feu, alerte | Divertissement, sport, voyage |
| Jaune | Lumière, gaieté, soleil, vie, pouvoir, dignité, or, richesse, immortalité. | Tromperie, égoïsme, jalousie, orgueil, alerte | Tourisme |
| Vert | Nature, vie végétale, secours, équilibre, foi, apaisement, repos, confiance, tolérance, espoir, orgueil, jeunesse, charité. | Découverte, nature, voyage, éducation | |
| Brun | Calme, philosophie, terroir. | Saleté | Environnement |
| Blanc | Pureté, innocence, neige, propreté, fraîcheur, richesse. | Mode, actualités | |
| Gris | Neutralité, respect. | Design, associations, organisations à but non lucratif | |
| Noir | Sobriété, luxe, nuit. | Mort, obscurité, tristesse, monotonie. | Cinéma, art, photographie et interdit |
La composition des couleurs a également une influence sur la perception des volumes. La composition des couleurs peut permettre de dégager une sensation de bien être, aussi bien pour la décoration d'une maison, que pour le graphisme d'un site web.
Le cercle chromatique est un bon outil permettant d'apréhender les interactions entre les couleurs. Le cercle chromatique est une représentation circulaire des couleurs, sur laquelle figurent les couleurs suivantes :
- Les couleurs primaires (rouge, jaune, vert), couleurs « pures », ne pouvant être obtenues par mélange d'autres couleurs ;
- Les couleurs secondaires (cyan, magenta, jaune), obtenues par mélange à parts égales de deux couleurs primaires adjacentes. Les couleurs secondaires sont diamétralement opposées à leur couleur complémentaire (soustractive) sur le cercle chromatique ;
- Les couleurs tertiaires, obtenues par mélange d'une couleur primaire et d'une couleur secondaire.
Les couleurs sont également catégorises en couleurs « chaudes » (dont le ton est proche du rouge) et « froides » (dont le ton est proche du bleu).
Il existe des règles universelles régissant l'harmonie des couleurs, dûes à des propriétés physiques de l'oeil. En effet, lorsqu'il contemple une couleur, l'oeil crée automatiquement, sur son contour, un filtre de la couleur complémentaire. On parle de « contraste simultané ». Avec ce mécanisme, la perception des couleurs dépend des couleurs avoisinantes. Ainsi, le jaune paraîtra plus orangé lorsqu'il est associé à du bleu et le bleu paraîtra plus violet. Un bleu à côté d'un rouge apparaîtra vert, etc.
Par ailleurs, des couleurs voisines sur le diagramme chromatique créent une sensation d'équilibre pour l'oeil, en vertu de l'absence de contraste, on parle ainsi d'« harmonie d'analogie ».
Il existe donc globalement deux façons principales de choisir des couleurs harmonieuses :
- en choisissant des nuances d'une même couleur, soit des couleurs de même teinte dont les tons sont proches,
- en mêlant des couleurs complémentaires (chaudes et froides), c'est-à-dire des couleurs éloignées sur le diagramme chromatique. Pour deux couleurs, il suffit de choisir des couleurs complémentaires, diamétralement opposées ; pour trois couleurs, les couleurs choisies doivent former un triangle équilatéral, etc.
Couleur d'arrière-plan
Le choix de la couleur d'arrière-plan (en anglais background) est primordial, car un arrière-plan mal choisi peut gêner la lisibilité. Un bon contraste entre la couleur d'avant-plan et la couleur dominante de l'arrière plan est nécessaire. A ce titre, il est fortement déconseillé d'opter pour un arrière-plan graphique car il peut gêner la lecture et dégage généralement un sentiment d'amateurisme. L'arrière-plan devra ainsi généralement être choisi très pâle
Choix des images
Les images permettent d'agrémenter un site web et de le rendre plus gai. Néanmoins l'abus d'image peut gêner le confort visuel, ainsi que le chargement des pages.
Les webmasters débutant aiment à égayer leur site avec des animations amusantes glanées sur le web. Dans la mesure du possible il est préférable de s'en passer car elles peuvent énerver le lecteur et car elles donnent un caractère amateur au site.
Typographie
Il est fortement contre-indiqué d'utiliser plus de deux polices sur un site web. Les polices stylisées doivent être utilisées avec parcimonie (pour le titre par exemple) et l'essentiel de la page web devra être réalisée avec une police classique (Arial, Verdana, Helvetica, etc.).
Pour une utilisation imprimée traditionnelle, les polices à empattement (serif) facilitent généralement la lecture car les empattements permettent d'accompagner le regard du lecteur.
Sur le web, l'utilisation de telles polices est déconseillée car selon la définition de l'écran du visiteur, les empattements peuvent très vite devenir des pattes de mouche gênantes pour la lecture. Ainsi, il est souhaitable d'opter pour des polices sans empattement (sans serif), plus rondes.
Enfin, sachez que les textes utilisant des polices non standard risquent de ne pas apparaître correctement sur les écrans des internautes. Pour créer des titres avec de telles polices, il est néanmoins possible de contourner cette limitation en créant des images transparentes comportant le texte.
Symboles graphiques
Il est conseillé de faire usage de pictogrammes ou d'icônes afin d'établir une signalisation visuelle. Attention tout de même au choix des symboles car le sens perçu par l'utilisateur peut être différent de celui qu'on lui attribue, notamment si le site web a une vocation internationale. Les pictogrammes suivants sont ainsi communément utilisé :
- une loupe symbolise habituellement une fonction de recherche ;
- une enveloppe signale la possibilité de contacter le webmaster par mail ;
- un point d’interrogation caractérise une aide en ligne ;
- une maison représente un lien vers la page d'accueil ;
- un drapeau signale la langue de la page en cours ou bien la possibilité de changer de langue.