Charte graphique

Site internet de l’Université de Neuchâtel

TABLE DES MATIÈRES

INTRODUCTION
1. MODÈLES DE PAGE ............................................................................................................................. 1
1.1 Structure des pages...................................................................................................................... 2
1.2 Page d'accueil principale .............................................................................................................. 3
1.3 Page d'accueil des portails ........................................................................................................... 4
1.4 Page d'accueil des facultés .......................................................................................................... 5
1.5 Page d'accueil des instituts........................................................................................................... 6
1.6 Page d'accueil des services ......................................................................................................... 7
1.7 Page de contenu........................................................................................................................... 7
2. COULEURS ............................................................................................................................................ 8
2.1 Pages principales et administration.............................................................................................. 8
2.2 Faculté des lettres et sciences humaines .................................................................................... 9
2.3 Faculté des sciences .................................................................................................................... 9
2.4 Faculté de droit.............................................................................................................................. 9
2.5 Faculté des sciences économiques ............................................................................................. 9
2.6 Faculté de théologie...................................................................................................................... 9
3. TYPOGRAPHIE ...................................................................................................................................... 9
3.1 Police d'écriture............................................................................................................................. 9
3.2 Titres............................................................................................................................................ 10
3.3 Majuscules-minuscules............................................................................................................... 10
4. IMAGES................................................................................................................................................. 10
4.1 Dimensions conseillées d'images des pages d'accueil ............................................................. 10
4.2 Dimensions conseillées pour les images de pages de contenu ............................................... 10

Charte graphique site web -1.0 – mai 2008

I NTRODUCTION
Le site internet doit véhiculer l'image d'une université jeune, dynamique, à la pointe de la recherche et
susciter l'envie de venir y faire ses études ou d'y entreprendre des recherches. Pour cela, une charte
graphique a été définie. Elle dégage une ambiance agréable et sobre, compatible à la fois avec le sérieux
de l'institution et son cadre de vie attrayant.

La ligne graphique du site s'appuie sur la mise en place du nouveau logo typographique. Le carré qui
apparaît sur le « i » constitue un élément graphique redondant. Une déclinaison de la ligne graphique,
allant des différentes pages d'accueil (facultés, services, etc.) jusqu'aux pages de contenu, est opérée. Les
modèles de page développés doivent être utilisés à tous les niveaux du site (chapitre 1).

La charte graphique comprend également :

• la palette des couleurs à disposition (chapitre 2)
• la police d’écriture et d’autres éléments de typographie (chapitre 3)
• les formats d’images (chapitre 4)

La charte graphique ainsi que le système de navigation global sont imposés à tous les niveaux du site, de
manière à ce qu'une image uniforme, sérieuse et organisée s'en dégage et qu'elle soit en adéquation avec
l'institution. La charte graphique doit être respectée pour qu'un nouveau site soit validé et mis en ligne.

1. MODÈLES DE PAGE

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 les pages
d'accueil des sites et pour les pages de contenu.

Les pages d'accueil des sites permettent de mettre en évidence par l'image, un thème général, un projet
de recherche, un bâtiment ou un objet d'art, et de faire des changements régulièrement.

Cinq modèles de page d'accueil ont été développés :

1. UniNE home : page d'entrée du site
2. portail home: portails formation, recherche, partenaires, futur étudiant, étudiant, public et médias,
collaborateur
3. faculté home
4. institut home
5. service home

Les autres unités (laboratoires, centres de recherche, etc.) peuvent choisir parmi les modèles 2 à 5 celui
qui leur convient.

Trois modèles à choix ont également été développés pour les pages de contenu.

Charte graphique site web -1.0 – avril 2008 1

1.1 Structure des pages

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

Exemple: UniNE home

1. En-tête du site (bandeau)

