Charte graphique web Bibliothèques de l'UPS

charte graphique du site internet Bibliothèques de l’UPS //décembre2012

sommaire 2

INTRODUCTION

3

1. MODÈLES DE PAGE 1.1 Structure des pages 1.2 Page d’accueil 1.3 Page rubrique 1.4 Page contenu

4 4 7 7 9

2. COULEURS 2.1 Couleurs dominantes

11 11

3. TYPOGRAPHIE 3.1 Police d’écriture 3.2 Titres 3.3 Majuscules-minuscules

2 12 12 12

4. IMAGES 4.1 Images pages d’accueil 4.2 Dimensions conseillées pour les images de pages de contenu

13 13 13

introduction Conçue afin de garantir une cohérence de l’identité visuelle des sites des bibliothèques de l’UPS et une homogénéité de ses productions graphiques, cette charte présente l’ensemble des principes à respecter et des éléments à intégrer, pour développer une communication forte, lisible et durable.

Le cadre d’application et les éléments qui y sont présentés ne sont pas figés ; ils évolueront naturellement au gré des besoins et des supports, tout en tirant profit des possibilités et des usages nouveaux introduits par les technologies numériques ou par la bureautique. La charte graphique est une production qui dépasse la dimension graphique. Elle porte sens et forme. Elle se doit d’exprimer et de véhiculer (dans le choix des déclinaisons) l’identité de l’institution, son image globale.

3

1. modèles de pages Afin de garantir une identité visuelle, toutes les pages du site sont construites sur une structure identique. A partir de cette structure, des modèles intégrant la ligne graphique ont été développés pour la page d’accueil du site et pour les pages de contenu.

La pages d’accueil du site permet de mettre en évidence par l’image, un thème général, un projet de recherche, un bâtiment ou autre, et de faire des changements régulièrement.

Plusieurs modèles ont également été développés pour les pages de contenu.

1.1 structure des pages Toutes les pages sont construites sur la base du modèle suivant :

header

Conteneur

Footer

4

Exemple : page d’accueil

5

Header Le bandeau, qui est repris sur toutes les pages du site, comprend les éléments suivants : 3

1 4

2

• 1, logos : en haut à gauche • 2, menu déroulant : permettant un accès direct aux differentes sous rubriques + horaires • 3, zone des utilitaires : contact, selecteur de langue...

• 4 moteur recherche interne permettant la recherche d’informations au moyen de mots-clés à l’intérieur du site (en haut à droite) Footer Le pied de page, qui est repris sur toutes les pages du site, comprend les éléments suivants : 1

3

2

• 1, liens vers les BU Paul Sabatier • 2, plan de site , mentions légales, crédits • 3, adresse • 4, réseaux sociaux • 5, accès intranet

6

5

4

1.2 page d’accueil La zone conteneur de la page d’accueil principale du site comprend au minimum les éléments suivants : • Bloc se former s’informer • Bloc productions de l’UPS • Zone de recherche de livres, articles, journaux...

• Bloc actualité agenda

1

3 2

4

1.3 page rubrique C’est en quelque sorte une page sommaire avec une présentation des informations sur deux colonnes. Cette page énumere les sous rubriques.

7

Modèle 1 :

Hiérarchisation de l’information avec des encarts titre de sous rubrique

Modèle 2 :

Ajout d’un bandeau illustratif de la rubrique

8

1.4 page contenu Il existe plusieurs gabarits de pages de contenu.

Gabarit 1 : 1 2 4 3

1, fil d’arianne 2, titre 3, colonne de sous menu + zone recherche 4, contenu Gabarit 2 : 1 2 4 3

1, fil d’arianne 2, titre 3, contenu 4, contenu

9

Gabarit 3 : 1 2

3

1, fil d’arianne 2, titre 3, contenu

10

2. couleurs 2.1 couleurs dominantes #48545d

#34a0ad

#05424a

#ffffff

#dc8700

11

La palette de couleur dominante tourne autour du bleu, bleu/vert, gris et blanc Connotation aux matières verre et beton.

Utilisation de quelques touches de orange Le orange est la couleur complĂŠmentaire du bleu, il apporte donc avec parcimonie un contraste maximum avec le reste de la maquette.

3. typographie 3.1 police d’écriture Les polices de caractère du site sont Verdana et Ubuntu.

L’utilisation de deux polices de caractère permet une homogénéité du site ainsi qu’une meilleure lisibilité de l’ensemble des informations.

3.2 titres La taille de caractère ainsi que la couleur varient selon le niveau du titre : • Niveau 1 : 2,5 em, normal, couleur: #3BA7B6, font : Ubuntu • Niveau 2 : 1,75 em, normal, couleur: #283843, font : Ubuntu • Niveau 3 : 1,25 em, normal, couleur: #DC8700, font : Verdana • Niveau 4 : 1em, gras, couleur: #283843, font : Verdana • Niveau 5 : 0,8 em, normal, couleur: #283843, font : Verdana Les lien sont de couleur : #3BA7B6 avec un roll over de couleur : #283843

3.3 Majuscules-minuscules Le titre du site, les titres principaux de chaque page et les menus de gauche doivent être en minuscules.

12

4. images Afin de rendre le site attrayant, l’image tient une place prédominante: elle apparaît en grand format sur la page d’accueil en tant qu’image de background. L’accent est ainsi mis sur les bâtiments et les sites universitaires, l’être humain qui dominent dans l’image.

L’image doit apporter une plus-value au texte. Ainsi, on peut voir des travaux de groupes, de laboratoires ou des excursions par exemple.

4.1 images page d’accueil Image de background

Il est conseillé d’utiliser une image de taille 1900x800 pixels minimum afin que celle-ci occupe la totalité de l’ecran sans être étirée L’utilisitation de plusieurs images aléatoires donne du dynamise au site.

actualités et évènement Taille : 564px * 305px

4.2 Dimensions conseillées pour les images de pages de contenu

13

Format portrait

Taille : 120px * 160px

Format paysage

Taille : 300px * 220px

Format panoramique Taille : 900px * 150px

14