GUIDE D UTILISATION DIGITALE DE LA CHARTE GRAPHIQUE

GUIDE D UTILISATION DIGITALE DE LA CHARTE GRAPHIQUE

Sommaire Introduction page 03 Le principe page 05 1 Les couleurs page 05 2 La police page 05 3 La tétière page 05 4 La grille page 05 5 Le bas de page page 05 Exemple page 05 Affichage sur périphériques mobiles page 05 L etampille «Site Partenaire» page 05 2

introduction Depuis le début de l année 2014 la toute première charte graphique de l Agence Universitaire de la Francophonie est déployée sur l ensemble les documents de communication internes et externes. Cette charte graphique met en valeur l AUF et en facilite sa reconnaissance. Dans cet effort de mise en cohésion visuelle de tous les supports de communication, les sites internet ont un rôle clé à jouer. Ils doivent véhiculer ce nouveau territoire graphique et en faciliter l appropriation par l ensembles des acteurs de l Agence. C est peut-être également l occasion de revoir l organisation de l information de certains sites, d améliorer l ergonomie et l expérience utilisateur, et de satisfaire les nouvelles habitudes la navigation, sur périphériques mobiles notemment. Pour vous aider à concevoir vos sites internet, les pages suivantes décrivent une série de règles graphiques, qu il vous est demandé de respecter scrupuleusement. Pour chaque nouvelle application, à la moindre interrogation concernant l un des principes exposés ci-après, n hésitez pas à consulter la Service de la Communication. Nous vous aiderons à respecter au mieux l esprit de cette charte graphique. +33 (0)1 44 41 18 41 +33 (0)1 44 41 42 98 3

Le principe La charte digitale est basée sur la combinaison systématique de 5 éléments indissociables : 1 Un ensemble de couleurs 2 Une typographie 3 Une têtière 4 Un grille 5 Un bas de page 4

01 Les 6 couleurs principales BORDEAUX R170 V10 B47 # AA0A2F JAUNE R255 V213 B0 # FFD500 VERT R141 V190 B35 # 8DBE23 ROUGE R229 V39 B39 # E52727 VIOLET R112 V34 B131 # 702283 BLEU R29 V157 B217 # 1D9DD9 + 3 nuances de gris GRIS 1 R28 V28 B28 # 1C1C1C GRIS 2 R170 V170 B170 # AAAAAA GRIS 3 R229 V39 B39 # E5E5E5 Au besoin il est possible de créer d autres nuances de gris parfaitement neutres. Leur combinaison RVB doit être composée de 3 valeurs identiques. Exemple : R50 V50 B50 5

01 Les couleurs complémentaires pour les 10 bureaux régionaux BA R52 V172 B147 # 34AB92 BACGL R248 V172 B0 # F7AB00 BAO R101 V179 B46 # 65B22E BAP R114 V140 B175 # 9F72AE BC R96 V29 B82 # 601D52 BECO R131 V208 B245 # 73D0F5 BEO R234 V86 B13 # EA560D BM R180 V155 B90 # B49B5A BMO R56 V125 B192 # 387DC0 BOI R238 V121 B173 # EE79AD Les 10 couleurs complémentaires sont uniquement utilisées lors de la création d un site ou d une page dédié(e) à l information d un seul bureau. 2 couleurs complémentaires ne peuvent donc, dans aucun cas, cohabiter. 6

02 La Police L utilisation exclusive de la police libre OPEN SANS est indispensable à la cohésion graphique de l ensemble des réalisations. Vous pouvez télécharger cette police sur http://opensans.com ou la charger depuis https://www.google.com/fonts#useplace:use/ La police OPEN SANS, créée par Steve Matteson, est publiée sous licence Apache 2.0 OPEN SANS OPEN LIGHT ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéè^éfghijklmnopqrstuvwxyz 1234567890:,;/!?«@$ OPEN SEMIBOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéè^éfghijklmnopqrstuvwxyz 1234567890:,;/!?«@$ OPEN LIGHT ITALIC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéè^éfghijklmnopqrstuvwxyz 1234567890:,;/!?«@$ OPEN SEMIBOLD ITALIC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéè^éfghijklmnopqrstuvwxyz 1234567890:,;/!?«@$ OPEN REGULAR ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéè^éfghijklmnopqrstuvwxyz 1234567890:,;/!?«@$ OPEN BOLD ITALIC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéè^éfghijklmnopqrstuvwxyz 1234567890:,;/!?«@$ OPEN ITALIC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéè^éfghijklmnopqrstuvwxyz 1234567890:,;/!?«@$ OPEN BOLD ITALIC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéè^éfghijklmnopqrstuvwxyz 1234567890:,;/!?«@$ En cas d absolue impossibilité d utilisation d une police Webkit ou de son chargement via Google Font, la police peut être substituée par la police Arial. 7

03 La têtière L ensemble créé par le logo de l agence, la bayadère 5 couleurs et le sigle AUF sont indissociables et leur positions sont fixes. Un espace de 15px doit être reservé entre le haut du site et le bord supérieur du navigateur. La taille de la police est à adapter en fonction du titre. Arrière-Plan # E5E5E5 Le fond de la tétière est blanc. L angle et la hauteur de cette tétière peuvent être modifiés librement. L angle créé ne doit jamais être égal à 90. 8

03 La têtière Menus Un site réussi est un site que l on consulte de manière intuitive. L architecture de l information, l accessibilité au contenu et la simplicité de la navigation sont des notions essentielles pour concevoir une interface ou un service digital «orienté utilisateur». En choisissant de positionner l utilisateur au centre de la conception vous faites le choix d une information logiquement hiéarchisée. Dans la mesure du possible, regroupez vos contenus par grands thèmes et interdisezvous de créer un menu sur 2 lignes. Évitez au maximum les sous-parties et encore moins des sous-sous-parties. 9

03 Sous la têtière : Le premier niveau d affichage Nous vous recommandons de privilégier le premier niveau d affichage pour un diaporama, une grande image ou un fil d actualités sur toute la largeur. Premier niveau d affichage 10

04 La Grille / 12 colonnes Une grille en 12 colonnes est utilisée. Elle représente l armature générale sur laquelle s organise l ensemble de vos contenus de pages web. colonne 70 px gouttière 30 px 1 2 3 4 5 6 7 8 9 10 11 12 15 px 1170 px 1200 px Un espace de sécurité pour la lecture est conservé entre vos contenus et les bords de votre page. il est égal à la moitié d une gouttière : 15px pour une gouttière de 30 px 11

04 La Grille / jeu de construction La construction est alors logiquement influencée par cette pratique favorisant ainsi sérieusement votre intégration CSS en la rendant plus rapide. 2 2 2 2 2 2 5 4 3 3 9 3 12

04 Le bas de page Le Bas de page termine l ensemble des pages d un site, il peut être utiliser pour intégrer des liens. 13

Exemple 14

Affichage sur périphériques mobiles Sur mobile la construction des pages est allignée sur une grille à 6 colonnes. Pour une bonne lisibilité du logo, la têtière est simplifiée, le sigle disparait. 15

L estampille «Site Partenaire» Les sites partenaires abordent une estampille composée de la bayadère ainsi que d une phrase : site partenaire, hébergé par l Agence Universitaire de la Francophonie. Cet ensemble est placé en haut des site. La bayadère + la bande blanche sont égales à 100% de la largeur du navigateur. 16

Merci.