Charte graphique web. Université de Franche-Comté

Transcription

1 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

2 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 la charte graphique par les sites hébergés sur le domaine «univ-fcomte.fr» 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 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 gauche Menu de navigation haut Menu bas

4 . 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é ( 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.

5 . 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.

6 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 titre de page Verdana 14 pixels gras corps du texte Verdana 11 pixels justifié normal liens textuels actifs Verdana normal ou souligné liens textuels visités Verdana souligné 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.

7 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 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 à webmaster@univfcomte.fr Vous pouvez télécharger la charte de publication pour un hébergement en cliquant ici.