[{"data":1,"prerenderedAt":241},["ShallowReactive",2],{"projects-projects_en":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_en\u002Fen\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, full-stack developer",null,"md",true,"Showcase website",{},"\u002Fen\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 is the work of a French collective of Counter-Strike enthusiasts. The website had to showcase two creations: a 3D cinematic paying tribute to the franchise, and a collection of skins designed for a fictional Counter-Strike 2 operation.","Beyond the tribute, the creators hope to see their work become part of the game’s official ecosystem. On release, the project was picked up by the specialist gaming press.","The visual world blends two influences: industrial aesthetics (mechanical textures, labels, signs of wear) and modern favelas, with graffiti-inspired patterns ranging from minimalist marks to sticker art. The challenge was to bring the two together, with a dark palette lifted by vivid colours and sharp, angular, dynamic linework.",{"paragraphs":36,"visuals":38},[37],"The logo was created by the client, following work we did together, particularly on the colours. It became the cornerstone of the identity: the palette, the typefaces and the site’s whole visual world all stem from it.",[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,"Project Lockdown graffiti logo on a dark background","#0A0A0A",{"type":40,"src":48,"width":43,"height":44,"alt":49,"background":50},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-logo-black.webp","The same logo on a light background","#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,"Project Lockdown favicon",{"paragraphs":58,"fonts":62,"colors":82},[59,60,61],"For headings, Schabo X Condensed brings the project’s raw, urban edge: a very distinctive typeface that commands attention at first glance. As a counterpoint, Smooch Sans, used for subheadings, is thin and angular, echoing the industrial, pared-back feel of this world.","The body copy deliberately uses a display typeface, Funnel Display: the site has few long texts, and its graphic details give it character without hindering readability.","The palette is deliberately restrained: a deep black, a cream white and a bright, saturated, almost incandescent pinkish red. Attention must stay on the collective’s creations; the site is only there to showcase them.",[63,70,76],{"type":64,"label":65,"src":66,"width":67,"height":68,"alt":69},"font","Headings","\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},"Subheadings","\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},"Body copy","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-funnel-display.webp",322,44,"Funnel Display",[83,86,88],{"label":84,"hex":85},"Primary","#FE0041",{"label":87,"hex":50},"Text",{"label":89,"hex":46},"Background",{"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,"The Project Lockdown website on a wide screen: the trailer and a weapon page",{"type":99,"src":100,"width":101,"height":96,"alt":102},"screenshot-mobile","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fproject-lockdown\u002Fproject-lockdown-responsive-mobile.webp",289,"The same page on a phone, with the elements stacked",[104,107,110],{"title":105,"text":106},"Showcasing without weighing things down","The site relies on rich visuals: a cinematic, videos and some twenty skin renders. To show them without weighing the page down, every image was resized to its actual display size and compressed to WebP, bringing the total image weight down from 9.5 MB to 1.7 MB. The homepage cinematic went from 32 MB to 4.4 MB, with a lighter version for phones.",{"title":108,"text":109},"A loading screen with a purpose","The loading screen does more than keep visitors waiting: while it animates, the page is built underneath and its images load. A still from the cinematic appears straight away, and the video starts as soon as the site is ready to explore.",{"title":111,"text":112},"Animations that serve the project","The animations, made with GSAP, extend the world of Project Lockdown: for example, smoke drifting across the skin carousel, or tags that write themselves under the creators’ names, as if on a wall.",{"paragraphs":114},[115],"This project was built with the \u003Cstrong>Vue.js 3\u003C\u002Fstrong> framework, together with \u003Cstrong>TypeScript\u003C\u002Fstrong> to keep it maintainable over time. Most of the animations rely on \u003Cstrong>GSAP\u003C\u002Fstrong> (GreenSock Animation Platform), a JavaScript animation library.",{"paragraphs":117},[118],"I created the visual identity and the mockups. On the development side, I focused mainly on the animations: the loading screen, the smoke effect in the carousel, the tags under the contributors’ names, and so on.","Video games",{"title":6,"description":11},"project-lockdown","en\u002Fstudio-ergane\u002Fproject-lockdown",[124,26,125,126],"discovery","design","integration","A website showcasing a cinematic trailer and fan-made cosmetics for the game Counter-Strike 2.","Showcasing community craft worthy of a professional studio.",{"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,"X2i_JnRcNRb3wnB46nMjA8dA_To9aWOqG5s4dQWPioI",{"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_en\u002Fen\u002Fstudio-ergane\u002Fblog-kollori.md","Blog Kollori",{"type":8,"value":140,"toc":141},[],{"title":11,"searchDepth":12,"depth":12,"links":142},[],"Kollori",[],false,"Blog",{},"\u002Fen\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],"Founded in 2012 and based in Boulogne-Billancourt, near Paris, Kollori sells design office furniture to businesses and helps them fit out their workspaces. Its blog explores trends in the world of work: office design, ergonomics, wellbeing at work.","The brand had just redesigned its visual identity and its online shop. The blog therefore needed updating to carry the same identity.",{"paragraphs":156,"visuals":159},[157,158],"Kollori’s new identity was designed by Studio Aeria. The logo plays on the “O” in Kollori, into which shapes and colours slip: a way of saying that a workspace can be shaped and brought to life. The brand’s signature orange was kept.","The result is a modular, colourful identity, extended into a whole graphic world that illustrates the many ways to fit out an office. The blog had to find its place within this world.",[160,163],{"type":93,"src":161,"width":95,"height":96,"alt":162},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-existant-desktop.webp","The Kollori homepage before the redesign",{"type":99,"src":164,"width":101,"height":96,"alt":165},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-existant-shapes.webp","The three decorative shapes of the Kollori identity: yellow, purple and red",{"paragraphs":167,"items":170},[168,169],"I carried out this project during my internship at Kollori, as part of my UI designer training course (2023–2024), working directly with the brand’s team. One technical constraint was set from the start: the blog had to stay on WordPress.","Before designing anything, I analysed the project:",[171,172,173,174],"Technical analysis of the existing blog","SEO analysis","Benchmark of competing blogs","Personas and 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 of the article on a wide screen: image, title, metadata, body copy",{"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 of the Contact page on a phone",{"type":178,"label":190,"src":191,"width":95,"height":181,"alt":192},"Mockup","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-maquette-desktop.webp","Mockup of the same article, illustrated and in colour",{"type":184,"src":194,"width":186,"height":187,"alt":195},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-maquette-mobile.webp","Mockup of the Contact page on a phone",{"visuals":197},[198],{"type":52,"component":199,"label":200},"paper-plane","Animation, idle and on hover\u002Fclick",{"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,"The Blog Kollori website on a wide screen: the page listing the latest blog posts",{"type":99,"src":209,"width":101,"height":96,"alt":210},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-responsive-mobile.webp","The Blog Kollori website on a phone: the header of a blog post",[212,215],{"title":213,"text":214},"As few plugins as possible","The blog was built with WordPress, but I wanted to install as few plugins as possible to keep the site light and easy to maintain. The animations, such as the paper plane, are therefore written in CSS rather than handed over to a plugin.",{"title":216,"text":217},"In keeping with the identity","I wanted to stay as close as possible to the new identity: the blog’s own components (post cards, headers, animations…) were designed as an extension of this modular, colourful world, so that the blog and the shop speak with one voice.",{"paragraphs":219},[220],"The blog runs on \u003Cstrong>WordPress\u003C\u002Fstrong> (in \u003Cstrong>PHP\u003C\u002Fstrong>); the front end is written in plain \u003Cstrong>HTML\u003C\u002Fstrong>, \u003Cstrong>CSS\u003C\u002Fstrong> and \u003Cstrong>JavaScript\u003C\u002Fstrong>, with no framework.",{"paragraphs":222},[223],"The goal was for the Kollori team to be able to run the blog on their own. I therefore structured the back office with \u003Cstrong>Custom Post Types\u003C\u002Fstrong> and \u003Cstrong>Advanced Custom Fields\u003C\u002Fstrong> (ACF): each type of content has its own clear, guided fields, with no need to touch the code.",{"paragraphs":225},[226],"I did not create the visual identity, which was designed by Studio Aeria. I carried out the project analysis, designed the blog’s wireframes and mockups, then developed it on WordPress, back office included.","E-commerce",{"title":138,"description":11},"blog-kollori","en\u002Fstudio-ergane\u002Fblog-kollori",[124,125,126],"A blog for Kollori, a French brand specialising in office furniture.","A colourful site dedicated to office design and wellbeing at work.",{"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,"DGLji_NqDXeEgltIX_UDQWToBZ5tdGIDkN-kYbdTsow",1790606057545]