Project Lockdown
Site vitrine
Mettre en avant un savoir-faire communautaire digne des studios professionnels.
Présentation & demande initiale
Project Lockdown est l’œuvre d’un collectif français passionné par Counter-Strike. Le site devait mettre en valeur deux créations : une cinématique en 3D, en hommage à la franchise, et une collection de skins imaginée pour une opération fictive de Counter-Strike 2.
Au-delà de l’hommage, les créateurs espèrent voir leur travail rejoindre l’écosystème officiel du jeu. À sa sortie, le projet a d’ailleurs été relayé par la presse spécialisée.
L’univers visuel mêle deux influences : l’esthétique industrielle (textures mécaniques, étiquettes, traces d’usure) et celle des favelas modernes, avec des motifs inspirés du graffiti, du plus minimaliste au sticker. Tout l’enjeu était de marier les deux, avec une palette sombre relevée de couleurs vives et un trait anguleux, net et dynamique.
- Année
- 2025
- Secteur
- Jeux vidéo
- Collaboration
- Bastien Tafforeau, développeur full-stack
Intervention
- Analyse — étape réalisée
- Identité — étape réalisée
- Conception — étape réalisée
- Intégration — étape réalisée
- Suivi — étape hors périmètre
Identité
Le logo a été créé par le client, à l’issue d’un travail mené ensemble, notamment sur les couleurs. Il est devenu la pierre angulaire de l’identité : la palette, les typographies et tout l’univers graphique du site en découlent.
Logo
Favicon
Typographies & couleurs
Pour les titres, la Schabo X Condensed apporte le côté brut et urbain du projet : une police très marquée, qui s’impose au premier regard. En contrepoint, la Smooch Sans des sous-titres, fine et anguleuse, rappelle l’aspect industriel et épuré de l’univers.
Le texte courant utilise volontairement une police de titrage, la Funnel Display : le site compte peu de textes longs, et ses détails graphiques lui donnent du caractère sans nuire à la lecture.
La palette est volontairement réduite : un noir profond, un blanc crème et un rose-rouge éclatant, saturé, presque incandescent. L’attention doit rester sur les créations du collectif ; le site est seulement là pour les mettre en valeur.
Titres
Sous-titres
Texte de labeur
Primaire
#FE0041
Texte
#F7FEE7
Fond
#0A0A0A
Responsive
Choix & contraintes
Mettre en valeur sans alourdir
Le site repose sur des visuels riches : une cinématique, des vidéos et une vingtaine de rendus de skins. Pour les montrer sans alourdir la page, chaque image a été redimensionnée à sa taille d’affichage réelle et compressée au format WebP, ce qui fait passer le poids total des images de 9,5 Mo à 1,7 Mo. La cinématique d’accueil est passée de 32 Mo à 4,4 Mo, avec une version plus légère pour les téléphones.
Un écran de chargement utile
L’écran de chargement ne se contente pas de faire patienter : pendant son animation, la page se construit en dessous et ses images se chargent. Une image tirée de la cinématique s’affiche aussitôt, et la vidéo démarre au moment où le site est prêt à être parcouru.
Des animations au service du projet
Les animations réalisées avec GSAP prolongent l’univers de Project Lockdown : par exemple, une fumée qui traverse le carrousel des skins ou des tags qui s’inscrivent sous les noms des créateurs, comme sur un mur.
Stack technique
Ce projet a été réalisé avec le framework Vue.js 3, en association avec TypeScript pour garantir une bonne maintenabilité du projet. Pour une grande partie des animations, nous avons utilisé GSAP (GreenSock Animation Platform), une bibliothèque d’animation JavaScript.
Périmètre
J’ai créé l’identité visuelle ainsi que les maquettes. Au niveau de l’intégration, je me suis principalement concentrée sur les animations : l’écran de chargement, l’effet de fumée dans le carrousel, les tags sous les noms des collaborateurs…