Upload
gregory-dubois
View
222
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Charte graphique d'un site conçu pour les Beastie Boys...
Citation preview
1Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Sommaire 1
Introduction 2 From New York 2
Conclusion 3
Interface 4 Structure 4
Navigation 4
Esthétique 5
Gabarits 6 Page d’accueil 7
Autres pages 8
Couleurs 9 Choix 9
Complémentaires 9
Dégradés 10
Valeurs 11
Typographies 12 Haettenschweiler 12
Verdana 12
Images 13
Sommaire
2Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Introduction
From New YorkLe groupe des Beastie Boys, originaire de New York, a vu le jour dans les années 80. Il est composé de trois principaux membres :
Mike D (Michael Diamond), MCA (Adam Yauch) et Ad-Rock (Adam Horovitz).
A leurs débuts le groupe faisait du Hardcore punk, mais ils se sont assez vite rapprochés du Hip-Hop. Cette tendance fut d’ailleurs confirmée dès leur premier album « Licensed To Ill », en 1986, qui est aussi le premier album Hip-Hop à
devenir numéro 1 des ventes aux États-Unis.
Le plaisir qu’on a à suivre ce groupe vient du fait qu’il est en marge de ce qu’on à l’habitude de voir dans le Hip-Hop et dans la musique en général. Les Beastie Boys forment un groupe original et décalé. Sans donner l’impression de se prendre la tête ou de bosser comme des dingues, ils sortent des tubes mondiaux, grâce à leur talent, leur grand sens du rythme et de la dérision. Ils ont toujours réussi à accorder leurs diverses influences musicales à un flow hallucinant.
3Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Introduction
En outre, il suffit de jeter un coup d’oeil à leurs clips pour comprendre à quel point ils sont également efficaces dans leurs mises en scène. On les voit prendre un malin plaisir à se déguiser en divers personnages de société pour les démystifier (pur rockeur, avocat véreux, scientifique fou, …).
Ils ont l’air de grands enfants qui s’amusent, dénonçant de choses, mais sans chercher à entrer en conflit avec qui que se soit. Des grands enfants évoluant dans un monde de dingues !
Ce groupe décalés et talentueux, déjà historique, a inspiré de nombreux MC’s (rappeurs) contemporains. Ils sont également de véritables précurseurs du rap blanc aux USA et ce avant Eminem.
Les Beastie Boys font partie des plus grands aux USA et dans le monde. C’est un groupe légendaire qui ne laisse personne indifférent.
ConclusionIl fallait penser à concevoir un site graphiquement à la hauteur, qui resterait souple au niveau de la structure. Mais également à concevoir une navigation efficace et très accessible au plus grand nombre, vu la quantité d’informations disponibles sur le groupe et l’importance de leur public.
4Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Interface
StructureJ’ai voulu concevoir un site simple et sobre, avec une structure claire illustrée par un code couleur. Un site dans lequel il est facile de se promener... Il se divise en trois parties principales :
- News en jaune : pour tous ceux qui veulent savoir où le groupe va passer, les actions qu’ils soutiennent, leurs apparitions dans les médias (infos officielles, événements, tournées).
- Discographie en bleu : pour ceux qui veulent découvrir l’oeuvre du groupe, l’historique, par le biais de textes, images, mp3, vidéos en streaming (discographie, biographie, vidéos, mp3).
- Blog en rouge : pour les fans, les proches, qui cherchent un contact plus suivi avec le groupe (infos officieuses et délires du groupe)...
NavigationLe système de navigation est facile à identifier sur chaque page. Il se situe sur les bandeaux colorés, au niveau des titres et utilise, en outre, un menu vertical classique. Ce système, permet donc de surfer sans chipoter... Ce qui rend les différentes informations très accessibles à un large public en quelques clics : de la personne qui découvre les Beastie Boys, aux fans les plus convaincus qui cherchent à mieux connaître leur groupe fétiche.
Les Beastie Boys, au delà de leur musique, marquent par leurs clips et leurs concerts. La plupart des gens ne demande qu’à voir et revoir leurs shows délirants. C’est pourquoi il est prévu qu’ils puissent le faire également au sein de ce site via des liens ouvrant une fenêtre pop-up, dans laquelle seront diffusées diverses vidéos en streaming (dans la partie bleue).
5Charte graphique
EsthétiquePour l’esthétique globale, je me suis inspiré de l’univers visuel qu’ils renvoient à travers leurs clips, en esquissant quelques unes de leurs mises en scène sous forme d’ombres chinoises aux couleurs des bandeaux...
Ceci dans le but de mettre en évidence leur coté « simple, sympas et efficace » !
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Interface
6Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Gabarits
Les mesures affichées sont exprimées en pixel (l’unité de référence en Web).
Elles permettent d’établir des rapports de positionnement et de surface entre les différents éléments qui composent les pages du site.
Ces mesures sont fixes et correspondent sur chaque page… Les « mesures élastiques » par contre sont exprimées comme ceci : « él. »
Page d’accueil Autres pages
7Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Gabarits
Page d’accueil
8Charte graphique
Autres pagesSommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Gabarits
9Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
ChoixLe choix des couleurs à été réalisé sur base du clip « Alive » que le groupe a réalisé en 1999. Dans lequel chaque membre est déguisé avec un habit d’une couleur unie saturée (jaune, bleu, rouge). Après avoir choisi ces couleurs, le choix s’est porté sur un fond très sombre permettant à chaque couleur de s’exprimer au mieux sans être dénaturée. Ainsi on évite également un effet « Shupa Shups » écoeurant, qu’aurait sans doute donné un mélange de couleurs vives.
ComplémentairesA chaque page, j’ai également joué avec une deuxième couleur au niveau des titres qui n’est autre qu’une couleur complémentaire à celle des bandeaux de la page. Cela crée un contraste dans le but d’attirer l’attention sur certains titres, sans pour autant déranger l’oeil du visiteur.
Couleurs
10Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
DégradésLes couleurs utilisées sur les bandeaux sont traitées avec un double dégradé :
Un dégradé d’estompage linéaire, qui permet de passer de la couleur à la transparence pour faire disparaître par endroit les bandeaux en douceur.
Un dégradé lumineux circulaire en voile blanc, qui crée un effet d’éclairage sur les bandeaux.
En couleur de fond des blocs de contenu j’utilise un dégradé circulaire passant d’un gris/brun au noir.
Couleurs
11Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
ValeursLes valeurs des couleurs de base (hors dégradés) sont celles qui suivent...
Bleu : #0545cd
Jaune : #ffde01 Rouge : #be0702
Utilisé pour le dégradé en fond de contenu (avec images en filigrane)...
Gris/brun : #38302b
Couleurs
12Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Typographies
HaettenschweilerLes gros titres. Pour le nom du site « Beastie Boys », j’ai légèrement déformé la police en rapprochant les lettres, et en les élargissant un peu.
Nom du site : 68pt, appr. -35, largeur 148%.Rubriques : 39pt, blanc au survol (sur le bandeau).
VerdanaUtilisée pour les menus latéraux et les contenus dans un but de sobriété, lisibilité et compatibilité.
Titres : 16pt, Bold.Textes : 12pt, Regular, interl. 19pt., #a0a0a0Menus : 13pt, Bold & Regular, interligne 19pt., #ffffff & autres (cf. Couleurs).
13Charte graphique
Sommaire
Introduction
Interface
Gabarits
Couleurs
Typographies
Images
Images
Les images à vocation informative apparaissent au sein du contenu. Elles respectent les mêmes marges que le texte et sont délimitées par un contour gris/brun de 1pixel (#38302b).
D’autres images sont utilisées en fond de contenu mélangées au dégradé gris/brun. Celles-ci apparaissent en filigrane et servent de background (Opacité de 2 à 5%).
Elles ont pour but d’augmenter davantage l’identification des rubriques, sous-rubriques et ne doivent pas perturber la lisibilité des textes.