[{"data":1,"prerenderedAt":140},["ShallowReactive",2],{"project-projects_fr-project-lockdown":3,"project-order-projects_fr":135},{"id":4,"title":5,"body":6,"client":13,"collaborators":14,"cover":16,"description":10,"extension":17,"featured":18,"kind":19,"meta":20,"navigation":18,"path":21,"roles":22,"sections":28,"sector":118,"seo":119,"slug":120,"stem":121,"steps":122,"summary":126,"tagline":127,"testimonial":16,"thumbnails":128,"tools":131,"url":132,"year":133,"__hash__":134},"projects_fr\u002Ffr\u002Fstudio-ergane\u002Fproject-lockdown.md","Project Lockdown",{"type":7,"value":8,"toc":9},"minimark",[],{"title":10,"searchDepth":11,"depth":11,"links":12},"",2,[],"Thibault Chapelain",[15],"Bastien Tafforeau, développeur full-stack",null,"md",true,"Site vitrine",{},"\u002Ffr\u002Fstudio-ergane\u002Fproject-lockdown",[23,24,25,26,27],"ui","ux","identity","front","a11y",{"presentation":29,"identity":34,"typography":56,"responsive":89,"choices":102,"stack":112,"scope":115},{"paragraphs":30},[31,32,33],"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.",{"paragraphs":35,"visuals":37},[36],"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.",[38,46,50],{"type":39,"label":40,"src":41,"width":42,"height":43,"alt":44,"background":45},"logo","Logo","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-logo-white.webp",360,203,"Logo de Project Lockdown, en graffiti, sur fond sombre","#0A0A0A",{"type":39,"src":47,"width":42,"height":43,"alt":48,"background":49},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-logo-black.webp","Le même logo sur fond clair","#F7FEE7",{"type":51,"label":52,"src":53,"width":54,"height":54,"alt":55,"background":45},"square","Favicon","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-favicon.webp",80,"Favicon de Project Lockdown",{"paragraphs":57,"fonts":61,"colors":81},[58,59,60],"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.",[62,69,75],{"type":63,"label":64,"src":65,"width":66,"height":67,"alt":68},"font","Titres","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-schabo-x-condensed.webp",282,58,"Schabo X Condensed",{"type":63,"label":70,"src":71,"width":72,"height":73,"alt":74},"Sous-titres","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-smooch-sans.webp",298,46,"Smooch Sans",{"type":63,"label":76,"src":77,"width":78,"height":79,"alt":80},"Texte de labeur","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-funnel-display.webp",322,44,"Funnel Display",[82,85,87],{"label":83,"hex":84},"Primaire","#FE0041",{"label":86,"hex":49},"Texte",{"label":88,"hex":45},"Fond",{"visuals":90},[91,97],{"type":92,"src":93,"width":94,"height":95,"alt":96},"screenshot-desktop","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-responsive-desktop.webp",1271,627,"Le site Project Lockdown sur un écran large : le trailer et la fiche d’une arme",{"type":98,"src":99,"width":100,"height":95,"alt":101},"screenshot-mobile","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-responsive-mobile.webp",289,"La même page sur téléphone, les éléments passant les uns sous les autres",[103,106,109],{"title":104,"text":105},"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.",{"title":107,"text":108},"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.",{"title":110,"text":111},"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.",{"paragraphs":113},[114],"Ce projet a été réalisé avec le framework \u003Cstrong>Vue.js 3\u003C\u002Fstrong>, en association avec \u003Cstrong>TypeScript\u003C\u002Fstrong> pour garantir une bonne maintenabilité du projet. Pour une grande partie des animations, nous avons utilisé \u003Cstrong>GSAP\u003C\u002Fstrong> (GreenSock Animation Platform), une bibliothèque d’animation JavaScript.",{"paragraphs":116},[117],"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…","Jeux vidéo",{"title":5,"description":10},"project-lockdown","fr\u002Fstudio-ergane\u002Fproject-lockdown",[123,25,124,125],"discovery","design","integration","Création d’un site web pour mettre en avant un trailer cinématique et des cosmétiques conçus par des fans pour le jeu Counter-Strike 2.","Mettre en avant un savoir-faire communautaire digne des studios professionnels.",{"desktop":129,"mobile":130},"\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fproject-lockdown-desktop.webp","\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fproject-lockdown-mobile.webp",[],"https:\u002F\u002Fproject-lockdown.com\u002F",2025,"sNAW1sSCPXivzOfFDY2pjgZjMCQm8raJpi0VK0n5iqM",[136,137],{"slug":120,"title":5},{"slug":138,"title":139},"blog-kollori","Blog Kollori",1790606057610]