Charte graphique Pelmont Jeffrey
Transcription
Charte graphique Pelmont Jeffrey
PELMONT Jeffrey Charte graphique Site web Portfolio Année 2009/2010 Iut de Bobigny Paris13 Charte Graphique TABLE DES MATIÈRES Introduction .............................................................................................................................. ................................ .............................. 3 1. Le site ................................................................................................................................ ................................ ................................. 4 1.1 Structure................................................................................................ ................................ ....................................................... 4 1.2 Les couleurs ................................................................................................ ................................ ................................................. 5 1.3 Organisation des pages ................................................................................................ ................................ 6 2. Le logo ................................................................................................................................ ................................ ................................ 7 3. Les typographies ................................................................................................ ................................ ............................................... 9 3.1 Kunstler Script ................................................................................................ ................................ ............................................. 9 3.2 Trebuchet MS ................................................................................................ ................................ .............................................. 9 4. L’harmonie des couleurs ................................................................................................ ................................ 10 5. Les éléments graphiques................................................................................................ ................................. 12 2 Charte Graphique Introduction Un portfolio est un espace (Internet) où une personne peut divulguer toutes les connaissances (linguistiques), ou qu’il ait pus apprendre à l’école ainsi que ses expériences culturelles et professionnelles. De ce fait, le portfolio doit contenir un ensemble de travaux répertoriés dans des rubriques bien détaillés qui lui permettront d’être plus ou moins évalué sur ces compétences dans le cadre scolaire. Etant donné que le portfolio constitue un rassemblement de travaux qui atteste des performances atteintes de l’élève pour une évaluation son apprentissage, le portfolio devra contenir une charte graphique et une bonne bonne ergonomie pour la navigation de manière à ce que l’ensemble dégage quelque chose d’harmonieux. Ma charte graphique ce décompose donc en 5 parties : • • • • • Le site Le logotype La typographie L’harmonie des couleurs Les éléments graphiques 3 Charte Graphique 1. Le site 1.1 Structure 1 2 3 4 1) Le bandeau affichera mon menu principale, il sera accessible dans toute les pages. 2) Ici, il y aura mon second menu qui changera en fonction des rubriques choisies dans le bandeau. 3) Dans ma troisième zone appelée aussi corps, il y aura tout le contenue. 4) Mon pied de page qui comportera donc mon copyright, un lien « contact » pour éventuellement prendre mes coordonnées, un lien « admin » pour que l’on puisse identifier l’internaute, un lien pour Firefox car car notre site sera optimisé pour ce moteur de recherche et enfin les dimensions de la page. 4 Charte Graphique 1.2 Les couleurs Mon site dégagera principalement du gris, plus précisément un dégradé du gris vers le noir : Gris : #b1b1b1. Noir : #000000. Et un dégradé de gris plus foncé vers le noir pour le fond derrière : Gris :# 323232. Noir :#000000. Avec les rubriques, des couleurs s’ajouterons dans l’arrière plan, il y aura : Jaune :#fdfb32. Rouge :#fe0202. Vert :#32fdb3. 5 Charte Graphique Bleu :#0307a0. Violet :#fc24a8. La couleur du texte : Blanc :#ffffff. 1.3 Organisation des pages Comme nous l’avons dit précédemment, le bandeau comportera les menus principaux. Ils se composeront de : Multimédia, Infographie, Audio-visuel, Audio Liens et A propos. *Multimédia : arrivé à la page multimédia, le sous menu affichera les rubriques : -JavaScript -PHP Site internet (site déjà réalisé par moi-même) moi -Site *Infographie : -Photoshop Photoshop & Illustrator -Infographie 3D *Audio-visuel : -Vidéo *Liens : -Agence -Etudiant src 6 Charte Graphique *A propos : -communication communication (ma charte graphique et explication du cadre de l’iut, et de mon agence) -informations sur moi -mes autres projets A noter, mon site comportera sur toutes ses pages, au dessus du bandeau, un u accès anglais français pour les personnes bilingues ou anglophones : 2. Le logo W de Wonder en or massif utilisation de 3 dégradés : 7 Charte Graphique Jaune :#fee44f Jaune :# e4c14f Blanc :# fdfbf8 En noir et blanc. Mon logo représente nte le W qui est la première lettre de mon pseudonyme Wonder, il sera en animation flash, ash, positionné en haut à gauche pour montrer ma signature, son ambiance dorée montre que (pour ma part) ce site à de la valeur car il représente toutes les compétences que j’ai pus acquérir durant mes trois dernières 3 années. Bien sure, la métaphore de l’or, en l’occurrence ici est la valeur de mon savoir, de mes travaux et de mes compétences à l’image de l’or qui scintille (mon « W » scintillera tel de l’or). 8 Charte Graphique 3. Les typographies 3.1 Kunstler unstler Script La police de caractère utilisé ici est Kunstler Script,, c’est une police de cuivre au fond très artistique qui est plutôt utilisé pour des invitations ou des annonces mais aussi utilisé dans le domaine scolaire. C’est une typographie allemande qui se traduit littéralement en anglais par « écriture des artistes », elle a été inspirée par le XVIIIème siècle notamment par un style d’écriture dite « ronde ». C’est la typographie qui est utilisée pour mes grandes rubriques et sous menus car comme je vous l’ai mentionné ci-dessus, ci dessus, c’est une police utilisée pour les invitations, j’invite donc le navigateur à parcourir mes travaux. 3.2 Trebuchet MS 9 Charte Graphique Trebushet MS est une typographie conçue par Vincent Connare de chez Microsoft, c’est une typo qui est à la base destinée pour les longs textes avec ses formes étroitement géométriques et cette forme humaniste qui se dégage de la police, elle est clairement adaptée pour les écrans et c’est pourquoi il s’est avéré rapidement rapidement être de nos jours une typo classique pour la conception de page web. C’est donc cette typographie que j’ai utilisé pour le contenu de mes textes car elle correspond trait pour trait à des contenus du web. 4. L’harmonie des couleurs 10 Charte Graphique La couleur ouleur qui domine mon portfolio est le gris car le gris représente dans un premier temps le calme et un aspect assez terne, j’ai donc choisit le gris car c’est une couleur qui me ressemble ou me définit le mieux. Ensuite suivant les rubriques, des couleurs couleur apparaitrons, car chaque rubrique correspondra à une couleur via un rollover, c’est une sorte de représentation d’un monde gris dans lequel on ajoute un peu de couleur (de diversité, joie et d’épanouissement) : Le multimédia en jaune : Multimédia, symbole de richesse sans propre, elle représente le cœur de notre formation et représente ce que certaines personnes appellent le talent. L’infographie en rouge : Le point commun entre la couleur et l’infographie est très profond, il s’agit de la créativité, ité, tout graphiste qui se voit concevoir un travail doit forcement exploiter cette 11 Charte Graphique perspective qu’est la créativité, c’est pour cela que cette couleur vient naturellement s’ajouter (se superposer je dirais) à cette rubrique. L’audio-visuel en vert : L’audio-visuel visuel est une rubrique qui comportera des vidéos principalement, c’est un aspect apaisant pour ma part, c’est pour sa que le vert ressortira sur ce lien. Les liens en bleu : Symbole de calme de loyauté et de sérénité, le bleu vient se marier avec ma rubrique « liens » pour montrer à l’internaute, d’autre personne de l’iut ayant effectué la même formation que moi: DUT service et réseaux de communication ainsi que le lien de mon agence : IT Agency. Et une rubrique à propos en violet: A propos, cette te rubrique informera un peu plus l’internaute sur ma propre personne en ce qui concerne mes autres travaux (projet personnel, hors scolaire) et également mes coordonnées pour un éventuel entretient si il reste intéressé par mes compétences, sur ce contextee le violet viens ajouter à cette rubrique en terme de courtoisie et de modestie avec tout le respect que je peux devoir aux autres personnes. La typographie utilisée pour ces menus est bien entendu Kunstler Script. t. 5. Les éléments graphiques 12 Charte Graphique Tout d’abord, l’image de fond que j’ai travaillé sous Photoshop : Tout part d’un dégradé centrale radial du gris clair au noir. Ensuite j’ai ajouté le petit aspect nature, les fleurs, les herbes qui se marient avec le fond dégradé gris/noir. Et enfin je rajoute l’élément qui me passionne tant par-dessus par tout : les étoiles. Voici ce pourquoi mon site s’appelle « under stars » car notre vue est plongée sous ces étoile. 13 Charte Graphique Mon portfolio contiendra donc quelques scripts pour améliorer son ergonomie et son esthétique. 14