charte graphique web - portailweb.universita.corsica€¦ · charte graphique web università di...

01

CHARTE GRAPHIQUE WEBUniversità di CorsicaPortails et sites satellites

02

ÉLÉMENTS DE BASE.Typographies et couleurs

03 - ÉLÉMENTS DE BASE

TYPOGRAPHIES PRINCIPALES

La police MERLO-ROUND est exclusi-vement utilisée pour les titrages et de préférence en minuscule.

La police MERLO-ROUND peut-être uti-lisée en 3 graisses (Bold, Medium, Regu-lar). La version MEDIUM est privilégiée pour les titrages.

UTILISATION

— Titre H1

Merlo- Round Medium en 50px

— Titre H2 / Titre paragraphe

Merlo- Round Medium en 22px

— Titre H3 / Sous-titre paragraphe

Merlo- Round Medium en 20px

Merlo-Round

A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 > ? ! ., : @ & +

A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 > ? ! ., : @ & +

A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 > ? ! ., : @ & +

Merlo-Round

Merlo-Round

H1 - 50 PX

H2 - 22 PX

H3 - 20 PX

MERLO-ROUND BOLD

MERLO-ROUND MEDIUM

MERLO-ROUND REGULAR

04 - ÉLÉMENTS DE BASE

TYPOGRAPHIES PRINCIPALES

La police UBUNTU est principalement utilisée pour les textes.

Elle s’utilise généralement en minus-cule, dans sa version LIGHT.

A B C D E F G H I J K L M N O P Q R S T U VW X Y Za b c d e f g h i j k lm n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 > ? ! ., : @ & +

A B C D E F G H I J K L M N O P Q R S T U VW X Y Za b c d e f g h i j k lm n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 > ? ! ., : @ & +

A B C D E F G H I J K L M N O P Q R S T U VW X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 > ? ! ., : @ & +

UbuntuUbuntuP - 15 PX

UBUNTU BOLD

UBUNTU MEDIUM

UBUNTU LIGHT

UTILISATION

— Paragraphe

Ubuntu light en 15.5px

— Paragraphe mise en avant

Ubuntu light en 15.5px, #000000 et avec border-left #000000 de 1px

— Intertitre bloc colonne droite

Ubuntu Bold en 20px

UNIVERS CHROMATIQUEPORTAILS

L’univers chromatique des portails est constitué de 4 couleurs.

- BLEU : Portail Studià - VERT : Portail Ricerca - ORANGE CLAIR : Portail Partenaires pro - ORANGE FONCÉ : Portail Personnels

Chacune accompagnée par les couleurs NOIR et BLANC.

La couleur principale est utilisée pour mettre en avant les éléments impor-tants : textes, fonds et images. Elle est toujours utilisée pour les éléments de type « Call To action » (liens, etc.).

Le GRIS est utilisé pour le texte courant.

Les couleurs NOIR et BLANC sont utili-sées pour certaines éléments de fond : bloc ou bouton.

05 - ÉLÉMENTS DE BASEUNIVERS CHROMATIQUE - PORTAILS

PARTENAIRES PRO

C : 0M : 52J : 76N : 0

R : 252V : 146B : 68

HEX :

#FC9244

STUDIÀ

C : 76M : 12J : 22N : 0

R : 0V : 168B : 191

HEX :

#00A8BF

PERSONNELS

C : 0M : 81J : 94N : 0

R : 255V : 85B : 34

HEX :

#FF5522

NOIR

HEX :

#131313

RICERCA

C : 65M : 0J : 100N : 0

R : 85V : 204B : 32

HEX :

#55CC20

BLANC

HEX :

#FFFFFF

GRIS

HEX :

#777777

UNIVERS ICONOGRAPHIQUE

L’univers iconographique utilisé pour les sites portails est la font «AWESOME».

Les icônes peuvent être utilisées seules pour illustrer un texte ou en accompa-gnement d’un titrage.

Les icônes peuvent être soit en couleur soit en noir et blanc.

La taille des icônes est libre.

