CHARTE GRAPHIQUE. Le Jardin de la Reine. Université Montpellier III Création de site web Becker Jerome

Transcription

1 CHARTE GRAPHIQUE Le Jardin de la Reine Université Montpellier III Création de site web Becker Jerome

2 Introduction Pour donner à l utilisateur des repères au sein du site, faciliter son utilisation, rendre son ergonomie et sa compréhension facile, et surtout donner une identité au Jardin de la Reine, il est impératif de développer une cohérence sur l ensemble des pages du site et sur les documents. En plus de l utilisation du site internet, l association doit pouvoir communiquer sur différents supports avec une même ligne graphique afin de pouvoir être facilement reconnaissable, et donc être identifiable et reconnu, mais aussi afin d afficher une communication unifié qui fédère autour d une même identité. C est pourquoi cette charte graphique a été créée. LE JARDIN DE LA REINE

3 Sommaire 01 Logotype Le Logo... 3 Espacement...4 Variations Polices Police de caractère Niveaux de titres Mise en page Couleurs Couleurs par défaut... 7 Variances de gris Documents La couleur... 9 Maquette web LE JARDIN DE LA REINE 1

4 Le logo 01 Logotype Le logo évoque ici l union du mot «Jardin» et «Reine» composant majoritairement le nom de l association «Jardin de la Reine». La partie du jardin est représenté par un groupement de feuilles, dont certaines étant des feuilles de figuier et d autres d acanthe. Ce groupement représenté de manière circulaire a pour but de montrer la sérénité que ces lieux dégagent, mais aussi de rappeler l éternel recommencement de la nature. Au milieu se trouve une couronne, faisant symboliquement penser à la «Reine», et donc au nom même du jardin. Ce logo est nommé logo_full.eps ou logo_full.png dans ce dossier. LOGO LARGE LE JARDIN DE LA REINE 3

5 Espacement Variations Les deux images suivantes montrent l espacement nécessaire autour du logo. Cette zone doit toujours rester vide de façon à ne pas laisser de texte (ou tout autre élément) s y introduire afin de garantir de la lisibilité au logo, mais aussi pour un aspect esthétique. La taille de cet espacement correspond à 9% de la taille du logo en hauteur. Le logo ne doit pas être déformé, orienté dans une autre direction, changer la taille des éléments ou coloré d une autre manière que les variations autorisés page suivante. Trois versions du logo existent. La version en couleur doit être privilégié et utilisé autant que possible. Elle peut être utilisée sur les fonds blancs et clairs, qui sont unis ou qui ont des contrastes faibles. Lorsque le fond est clair mais possède d importants contrastes, afin de faciliter l identification du logo et sa lisibilité, la version monochrome noir est privilégiée. Enfin lorsque le fond est foncé, ou lorsqu il s agit d une image, le logo monochrome blanc doit être utilisé. 9% 9% 9% 9% LOGO ICONE LOGO LARGE LOGO COULEUR LOGO NOIR LOGO BLANC 4 LE JARDIN DE LA REINE LE JARDIN DE LA REINE 5

6 Couleurs par défaut 02 Couleurs Une palette de 4 couleurs est définie pour cette charte graphique, en plus des teintes de gris. Elle est composé de deux verts, rappelant l univers des plantes présentent dans le jardin et de la végétation, mais aussi de deux teintes de marrons, un foncé et un clair qui se rapproche du beige, afin d adoucir et contraster les deux verts, mais aussi afin de rappeler la terre, source de minéraux pour les plantes, qui sont la «nature» même du jardin. Vert clair RGB 113, 183, 058 CMJN HEX #71B73A Marron RGB 094, 075, 038 CMJN HEX #5E4B26 Vert foncé RGB 009, 103, 047 CMJN HEX #09672F Beige RGB 255, 255, 204 CMJN HEX #FFFFCC VERTS MARRONS LE JARDIN DE LA REINE 7

7 Variances de gris La couleur La palette de gris est définie ici, elle est composé d un blanc, d un noir, ainsi que d un gris clair et foncé, pour les éléments moins importants ou qui doivent être moins remarqués que les autres. Les couleurs blanche et noir peuvent être également utilisés par-dessus certaines images si le rendu est suffisament lisible, si ce n est pas le cas le texte pourra être contenu dans un bloc rectangulaire (fond blanc) avec des marges de 1cm ou 60px minimum autour de la zone de texte. Noir RVB 000, 000, 000 CMJN HEX # Gris foncé RVB 102, 102, 102 CMJN HEX # Gris clair RVB 204, 204, 204 CMJN HEX #CCCCCC Blanc RVB 255, 255, 255 CMJN HEX #FFFFFF " There are infinite shadings of light and shadows and colors... it s an extraordinarily subtle language. Figuring out how to speak that language is a lifetime job. " Conrad Hall 8 LE JARDIN DE LA REINE LE JARDIN DE LA REINE 9

