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.