CHARTE GRAPHIQUE 2TIWA2

Transcription

1 CHARTE GRAPHIQUE PLACEBO Brian. Molko Miu Jennifer 2TIWA2 1

2 Sommaire I. Univers Graphique Introduction II. Famille Chromatique Nuance dominante Justification III. Typographie Menu Titre - Légende Contenu Justification IV. Eléments graphiques V. Structure des gabarits P. 3 P. 4 P. 5 P. 6 P. 7 P. 8 P. 9 P. 10 P. 11 2

3 I. Univers Graphique Introduction Né d un père américain d origines franco-italiennes, et d une mère écossaise, Brian Molko voit le jour le 10 décembre 1972, à Bruxelles, en Belgique. Petit dernier d une famille de trois garçons, il suit son père, grand banquier évoluant dans le domaine des finances internationales. C est ainsi qu il réside durant les trois premières années de sa vie au Liban puis au Libéria, avant d emménager définitivement au Luxembourg, terre où les grosses boîtes américaines envoient leurs meilleurs employés. Le site doit à la fois véhiculer l image du groupe Placebo, c est à dire un groupe entre power pop et rock alternatif avec une très forte personnalité. Ce site est avant tout informatif, destiné au fan du chanteur. Le public doit pouvoir naviguer sur le site de manière très claire. 3

4 II. Famille Chromatique Nuance dominante Blanc Gris clair Gris foncé Bordeaux Noir #FFFFFF #CCCCCC # #CC1233 #

5 II. Famille Chromatique Justification: Choix Chromatique Toutes les couleurs sont utilisées en aplat pour éviter le surchargement du site. Chaque couleur est présente pour créer un contraste. Blanc : Utilisé en arrière plan pour donner un effet de simplicité, sobriété. Gris clair : Utilisé pour l arrière plan du texte, pour donner un léger contraste avec le blanc et rester dans l esprit classe. Gris foncé : Utilisé dans les effets graphiques pour que ça soit à la fois discret et visible sur l arrière plan gris clair. Bordeaux : Utilisé pour la typographie ainsi que pour certains éléments graphiques. Pour donner un peu d énergie, de gaieté au site. Assure un contraste. Noir : Utilisé pour la typographie, pour faciliter la lecture. Le noir est fort visible et permet d avoir un fort contraste. 5

6 III. Typographie Menu Verdana Bold 24 px Arial Black Regular 12 px Verdana Regular 12 px Verdana Bold 12 px Verdana Bold 36 px T 125 % Arial Black Regular 9 px 200 px 6

7 III. Typographie Titre Verdana Bold 24 px centré Souligné Contour épaisseur 2px Légende Verdana Regular 7 px centré 7

8 III. Typographie Contenu Contenu Verdana Regular 12 px ,5 Justifié avec la derniere ligne aligné à gauche Accroche Verdana Regular 12 px Lettrine Verdana Regular 48px lignes 8

9 III. Typographie Justification: Choix typographique Le choix typographique s est porté sur la Verdana, elle doit être utilisée pour le texte courant, elle peut être utilisée dans ses différentes graisses. Verdana est une police sans serif conçue pour la lecture à l écran, c est pour cela que j ai choisi de l utiliser. Chaque paragraphe est également constitué de lettrines facilitant la lecture. La typographie du menu qui est sélectionné se colore en bordeaux. Tout le reste du menu est coloré en noir. La premiére lettre de Brian et de Molko est colorée en bordeaux. Extrait typographique Verdana: Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 9

10 IV. Eléments graphiques Les éléments graphiques présent sur ce site ne seront utilisés seulement pour encadrer du texte. Un élément sera toujours composé de deux barres rouges collées ensembles et de deux barres grises plus éloignées les unes des autres. L élément sera disposé à 9 px du texte. Il bordera en somme le texte. Les barres pourront varier de taille suivant la longueur du texte et de l effet recherché. L élément graphique, constitué de 4 lignes de couleur noir, devra toujours être perpendiculaire au bord de la page. Donc disposé verticalement sur les bords hauts et bas et horizontalement sur les bords droits et gauches. :: Deux petits points en double. Police Verdana 12. Utilisé comme puce pour mettre devant le menu. 10

11 PLACEBO Brian. Molko V. Structure des gabarits 8.5 px 19 px 52.5 px 1024 px 800 px 113 px 900 px 8.5 px 323 px 24 px 83 px 83 px 42.5 px 38 px 16.5 px 37 px 43 px 80 px 40 px 9 px 9 px 9 px 37 px 64 px 41 px 11

12 PLACEBO Brian. Molko V. Structure des gabarits 9 px 43 px 40 px 41 px 41 px 57 px 12

13 PLACEBO Brian. Molko V. Structure des gabarits 9 px 13

14 PLACEBO Brian. Molko V. Structure des gabarits 27 px 27 px 20 px 30 px 14

15 PLACEBO Brian. Molko V. Structure des gabarits 20 px 30 px 44 px 11.5 px 15