Charte graphique web - Université de Franche

Charte graphique web
Université de Franche-Comté
1 - Objectif de la charte graphique
2 - Application de la charte graphique pour les sites hébergés sur le domaine
« univ-fcomte.fr »
a) Sites des UFR, Instituts et écoles
b) Autres sites hébergés sur le domaine univ-fcomte.fr
3 – Principes de la charte
a) Principe de navigation
. Le bandeau graphique haut
. Le bandeau de navigation gauche
. Le bandeau de navigation haut
. Le corps du texte
b) La police de caractères
c) Eléments graphiques
d) Conseils pour la conception des pages
. Mise en page
. Le texte
. Les animations
. Les images
. La mise à jour des pages
4 – Faire héberger un site sur le domaine « univ-fcomte.fr »
Télécharger la charte de publication
1 - Objectif de la charte graphique
La charte graphique définit une identité graphique web commune à l'ensemble des sites des
composantes rattachés au site internet de l'Université de Franche-Comté. L’image qui en émane se doit
d’être unifiée tant dans la forme (nécessité d’utiliser le logo et la ligne graphique de l’université) que
dans le fond.
La charte graphique a pour objectif d'homogénéiser l'ensemble des publications web, de simplifier la
navigation et de favoriser l'accès à l'information sur l’ensemble du site de l’Université et de ses
différentes rubriques. Ainsi, le site de l’Université de Franche-Comté et ses composantes pourront
afficher une identité propre.
2 - Application de
« univ-fcomte.fr »
la
charte
graphique
par
les
sites
hébergés
sur
le
domaine
Les différents sites doivent conserver une identité graphique tout au long de la visite de l’internaute et
lors du passage d’une rubrique à une autre. C’est pour cette raison que certaines contraintes devront
être appliquées pour avoir un bon impact sur ses visiteurs. L’application de la charte se situe à 2
niveaux.
a) Les sites des UFR, Instituts et écoles doivent appliquer les points suivants (ces éléments s’intègrent
automatiquement avec l’utilisation d’Explid) :
•
•
•
•
•
•
•
Le logo
Le bandeau graphique haut
Le bandeau navigation gauche
La police Verdana
Le respect de la mise en page
Les mentions légales
Le menu vert UFC
Les points suivants sont proposés mais ne sont pas obligatoires (ces fonctions s’intègrent
automatiquement avec l’utilisation d’Explid) :
•
•
•
•
•
•
Le type de menu (déroulant ou non)
Le bandeau de navigation haut
Les puces dans le menu gauche
Une image de fond en filigrane : sur la page d’accueil uniquement ou sur toutes les pages
Une image en bas de la colonne gauche
Un menu bas
b) Pour tous les autres sites hébergés sur le domaine de l’Université, le logo doit apparaître avec
« Université de Franche-Comté » en toutes lettres.
3 – Principes de la charte
a) Principe de navigation (Exemple : le site de l’IUT de Besançon-Vesoul)
Les visiteurs des sites doivent trouver les informations mises en ligne avec rapidité et efficacité. La
navigation pour accéder aux informations s'effectue par bandeaux structurés et organisés à
l'identique d'un site à l'autre.
Les pages des sites doivent s'articuler autour de quatre grandes parties :
- le bandeau graphique en haut
- le bandeau de navigation à gauche
- le bandeau de navigation en haut n’est pas obligatoire (situé sous le bandeau graphique)
- le corps de la page
Bandeau graphique haut
Menu de navigation haut
Menu de navigation gauche
Menu bas
. Le bandeau graphique haut
Le logo UFC
Le nom de
l’Université
Le nom de la
composante
Le bandeau graphique doit être centré en haut.
Les illustrations graphiques doivent refléter l'identité de la composante ou de l'enseignement
représenté par le bandeau. En aucun cas, le visuel du site central ne peut être repris.
La taille de la partie centrale du bandeau (exemple ci-dessus) sera de 995 pixels de large avec une
hauteur de 108 pixels. Une adaptation en 1024 sera possible avec les dimensions 1247 x 108 pixels.
Le bandeau graphique doit obligatoirement contenir :
•
•
le logo de l'Université : sa position en haut à gauche est à cheval sur le bandeau graphique et le
bandeau de navigation gauche. Le logo doit toujours être positionné debout. Sa taille est de 178
x 138 pixels. Un lien placé sur le logo doit renvoyer à la page d’accueil du site de l'Université
(http://www.univ-fcomte.fr). Ce logo peut être téléchargé sous la rubrique charte graphique
papier du site de l'Université
le nom de la composante ou de l'enseignement auquel le site correspond.
. Le menu de navigation gauche
Sa position à gauche de l'écran est placée sous le bandeau graphique.
Sa taille est de 116 pixels de large.
La couleur de fond transparente.
Les liens cliquables sont en police Verdana taille 11 pixels.
Dans la partie inférieure du bandeau doit figurer un encart obligatoire
de couleur verte identique à tous les sites web des composantes et
services communs. Il doit obligatoirement contenir ces 5 éléments :
-
le moteur de recherche
UFC : sa composition
l’ENT
l’annuaire
l’intranet
Les puces utilisées dans le menu gauche sont au choix du gestionnaire
du site.
Une image choisie par le responsable de la composante peut
également être insérée en bas du bandeau entre le menu et l’encart
UFC obligatoire.
Logo de
l’UFC
Menu gauche
Encart
UFC
. Le menu de navigation haut (type layers ou menus déroulants)
Ce bandeau est une option alternative intéressante : en effet vous pouvez le créer si le bandeau
gauche de navigation ne peut pas recevoir la totalité des informations ou si le site demande d'autres
entrées.
Ce type de menu est facultatif, il peut être utilisé si le créateur de la page y trouve une utilité.
Le passage de la souris sur un lien cliquable d'un bandeau déclenche l'affichage d'un menu déroulant.
Si vous créez ce lien, les cellules du menu doivent toujours correspondre à une page du site ou une
"partie intermédiaire".
Le fond des cellules peut avoir une couleur distincte.
La police des cellules est en Verdana 11 gras.
. Le corps du texte
Il se compose des informations présentes entre les bandeaux. Sa mise en page doit être simple et
sobre. Les textes peuvent être illustrés d'images, de photographies ou de puces. La typographie
retenue est la police Verdana.
b) La police de caractères
La couleur du fond sur lequel s'inscrit le texte est blanc.
Le texte est en noir sur fond blanc. La police utilisée est le Verdana taille 11 pixels.
police et taille
style
Verdana 14 pixels
gras
Verdana 11 pixels justifié
normal
liens textuels actifs
Verdana
normal ou souligné
liens textuels visités
Verdana
souligné
titre de page
corps du texte
c) Eléments graphiques
Les images et photographies ne doivent pas excéder un poids de 50 Ko pour alléger les temps de
chargement des pages.
Des images de fond en filigrane pourront être utilisées sur les pages des différentes composantes du
site. Elles pourront être présentes sur la page d’accueil ou sur toutes les pages au choix du créateur.
d) Conseils pour la conception des pages
. Mise en page
- Attention l'abus de caractère gras est un faux ami et rend la lecture indigeste
- Faire simple, clair et compréhensible
- Placer les informations importantes en haut de page et accessibles en un minimum de clics
- Ne pas trop charger les pages : aérer les textes
- Eviter les pages trop longues avec ascenseurs
- Vérifier la mise en place sur différentes plates-formes et sur différents navigateurs avec des
résolutions d'écran de 800 x 600 et 1024 x 768
- Eviter les pages trop lourdes 60 Ko maximum pour minimiser les temps de chargement des pages
- Eviter les fonds de couleurs criardes, tels que le jaune vif ou le vert cru. Les décors doivent rester
sobres et discrets (si possible tramés).
. Le texte
- Écrire des phrases courtes à la construction simple
- Vérifier l’orthographe des noms propres, les numéros de téléphone, adresses électroniques, qui sont
de multiples sources d’erreurs.
- Doser la longueur des lignes
- Éviter les abréviations
- Mettre le moins possible de majuscules (nous respectons pour cela les règles de typographie de
l’Imprimerie nationale) ce qui signifie pour les noms propres (nom de famille, ville,…) ne faire porter la
majuscule que sur la lettre initiale (exemple Besançon).
De même pour l’intitulé des composantes ne faire porter la majuscule que sur le premier mot, sinon le
texte devient illisible soit UFR Sciences du langage, de l’homme et de la société.
- Ne pas faire figurer de monsieur ou madame pour les contacts mais uniquement prénom + nom +
titre (exemple : François Dupont, professeur).
- Éviter au maximum les sigles (attention au langage de spécialiste).
- Nommer les fichiers sans accent ni espace
. Les animations
- Ne pas abuser des animations. Elles doivent souligner des éléments d'une page véritablement
importants pour le lecteur
- Les animations ne doivent pas être trop voyantes car elles attirent le regard et gênent à la lecture.
Elles sont à bannir à proximité d'un long texte
. Les images
-
Utiliser des formats gratuits du type JPEG ou TIF
Éviter un poids total supérieur à 50 Ko pour les images d'une page
Faire attention aux droits d'auteurs et droit à l'image des personnes photographiées
Modérer la taille et la qualité de vos images
. La mise à jour des pages
Toutes informations publiées doivent être mises à jour régulièrement. Les informations périmées sont à
bannir !
4 – Faire héberger un site sur le domaine « univ-fcomte.fr »
Pour héberger un site sur l'un des serveurs de l'Université contacter le webmaster à [email protected]
Vous pouvez télécharger la charte de publication pour un hébergement en cliquant ici.