8 Police de caractère 03 Polices Graphiquement le «Jardin de la Reine» utilise deux polices distinctes. La première est QuickSand, qui permet une lecture facile sur un support numérique comme pour une impression. Elle est sans-sérif, ses caractères sont facilement lisibles et donnent un aspect moderne à la police. Elle sera surtout utilisée pour les textes/paragraphes et les éléments textuels de petite taille. Ensuite, et dans le but de créer un contraste, la police Freestyle Script est utilisée. Elle sert principalement pour les titres, les textes de grande taille, voir pour les informations importantes. Elle se veut légère et rappelle l esprit naturel à travers de délicates courbes. AaBbCc abcdefghijklmnopqrstuvwxyz AaBbCc abcdefghijklmnopqrstuvwxyz Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s. POLICE QUICKSAND Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s. POLICE FREESTYLE SCRIPT LE JARDIN DE LA REINE 11

9 Niveaux de titres Mise en page et alignement Les titres en police en caractère Freestyle Script peuvent être de taille 82pt ou 52pt pour les documents papiers ou tout autre support non-numérique. Pour une version web la taille peut aussi être de 60px. Pour les textes en police Quicksand, la taille sur le web (css) est de 12px, pour les documents prints ou numérique elle est de 12pt. On peut définir de petits titres en utilisant sur le web cette taille de 16px et un texte en majuscule. On ne doit pas souligner, mettre en gras ou italique un titre. Titre de niveau 1 TITRE COULEUR BLANC OU NOIR Par défaut, tout texte est justifié à gauche. On peut parfois centrer le texte lorsqu il s agit d une citation, d un texte court ou d une introduction. Par contre pour un titre le texte sera toujours aligné à gauche. On peut également centrer un texte lorsqu il s agit d une légende, dans ce cas précis il faudra aussi écrire le texte en majuscule, en italique et de couleur gris clair. Le fond de type pattern présent dans ce dossier peut être utilisé pour les fonds de pages, pour la création de bordures ou de blocs. Les éléments positionnés dessus doivent être compris dans un bloc rectangulaire blanc, si il s agit uniquement de texte il est possible de jouer avec un contour pour ce dernier. Le fichier est présent dans les ressources avec le nom pattern.png. Titre de niveau 2 Titre de niveau 3 PETIT TITRE Texte pour le web ou u document TITRE COULEUR VERT FONCÉ TITRE COULEUR VERT FONCÉ TITRE COULEUR NOIR, MARRON OU VERT FONCÉ CORPS DE TEXTE NOIR OU BLANC Pour une page web, les marges par défaut sont de 60px entre les bords de la page et son contenu, comme présent sur le fichier maquette_home.eps, alors que pour un document print, elles sont de 15mm. La gouttière est de 5mm. Il est autorisé pour du texte d utiliser le gras pour faire ressortir un mot important, l italique pour mentionner un élément ou un nom d auteur ou de souligner un élément lorsqu il s agit d un lien (URL, mail, etc). 60px MARGES 12 LE JARDIN DE LA REINE LE JARDIN DE LA REINE 13

10 Maquette web 04 Documents Une maquette du site web a été réalisée, comprenant bien évidemment les éléments de cette charte graphique, mais aussi la disposition des éléments, notamment pour les articles présents sur la charte graphique. Elle comprend également l affichage des sous-menus, header, footer, etc, répondant au cahier des charges présenté lors de la commande. Un aperçu est disponible ci-contre, pour plus de détails et un meilleur affichage je vous invite à consulter le fichier maquette_home.eps LE JARDIN DE LA REINE 15

11 Le mot de la fin Afin de conserver l esprit du Jardin de la Reine, et tout en souhaitant lui donner un «nouvel élan», les choix graphiques présentés se sont fait dans l idée de concilier le thème «nature» et la modernité. Le choix des couleurs garde le classicime des communications liés aux thèmes de l environnement/nature/écologique, afin que l on puisse rapidement faire le lien avec la nature, mais aussi avec de la modernité grâce à un logo et des éléments de style material/flat design, ainsi qu un pattern floral/feuilli reprenant les dernières tendances graphiques. La réalisation du site s est voulu simple, composée de 4 blocs distincts sur la homepage afin de pouvoir facilement identifier 4 catégories ; celle des articles, celle de présentation et CTA, celle du dernier article en entier, et celle concernant l intendance. Le but étant de proposer un site dynamique, facile à lire, et bien sur agréable à l œil. 16 LE JARDIN DE LA REINE

12 Le Jardin de la Reine