2. Menu déroulant (lien vers les facultés et, le cas échant, les sous-entités de l'entité courante)
3. Menus principaux du site (menus que l'on retrouve sur toutes les pages du site)
4. Menus secondaires du site (menus que l'on retrouve sur toutes les pages du site)
5. Menus principaux de la page (menus propres à la page)
6. Menus secondaires de la page (menus propres à la page)
7. Pied de page

Charte graphique site web -1.0 – avril 2008 2

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

• logo : permettant de revenir sur la page d'accueil (en haut à gauche)

• menu déroulant : permettant un accès direct aux facultés, le cas échéant aux sous-entités de
l'entité courante (en bas à gauche)

• sélecteur de langue autorisant le choix de la langue pour autant que la page soit disponible dans la
langue correspondante (en haut à droite)

• zone des utilitaires offrant des outils transversaux par rapport au découpage du site : annuaire des
collaborateurs, plan du site, plan d'accès et informations de contact (en bas à droite)

• barre contextuelle permettant de revenir à une étape précédente (en bas au centre)

• moteur recherche interne permettant la recherche d'informations au moyen de mots-clés à

l'intérieur du site (en haut à droite)

Pied de page
Le pied de page, qui est repris sur toutes les pages du site, comprend les éléments suivants :

• adresse (y c. numéro de téléphone et adresse e-mail de l'entité)

• Impressum : lien vers la page « http://www2.unine.ch/page1227.html »

• authentification : connexion pour modifier un site

• le logo swissuniversity

1.2 Page d'accueil principale

La page d'accueil principale du site de l'Université comprend au minimum les éléments suivants :

• cinq menus (à gauche) permettant une entrée par profil: futur-e étudiant-e, étudiant-e inscrit-e,
public et alumni, collaborateur-trice, médias et prospective students)

• une partie centrale comprenant une image illustrant un thème d'actualité ou un projet de recherche
et qui est changée à une fréquence oscillant entre 1 semaine et 1 mois (une image de 430x430
pixels et un texte sur 3 lignes en bas à gauche de l'image)

• une rubrique actualités permettant de mettre en évidence les nouvelles informations concernant
l'Université (à droite)

• une rubrique agenda servant à annoncer les diverses manifestations, conférences ou autres
événements (à droite)

• quelques menus utiles pour mettre en évidence certaines pages d'information (en bas à droite)

Charte graphique site web -1.0 – avril 2008 3

1.3 Page d'accueil des portails

Le titre du portail est repris sur tout le site. Il peut s'accompagner d'un logo.

La partie centrale est libre (texte et image), la partie en haut à droite permet d'insérer les rubriques agenda
et actualités, mais également du texte libre. La partie en bas à droite est pour sa part réservée à des liens
simples.

Charte graphique site web -1.0 – avril 2008 4

1.4 Page d'accueil des facultés

La page d'accueil des facultés est une déclinaison de la ligne graphique de la page d'accueil principale à la
différence près qu'un menu faculté pratique remplace les menus prévus pour les accès par profil (en bas à
gauche).

Le titre du site (dénomination officielle de la faculté) est repris sur tout le site. Il peut s'accompagner d'un
logo.

Le bandeau de chaque faculté est muni d'une couleur différente pour se repérer. L'image au centre de la
page illustre un thème assez général qui est modifié à une fréquence régulière (image de 380x380 pixels
et, si souhaité, un texte sur 3 lignes maximum en bas à gauche de l'image). La partie de droite comprend
les rubriques agenda et actualités en haut et des liens en bas.

Pour avoir une certaine cohérence dans le site, certains menus de gauche sont obligatoires :

• Menu faculté (contenu : présentation de la Faculté pour les visiteurs externes)

o décanat (ses tâches, son organisation)

• Menu études
o formations proposées
o plans d'études et règlements
o horaire des cours
o examens
o portails des cours (claroline)
ou, séparer ce menu en deux menus :
• Menu offre de formation
o bachelor
o master
o etc.
et
• Menu espace étudiant
o portails des cours (claroline)
o horaire des cours
o documents à télécharger,

Charte graphique site web -1.0 – avril 2008 5

 o etc.

• Menu instituts et recherche (liste des instituts, laboratoires, groupes de recherche)

ou, séparer ce menu en deux menus : instituts et recherche

• Menu faculté pratique (en bas à gauche)

o secrétariat - aspects pratiques
o bibliothèque
o association d'étudiant
o emploi

1.5 Page d'accueil des instituts

Il s'agit d'une version graphique légèrement différente de celle de la page d’accueil des facultés dans le
sens où la taille de l'image est encore réduite, laissant la place pour une description assez générale de
l'institut ou d'un projet de recherche à mettre en évidence.

Le titre du site (dénomination officielle de l'institut) est repris sur tout le site. Il peut s'accompagner d'un
logo.

La partie centrale est composée d'une image (à gauche) dont la taille conseillée est de 200x200 pixels et
d'une colonne de texte libre. La partie de droite comprend les rubriques agenda et actualités en haut et des
liens en bas.

Pour la partie de gauche, les menus ci-dessous sont proposés. Les différences structurelles et
organisationnelles entre les instituts obligent une grande souplesse de modèle. Toutefois, tous ces thèmes
doivent être abordés.

• présentation de l’institut
• enseignants / collaborateurs
• formation
o présentation générale (lien avec les pages concernées du portail formation
http://www2.unine.ch/formation)
o présentation des cours
• recherche
• collaborations (intra et extra muros)
• publications
• institut pratique (en bas à gauche)

Charte graphique site web -1.0 – avril 2008 6

 o secrétariat

1.6 Page d'accueil des services

Le titre du site (dénomination officielle du service) est repris sur tout le site. Il peut s'accompagner d'un
logo.

La partie centrale accueille uniquement une image de 380x380 pixels et un texte sur 2 lignes en bas à
gauche de l'image. L'idée est d'utiliser une image centrale pour faire figurer à la fois le plan d'accès et la
photographie du bâtiment abritant le service. La partie de droite comprend les rubriques agenda et
actualités en haut et des liens en bas. La partie de gauche aborde les thèmes suivants: présentation du
service, prestations, missions et moyens.

1.7 Page de contenu

Trois modèles de page de contenu sont à choix. Ils diffèrent uniquement au niveau de la partie centrale, à
droite (en gris). Les parties en blanc ainsi que le titre du site sont toujours hérités de la page d'accueil du
site.

La partie du contenu (en gris) peut avoir 3 configurations différentes:

1 colonne (libre)
La partie contenu (gris) est constituée d'une seule colonne. Elle permet d'intégrer du texte ou des images.

Charte graphique site web -1.0 – avril 2008 7

2 colonnes (libre/libre) ou
2 colonnes (libre/menu)
La partie contenu (gris) est divisée en deux colonnes, celle de gauche étant la plus large. La colonne de
droite permet d'intégrer soit du texte et des images (2 colonnes (libre/libre)), soit une présentation qui
ressemble à un menu (2 colonnes (libre/menu)).

2. COULEURS

Conformément à l'histoire de l'institution, une couleur spécifique est attribuée à chaque faculté et à
l'administration. Seules les couleurs prévues dans la palette ci-dessous peuvent être utilisées.

2.1 Pages principales et administration

en-tête supérieur, menus principaux du site (en haut à gauche), menus

bleu #01209F1
secondaires de la page (en bas à droite), titres
violet #BCBEDF en-tête inférieur
gris-bleu #E4E5E7 menus secondaires du site (en bas à gauche), fond de cellules des tableaux
gris foncé #A5A6A9 menus principaux de la page (en haut à droite)

1
Mode de couleur RVB

Charte graphique site web -1.0 – avril 2008 8

2.2 Faculté des lettres et sciences humaines

en-tête supérieur, menus principaux du site (en haut à gauche), menus

cian #62ABCB
secondaires de la page (en bas à droite), titres
cian clair #C7DFEC en-tête inférieur
cian grisé #C0DBE9 menus secondaires du site (en bas à gauche), fond de cellules des tableaux
gris foncé #A5A6A9 menus principaux de la page (en haut à droite)

2.3 Faculté des sciences

en-tête supérieur, menus principaux du site (en haut à gauche), menus

vert #6AA798
secondaires de la page (en bas à droite), titres
vert clair #C9DDD7 en-tête inférieur
vert grisé #D7E5E1 menus secondaires du site (en bas à gauche), fond de cellules des tableaux
gris foncé #A5A6A9 menus principaux de la page (en haut à droite)

2.4 Faculté de droit

en-tête supérieur, menus principaux du site (en haut à gauche), menus

rouge #B70101
secondaires de la page (en bas à droite), titres
en-tête inférieur, menus secondaires du site (en bas à gauche), fond de
rose #FAAFAF
cellules des tableaux
gris foncé #A5A6A9 menus principaux de la page (en haut à droite)

2.5 Faculté des sciences économiques

en-tête supérieur, menus principaux du site (en haut à gauche), menus

jaune #EFAB00
secondaires de la page (en bas à droite), titres
jaune clair #F9DEA6 en-tête inférieur
jaune grisé #F9DA9A menus secondaires du site (en bas à gauche), fond de cellules des tableaux
gris foncé #A5A6A9 menus principaux de la page (en haut à droite)

2.6 Faculté de théologie

en-tête supérieur, menus principaux du site (en haut à gauche), menus

rouge #CE7686
secondaires de la page (en bas à droite), titres
rose #EBCCCF en-tête inférieur
rose grisé #E9C5C9 menus secondaires du site (en bas à gauche), fond de cellules des tableaux
gris foncé #A5A6A9 menus principaux de la page (en haut à droite)

3. TYPOGRAPHIE

3.1 Police d'écriture

La police de caractère du site est Helvetica (la famille de police est la suivante: "Helvetica, Verdana, Arial,
sans-serif"). La taille de caractère standard est de 11 pixels ; elle doit être la même sur tout le site.

Charte graphique site web -1.0 – avril 2008 9

3.2 Titres

Dans les pages, les titres sont en Helvetica avec la couleur prévue pour l’entité. La taille de caractère
(pixels) varie selon le niveau du titre :

• Niveau 1 : 17 pixels, gras

• Niveau 2 : 17 pixels
• Niveau 3 : 14 pixels, gras
• Niveau 4 : 14 pixels
• Niveau 5 : 11 pixels, gras
• Niveau 6 : 11 pixels

Les titres qui précèdent une liste de liens peuvent être mis en noir pour éviter une surcharge de couleur.

3.3 Majuscules-minuscules

Le titre du site, les titres principaux de chaque page et les menus de gauche doivent être en minuscules,
sauf lorsqu'il s'agit d'abréviations qui sont toujours en majuscules (exemple: FEN) ou de noms propres.

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 et diminue de taille au passage des niveaux suivants. A l'exception des pages d'accueil des
services où l'accent est mis sur les bâtiments et les sites universitaires, c'est l'être humain (étudiants,
chercheurs) qui domine 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. En revanche, les étudiants qui potassent ou qui écoutent le professeur
(auditoire), les images de fond et les images animées sont à éviter.

4.1 Dimensions d'images des pages d'accueil

• faculté: 380x380 pixels avec décrochage (voir photo page 5)

• service : 380x380 pixels avec décrochage (voir photo page 7)
• institut et autres sites: 200x200 pixels (taille conseillée)

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

Image Carrée
(dimension 170x170 px)

Charte graphique site web -1.0 – avril 2008 10

Image style Portrait
(dimension 170x355 px)

Image style Portrait

(dimension 110x350 px)

Image style Paysage

(dimension 355x170 px)

Charte graphique site web -1.0 – avril 2008 11

Image style Paysage
(dimension 350x110 px)

Charte graphique site web -1.0 – avril 2008 12