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