CHARTE GRAPHIQUE WEB - portailweb.universita.corsica€¦ · CHARTE GRAPHIQUE WEB Università di...
16
01 CHARTE GRAPHIQUE WEB Università di Corsica Portails et sites satellites
Transcript of 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 [email protected]
Philippe RocchiResponsable du Pôle
04 95 45 06 [email protected]
Charte créée par Corsica Web
SERVICE COMMUNICATIONUNIVERSITÀ DI CORSICA PASQUALE [email protected]
