association donneursde voix

association
des
donneurs voix
de
Charte graphique sites ADV et sites des BS
1. généralités
2. charte graphique logo
3. charte graphique polices et couleurs
1. Généralités
1.1. But de la charte graphique
Le but de la charte graphique est de conserver une cohérence graphique dans les réalisations
graphiques web de l’ADV :
- site advbs.fr, site catalogue et fichier national,
- site serveur, site librairie, site littérature scolaire,
- sites des Bibliothèques Sonores
1.2. Intérêt de la charte graphique
L'intérêt d’une charte graphique web pour les sites de l’ADV et les sites de BS est double :
1.2.1.
L’identité graphique reste intacte quelles que soient les réalisations graphiques
web, afin que l’Association (somme d'individualités) parle « d'une seule voix ».
1.2.2.
La charte graphique permet au récepteur (l’internaute) d’identifier rapidement
l’émetteur (l’ADV) et, par habitude, si la cohérence est respectée, de se repérer
visuellement dans les différentes réalisations graphiques (sites nationaux, sites de
BS) et au sein même d’un même support graphique, ce qui en facilite la lecture.
N. B. Une charte graphique doit laisser suffisamment de liberté en envisageant le maximum de
contextes où les règles d’utilisation des signes graphiques de l’identité graphique doivent
s'appliquer.
(L’accessibilité web étant un problème spécifique mais parent de celui traité dans la charte graphique, elle
fait l’objet d’un document particulier).
1. généralités
2. charte graphique logo
3. charte graphique polices et couleurs
2. Charte graphique logo
2.1.Taille
La taille du logo peut varier selon la page web sur laquelle il est utilisée. Tout changement de
taille doit être rigoureusement proportionnel.
2.2. Couleurs*
Pour le logo : RGB : 144-36-40, Hexa : #902428
La signature :
« Le livre » RGB : 195-43-2, Hexa : #C32B02
« qu'on » RGB : 237-128-56, Hexa : #ED8038
« écoute » RGB : 210-0-0, Hexa : #D20000
2.3.Utilisation : zone d’exclusion
Le logotype est utilisé sur fond blanc. Il a une zone de
protection mise en évidence ici par le cadre noir. Aucun
élément ne doit entrer dans cette zone, ni texte, ni image.
Ci-dessous, zones d’exclusion image-logo, image-texte et logo-texte
non respectées
1. généralités
2. charte graphique logo
3. charte graphique polices et couleurs
Ci-dessous, zone d’exclusion image-logo non respectée
Ci-dessous, zone d’exclusion logo-texte non respectée
Ci-dessous, zones d’exclusion image-logo, image-texte et logo-texte
respectées
1. généralités
2. charte graphique logo
3. charte graphique polices et couleurs
2.4. Cas particulier : Logo sans signature
Le logo peut être utilisé sans signature, dans des cas particuliers tels que en début d’articles,
par exemple.. Comme pour le logo avec signature, ils se décline avec ou sans ombre.
Comme lui, il doit être utilisé de préférence à gauche de la page web, compte tenu de sa
forme.
Exemple d’utilisation :
Nous vous proposons, en prêt gratuit, plusieurs dizaines de milliers livres sonores, des
grands classiques aux ouvrages contemporains.
Le logo sans signature obéit aux mêmes règles d’utilisation que celui avec signature : il ne
doit être utilisé ni pivoté horizontalement ni étiré dans aucun sens, la modification de taille doit
respecter les proportions (= homothétie).
homothétie) La zone d’exclusion doit également être respectée.
1. généralités
2. charte graphique logo
3. charte graphique polices et couleurs
3.Charte graphique polices de caractères et couleurs
3.1. Polices de caractères
Les polices de caractères utilisées dans le site advbs.fr et les sites de BS sont des
polices courantes, populaires, répandues sur les ordinateurs des internautes : Arial,
Helvetica, sans-serif .
La feuille de style qui gère ces pages web les contient toutes les trois dans cet ordre : si
la 1ère n’était pas reconnue, la 2ème le serait, et si aucune des deux n’était reconnue, le
navigateur utiliserait une police « générique sans empattements ».
Les polices de caractères utilisées dans le site Serveur sont, dans l’ordre : Verdana,
Arial, Helvetica, sans-serif.
La police utilisée dans la signature du logo est NeoSans.
Il est recommandé de ne pas utiliser de polices « exotiques » dans les sites web.
3.2. Couleurs*
Les couleurs sont utilisées comme fond de pages d’une part, pour les textes d’autre
part.
3.2.1. Couleurs de fond de page, cas général : soit le blanc (#FFFFFF), soit un gris très
clair (#F2F2F2) selon des sites.
3.2.2. Couleurs des textes, cas général :
Les pages web utilisent des titres de niveau 1 (h1) pour les grands titres, des
titres de niveau 2 (h2) pour les principaux sous-titres, les titres de niveau 3 (h3),
etc. (Voir document « Accessibilité web »).
Chaque niveau de titre a sa propre taille et son propre code couleur, le tout géré
par une feuille de style attachée au site.
Les textes proprement dits sont écrits soit en noir, soit en gris très foncé.
RQ. Les sites de BS « modèle standard » ont tous la même feuille de style.
1. généralités
2. charte graphique logo
3. charte graphique polices et couleurs
3.2.3. Couleurs des liens sur advbs.fr
Les liens hypertextes ont leurs propres couleurs, selon qu’ils n’ont pas été visités,
qu’ils sont survolés, qu’ils ont été visités. Seul le 1er cas est envisagé ici :
code hexa : #D33615
3.2.4. Couleurs des items de menus et autres de advbs.fr
Items de menu non ouverts : code hexa #9A2016
Items de menu ouverts, bandeaux sur images (page accueil) : code hexa #902428
3.2.5. Cas particulier du serveur livres.advbs.fr
code hexa : #D33615
code hexa : #BF2229
Si l’homogénéité n’est pas encore parfaite tous sites confondus, elle tend néanmoins à l’être.
*Annexe : les codes couleurs
Chaque couleur est définie par un code.
Les pages web utilisent
-
soit le code html dit hexadécimal : 6 chiffres ou 6 lettres ou une combinaison de 6 chiffres +
lettres, précédés du signe #. Les lettres sont indifféremment des majuscules ou des minuscules,
-
soit le code couleur RVB, combinaison des couleurs ROUGE,VERT, BLEU et qui se présente
sous la forme de 3 couples de codes en chiffres compris entre 0 et 255.
La quadrichromie ou CMJN (C pour Cyan, M pour Magenta, J pour jaune et N pour Noir) est utilisée
en imprimerie
Il existe sur le web des tableaux de conversion qui permettent de passer d’un code à l’autre.
Mis à jour le 28/11/2013 – F.B.