Pour avoir accès à la base d’icônes, se rapprocher du Service Communication.

06 - ÉLÉMENTS DE BASEUNIVERS ICONOGRAPHIQUE - PORTAILS ET SITES SATELLITES

07

STRUCTURESDES TEMPLATES.Page d’accueil et interne

08 - STRUCTURE DES TEMPLATES

STRUCTUREPAGE D’ACCUEIL PORTAILSET SITES SATELLITES

La structure de la page d’accueil des portails et sites satellites est constituée de 3 grandes parties : header, content et footer.

Les éléments de fond (couleur ou image) du header et du footer sont tou-jours positionnés en fullwidth.

Le contenu pur est toujours positionné dans une largeur maximale de 1120 px.

Le content peut contenir au maximum 3 colonnes, au minimum 1 colonne, chaque colonne de 360px est séparée par une gouttière de 20px.

La hauteur minimale des colonnes est de 150px, et maximum de 490px.

09 - STRUCTURE DES TEMPLATES

STRUCTUREDES MODULES

Des modules peuvent être intégrés à la page d’accueil des portails et des sites satellites ainsi qu’en pages intérieures des portails.

UTILISATION

— Titre module

Merlo-Round medium en 22,5px

— Sous-titre module

Merlo-Round medium en 15,5px

— Ligne de contexte

En couleur principale. Ubuntu regular en 14px, précédée d’une icône «angle-right»

— Ligne de contenu

Ubuntu Light en 14px

— Renvoi

Ubuntu Light en 11px, majuscules

— Spécificités module image

Titre en Merlo-Round medium en 15,5px

Au survol, filtre couleur principale opacité 0.8 avec icône « plus-circle »

010 - STRUCTURE DES TEMPLATES

STRUCTUREPAGE INTERNEPORTAILS

La structure des pages internes des portails est constituée de 4 grandes par-ties : header, content, sidebar et footer.

Les éléments de fond (couleur ou image) du header et du footer sont tou-jours positionnés en fullwidth.

Le contenu pur est toujours positionné dans une largeur maximale de 1120 px.

Le content peut contenir au maximum 1 colonne + une barre d’outils (impres-sion, partage, etc.) positionnée sur la gauche du content.

La sidebar est généralement position-née à droite du content.

011 - STRUCTURE DES TEMPLATES

STRUCTUREPAGE INTERNESITES SATELLITES

La structure des pages internes des sites satellites est constituée de 3 grandes parties : header, content et footer.

Les éléments de fond (couleur ou image) du header et du footer sont tou-jours positionnés en fullwidth.

Le contenu pur est toujours positionné dans une largeur maximale de 1120 px.

Le content peut contenir au maximum 1 colonne + une barre d’outils (impres-sion, partage, etc.) positionnée sur la gauche du content.

Il n’y a pas de sidebar sur les sites satel-lites.

012012

MODÈLESDE PAGES.Page d’accueil et interne

013 - MODÈLES DE PAGES

PAGE D’ACCUEILPORTAILS ET SITES SATELLITES

Modèle de page d’accueil pour les por-tails et les sites satellites.

PRÉCONISATION

— Bandeau image Taille optimale des images : 1600 x 590px.

014 - MODÈLES DE PAGES

PAGE TYPEPORTAILS

Modèle de page type pour les portails.

PRÉCONISATION

— Bandeau image Taille optimale des images : 1600 x 460px.

015 - MODÈLES DE PAGES

PAGE TYPESITES SATELLITES

Modèle de page type pour les sites satellites.

BESOIN D’UN RENSEIGNEMENT ?

Contactez-nous :Université de Corse

Service CommunicationPôle Presse et communication numérique

Camille RapolaniAssitante de communication

04 20 20 22 91rapolani_c@univ-corse.fr

Philippe RocchiResponsable du Pôle

04 95 45 06 49rocchi_p@univ-corse.fr

Charte créée par Corsica Web

SERVICE COMMUNICATIONUNIVERSITÀ DI CORSICA PASQUALE PAOLIcommunication@univ-corse.fr