[{"data":1,"prerenderedAt":131},["ShallowReactive",2],{"project-projects_fr-blog-kollori":3,"project-order-projects_fr":126},{"id":4,"title":5,"body":6,"client":13,"collaborators":14,"cover":15,"description":10,"extension":16,"featured":17,"kind":18,"meta":19,"navigation":20,"path":21,"roles":22,"sections":26,"sector":109,"seo":110,"slug":111,"stem":112,"steps":113,"summary":117,"tagline":118,"testimonial":15,"thumbnails":119,"tools":122,"url":123,"year":124,"__hash__":125},"projects_fr\u002Ffr\u002Fstudio-ergane\u002Fblog-kollori.md","Blog Kollori",{"type":7,"value":8,"toc":9},"minimark",[],{"title":10,"searchDepth":11,"depth":11,"links":12},"",2,[],"Kollori",[],null,"md",false,"Blog",{},true,"\u002Ffr\u002Fstudio-ergane\u002Fblog-kollori",[23,24,25],"ui","ux","front",{"presentation":27,"audit":31,"context":47,"mockups":56,"components":77,"responsive":83,"choices":93,"stack":100,"backoffice":103,"scope":106},{"paragraphs":28},[29,30],"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":32,"visuals":35},[33,34],"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.",[36,42],{"type":37,"src":38,"width":39,"height":40,"alt":41},"screenshot-desktop","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-existant-desktop.webp",1271,627,"Page d’accueil du site Kollori avant refonte",{"type":43,"src":44,"width":45,"height":40,"alt":46},"screenshot-mobile","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-existant-shapes.webp",289,"Les trois formes décoratives de l’identité Kollori : jaune, violette et rouge",{"paragraphs":48,"items":51},[49,50],"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 :",[52,53,54,55],"Analyse technique du blog existant","Analyse de son référencement","Benchmark des blogs concurrents","Personas et experience map",{"visuals":57},[58,64,70,74],{"type":59,"label":60,"src":61,"width":39,"height":62,"alt":63},"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":65,"src":66,"width":67,"height":68,"alt":69},"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":59,"label":71,"src":72,"width":39,"height":62,"alt":73},"Maquette","\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-maquette-desktop.webp","Maquette du même article, illustrée et mise en couleur",{"type":65,"src":75,"width":67,"height":68,"alt":76},"\u002Fimg\u002Fstudio-ergane\u002Fprojects\u002Fblog-kollori\u002Fblog-kollori-maquette-mobile.webp","Maquette de la page Contact sur téléphone",{"visuals":78},[79],{"type":80,"component":81,"label":82},"square","paper-plane","Animation par défaut & au survol\u002Fau clic",{"visuals":84},[85,90],{"type":37,"src":86,"width":87,"height":88,"alt":89},"\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":43,"src":91,"width":45,"height":40,"alt":92},"\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",[94,97],{"title":95,"text":96},"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":98,"text":99},"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":101},[102],"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":104},[105],"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":107},[108],"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":5,"description":10},"blog-kollori","fr\u002Fstudio-ergane\u002Fblog-kollori",[114,115,116],"discovery","design","integration","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":120,"mobile":121},"\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fkollori-desktop.webp","\u002Fimg\u002Fstudio-ergane\u002Fthumbnails\u002Fkollori-mobile.webp",[],"https:\u002F\u002Fblog.kollori.com\u002F",2024,"hoBvBp2No7msOyvZtKoiHL5LWkcEVBu4OqG8DvvYb1w",[127,130],{"slug":128,"title":129},"project-lockdown","Project Lockdown",{"slug":111,"title":5},1790606057621]