MAX CASABAN
(webdesign)
Petite introduction
Max Casaban est un artiste humoriste qui joue son spectacle, « Prenez-moi homo ! », chaque semaine chaque dans un théâtre parisien.
Un spectacle grandement inspiré de sa vie, qui retrace à travers divers personnages et situations les difficultés rencontrées depuis la découverte de son homosexualité jusqu’à maintenant.
Le spectacle de Max est déjà bien rodé, et se joue depuis déjà deux ans. Il aimerait donc créer une identité visuelle.
Nous allons donc travailler sur une affiche (cliquez ici) mais aussi son site vitrine.
Le moodboard
Max ayant déjà réalisé un shooting de photos mises en scène au ton très marqué (photos en noir et blanc à fort contraste), je vais me baser sur cette série pour définir une planche d’inspirations.
Comme on peut le voir, ses photos m’ont tout de suite donné l’idée du gris métal, plutôt foncé et très masculin, pour contraster avec les mises en scène des images justement.
Ensuite, l’univers du théâtre est très inspirant. Ses couleurs rouges, ses sièges en velours, ses gros rideaux et ses planches m’ont inspiré une couleur pour les polices, le logo, et probablement des éléments du site.
Le logo
Commençons par créer un logo identifiable pour Max.
Pour son logo, j’ai imaginé qu’une belle typo serait suffisante. Elle permettrait aux spectateurs voyant son affiche de retenir plus facilement son nom.
Pour cela je vais utiliser un rouge carmin. Il est élégant, rappellera le velours des sièges de théâtre, et contrastera bien avec l’habillage de mon futur site.
Pour la typo, après plusieurs essais et concertations avec l’artiste, je suis parti sur « Voltaire ».
Cette font est à la fois classe, moderne (sans serif) et possède un petit côté rétro époque « art-déco » qui rappellera ces grandes lettres rouges que l’on peut parfois trouver sur la devanture des grandes salles de spectacle parisiennes.
Je vais utiliser la première lettre de Max Casaban comme sigle et comme favicon pour le site.
On ne laisse rien au hasard n’est-ce pas ?
Style board
Nous y voilà !
Nous avons maintenant tous les éléments qui vont nous permettre de créer une planche de style et ainsi de monter un site Internet.
Commençons par un code couleur. Sobre, classe. Le noir va rappeler le côté luxueux et précieux, mais aussi l’obscurité des salles de théâtre ; le rouge lui, va rappeler le velours des sièges ; le gris foncé métallisé évoquera le côté masculin ; et le blanc sera utilisé pour les lettrages.
Côté boutons, deux types de navigation : un menu avec une navigation horizontale et des rubriques qui passent du noir (ou du blanc) au rouge au survol.
Et des boutons plus conventionnels, rouges, qui passent au blanc avec contour au survol.
Côté typo, comme dit plus haut, « Voltaire » servira à mes titres, quelle que soit leur taille. « Arial » sera utilisée pour les textes car elle est simple, facile à lire et n’alourdira pas le design du site.
Zoning
C’est presque la fin ! Maintenant que j’ai tous les éléments pour créer un site vitrine (notamment un cahier des charges plus détaillé), j’en déduis un zoning des différentes rubriques sur la page d’accueil du site.
Nous aurons donc :
- un header principal comprenant le logo et le menu principal.
- un header secondaire composé d’une large image et d’un menu secondaire.
- un contenu principal composé de deux articles et d’un slider d’images.
- un footer proposant la possibilité de réserver ses places depuis n’importe quel endroit du site, et bien sûr les copyrights.
Sur tablette et mobile, la disposition sera la même, mais les images seront plus grandes.
Maquettes
Voici la maquette de mon site !
Avec les images et les couleurs, le site développe une véritable identité visuelle. Les couleurs sont peu nombreuses mais bien présentes, et les images de qualité rendent le site très professionel. Une véritable vitrine, comme l’était l’objectif principal de sa création.
Des « mock up » tablette et mobile (ici un iPad Pro et son iPen et le dernier iPhone X) et rendre mon ensemble plus vrai.
Mais, encore plus réaliste, ce serait d’aller voir le vrai site non ?
Alors cliquez ici : Max Casaban.fr !
Outil utilisé pour ce travail :
Photoshop