[{"data":1,"prerenderedAt":241},["ShallowReactive",2],{"projects-projects_fr":3},[4,136],{"id":5,"title":6,"body":7,"client":14,"collaborators":15,"cover":17,"description":11,"extension":18,"featured":19,"kind":20,"meta":21,"navigation":19,"path":22,"roles":23,"sections":29,"sector":119,"seo":120,"slug":121,"stem":122,"steps":123,"summary":127,"tagline":128,"testimonial":17,"thumbnails":129,"tools":132,"url":133,"year":134,"__hash__":135},"projects_fr\u002Ffr\u002Fstudio-ergane\u002Fproject-lockdown.md","Project Lockdown",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"Thibault Chapelain",[16],"Bastien Tafforeau, développeur full-stack",null,"md",true,"Site vitrine",{},"\u002Ffr\u002Fstudio-ergane\u002Fproject-lockdown",[24,25,26,27,28],"ui","ux","identity","front","a11y",{"presentation":30,"identity":35,"typography":57,"responsive":90,"choices":103,"stack":113,"scope":116},{"paragraphs":31},[32,33,34],"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":36,"visuals":38},[37],"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.",[39,47,51],{"type":40,"label":41,"src":42,"width":43,"height":44,"alt":45,"background":46},"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":40,"src":48,"width":43,"height":44,"alt":49,"background":50},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-logo-black.webp","Le même logo sur fond clair","#F7FEE7",{"type":52,"label":53,"src":54,"width":55,"height":55,"alt":56,"background":46},"square","Favicon","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-favicon.webp",80,"Favicon de Project Lockdown",{"paragraphs":58,"fonts":62,"colors":82},[59,60,61],"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.",[63,70,76],{"type":64,"label":65,"src":66,"width":67,"height":68,"alt":69},"font","Titres","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-schabo-x-condensed.webp",282,58,"Schabo X Condensed",{"type":64,"label":71,"src":72,"width":73,"height":74,"alt":75},"Sous-titres","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-smooch-sans.webp",298,46,"Smooch Sans",{"type":64,"label":77,"src":78,"width":79,"height":80,"alt":81},"Texte de labeur","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-funnel-display.webp",322,44,"Funnel Display",[83,86,88],{"label":84,"hex":85},"Primaire","#FE0041",{"label":87,"hex":50},"Texte",{"label":89,"hex":46},"Fond",{"visuals":91},[92,98],{"type":93,"src":94,"width":95,"height":96,"alt":97},"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":99,"src":100,"width":101,"height":96,"alt":102},"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",[104,107,110],{"title":105,"text":106},"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":108,"text":109},"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":111,"text":112},"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":114},[115],"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":117},[118],"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":6,"description":11},"project-lockdown","fr\u002Fstudio-ergane\u002Fproject-lockdown",[124,26,125,126],"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":130,"mobile":131},"\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fproject-lockdown-desktop.webp","\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fproject-lockdown-mobile.webp",[],"https:\u002F\u002Fproject-lockdown.com\u002F",2025,"sNAW1sSCPXivzOfFDY2pjgZjMCQm8raJpi0VK0n5iqM",{"id":137,"title":138,"body":139,"client":143,"collaborators":144,"cover":17,"description":11,"extension":18,"featured":145,"kind":146,"meta":147,"navigation":19,"path":148,"roles":149,"sections":150,"sector":227,"seo":228,"slug":229,"stem":230,"steps":231,"summary":232,"tagline":233,"testimonial":17,"thumbnails":234,"tools":237,"url":238,"year":239,"__hash__":240},"projects_fr\u002Ffr\u002Fstudio-ergane\u002Fblog-kollori.md","Blog Kollori",{"type":8,"value":140,"toc":141},[],{"title":11,"searchDepth":12,"depth":12,"links":142},[],"Kollori",[],false,"Blog",{},"\u002Ffr\u002Fstudio-ergane\u002Fblog-kollori",[24,25,27],{"presentation":151,"audit":155,"context":166,"mockups":175,"components":196,"responsive":201,"choices":211,"stack":218,"backoffice":221,"scope":224},{"paragraphs":152},[153,154],"Fondée en 2012 et installée à Boulogne-Billancourt, Kollori vend du mobilier de bureau design aux entreprises et les accompagne dans l’aménagement de leurs espaces de travail. Son blog décrypte les tendances du monde du travail : aménagement, ergonomie, bien-être au bureau.","La marque venait de refondre son identité visuelle et son site e-commerce. Il fallait donc mettre à jour le blog pour qu’il porte la même identité.",{"paragraphs":156,"visuals":159},[157,158],"La nouvelle identité de Kollori a été conçue par Studio Aeria. Le logo joue sur le « O » de Kollori, où se glissent des formes et des couleurs : une manière de dire qu’un espace de travail se façonne et s’anime. L’orange emblématique de la marque a été conservé.","Il en découle une identité modulaire et colorée, déclinée en tout un univers graphique qui illustre les multiples façons d’aménager un bureau. C’est dans cet univers que le blog devait trouver sa place.",[160,163],{"type":93,"src":161,"width":95,"height":96,"alt":162},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-existant-desktop.webp","Page d’accueil du site Kollori avant refonte",{"type":99,"src":164,"width":101,"height":96,"alt":165},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-existant-shapes.webp","Les trois formes décoratives de l’identité Kollori : jaune, violette et rouge",{"paragraphs":167,"items":170},[168,169],"J’ai réalisé ce projet pendant mon stage chez Kollori, dans le cadre de ma formation de Concepteur Designer UI (2023-2024), en lien direct avec l’équipe de la marque. Une contrainte technique était posée dès le départ : le blog devait rester sous WordPress.","Avant de concevoir quoi que ce soit, j’ai analysé le projet :",[171,172,173,174],"Analyse technique du blog existant","Analyse de son référencement","Benchmark des blogs concurrents","Personas et experience map",{"visuals":176},[177,183,189,193],{"type":178,"label":179,"src":180,"width":95,"height":181,"alt":182},"mockup-desktop","Wireframe","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-wireframe-desktop.webp",960,"Wireframe de l’article sur écran large : visuel, titre, métadonnées, corps de texte",{"type":184,"src":185,"width":186,"height":187,"alt":188},"mockup-mobile","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-wireframe-mobile.webp",290,962,"Wireframe de la page Contact sur téléphone",{"type":178,"label":190,"src":191,"width":95,"height":181,"alt":192},"Maquette","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-maquette-desktop.webp","Maquette du même article, illustrée et mise en couleur",{"type":184,"src":194,"width":186,"height":187,"alt":195},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-maquette-mobile.webp","Maquette de la page Contact sur téléphone",{"visuals":197},[198],{"type":52,"component":199,"label":200},"paper-plane","Animation par défaut & au survol\u002Fau clic",{"visuals":202},[203,208],{"type":93,"src":204,"width":205,"height":206,"alt":207},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-responsive-desktop.webp",1440,1024,"Le site Blog Kollori sur un écran large : la page présentant les derniers articles du blog",{"type":99,"src":209,"width":101,"height":96,"alt":210},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-responsive-mobile.webp","Le site Blog Kollori sur téléphone : le visuel présente l’en-tête d’un article du blog",[212,215],{"title":213,"text":214},"Le moins d’extensions possible","Le blog a été réalisé avec WordPress, mais je voulais installer le moins d’extensions possible pour garder un site léger et simple à maintenir. Les animations, comme l’avion en papier, sont donc écrites en CSS plutôt que confiées à un plugin.",{"title":216,"text":217},"Dans la continuité de l’identité","Je voulais rester au plus près de la nouvelle identité : les composants propres au blog (cartes d’articles, en-têtes, animations…) ont été imaginés comme un prolongement de cet univers modulaire et coloré, pour que le blog et la boutique parlent d’une même voix.",{"paragraphs":219},[220],"Le blog repose sur \u003Cstrong>WordPress\u003C\u002Fstrong> (en \u003Cstrong>PHP\u003C\u002Fstrong>) ; le front-end est écrit en \u003Cstrong>HTML\u003C\u002Fstrong>, \u003Cstrong>CSS\u003C\u002Fstrong> et \u003Cstrong>JavaScript\u003C\u002Fstrong> natifs, sans framework.",{"paragraphs":222},[223],"L’objectif était que l’équipe de Kollori puisse faire vivre le blog en toute autonomie. J’ai donc structuré le back-office avec des \u003Cstrong>Custom Post Types\u003C\u002Fstrong> et \u003Cstrong>Advanced Custom Fields\u003C\u002Fstrong> (ACF) : chaque type de contenu dispose de ses propres champs, clairs et guidés, sans qu’il soit nécessaire de toucher au code.",{"paragraphs":225},[226],"Je ne suis pas à l’origine de l’identité visuelle, créée par Studio Aeria. J’ai mené l’analyse du projet, conçu les wireframes et les maquettes du blog, puis développé son intégration sous WordPress, back-office compris.","E-commerce",{"title":138,"description":11},"blog-kollori","fr\u002Fstudio-ergane\u002Fblog-kollori",[124,125,126],"Création d’un blog pour Kollori, une marque française spécialiste en mobilier de bureau.","Un site coloré au service de l’aménagement de bureau et du bien-être au travail.",{"desktop":235,"mobile":236},"\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fkollori-desktop.webp","\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fkollori-mobile.webp",[],"https:\u002F\u002Fblog.kollori.com\u002F",2024,"hoBvBp2No7msOyvZtKoiHL5LWkcEVBu4OqG8DvvYb1w",1790606057450]