Mise en situation
On possède tous une star préférée ou que l’on déteste au plus au point, que ce soit sur Twitch, YouTube ou sur n’importe quel réseau social.
Comme tout premier site, il m’a été demandé d’en réaliser un comportant trois pages bien différentes.
Une page qui fait la promotion de l’influenceur et qui respecte l’ambiance graphique de sa chaîne (mêmes couleurs, design, etc).
Une page critique qui dévoile la face cachée de l’influenceur. Je devais également trouver une direction artistique totalement différente de la page promotionnelle.
Une page factuelle reprenant toutes les statistiques importantes de l’influenceur.
Phase de recherches
Le choix de l’influenceur... L’Étoile verte du streaming, ZeratoR !
Commençait alors le premier obstacle de ce travail : choisir qui je voulais représenter. Après une longue réflexion, mon choix s’est porté vers le streamer ZeratoR.
Pourquoi lui ? Tout simplement parce que c’est un streamer que j’apprécie beaucoup et assez expérimenté pour trouver des critiques à son sujet.
Suite à ce choix, j’ai cherché toutes les informations nécessaires sur ZeratoR afin de rédiger tout le contenu de chaque page.
Création du design
Savoir jouer avec l’univers de l’influenceur et trouver son opposé. Création d’une direction artistique totalement différente.
Pour la page promotionnelle, j’ai donc repris les couleurs emblématiques de ZeratoR : le vert et le noir. Sur sa chaîne Twitch, il joue beaucoup avec des bandes de couleur verte. J’ai donc décidé de reprendre cette idée sur cette page.
Pour la page critique, je me suis inspiré de la direction artistique de ses principaux concurrents : Webedia. Leur site joue sur le blanc et le bleu (clair et foncé), je suis donc parti sur cet assemblage de couleurs.
Pour la page factuelle, j’ai simplement repris le thème de la page promotionnelle.
Développement du site
Une fois le design créé, il faut lui donner vie. Place à la création de mon premier site web !
Pour la création du site, je m’y suis pris en trois étapes précises.
Premièrement, j’ai commencé par créer l’HTML des trois pages, en appliquant la méthode BEM pour chaque class.
Ensuite, je me suis concentré sur la partie CSS du site. Notre site devant être responsive, j’ai évidemment commencé en mobile first puis ai développé la version tablette et desktop ensuite.
Pour finir, j’ai ajouté quelques animations en JS à quelques parties du site.
Autres projets
Envie de découvrir mes autres projets ? Cliquez sur les cartes afin de voir ce qu’elles renferment.
Data Clash
2025
Clash entre différents artistes
Log Pose
2025
Chasse au trésor pour le One Piece