[{"data":1,"prerenderedAt":237},["ShallowReactive",2],{"work-fr-beau-rivage":3,"work-cards-fr":150},{"id":4,"title":5,"approach":6,"body":72,"brief":79,"card":85,"description":76,"extension":89,"gallery":90,"hero":107,"heroAlt":108,"meta":109,"navigation":110,"outcome":111,"path":115,"problem":116,"reflection":119,"resources":120,"role":136,"seo":145,"status":146,"stem":147,"summary":148,"__hash__":149},"work_fr\u002Fwork\u002Fbeau-rivage.md","Beau-Rivage Eco-Redesign",[7,25,37,54,59],{"label":8,"title":9,"prose":10,"artifacts":13},"Audit","Peser le site existant",[11,12],"Avant de refondre quoi que ce soit, nous avons mesuré ce qui existait, car l'éco-conception ne prend sens que face à une référence. Le site existant s'appuyait sur de la vidéo en lecture automatique et des images non optimisées, réparties dans une arborescence profonde de chambres, suites, restaurants, bars et spas. Une seule page pesait plus de treize mégaoctets et obtenait un F sur EcoIndex, avec une estimation de 368 kg de CO2 par an pour dix mille visites par mois.","Nous avons aussi cartographié les vrais parcours utilisateurs (un prospect qui s'informe, un client qui compare les chambres) pour que la refonte puisse garder ce que les gens venaient vraiment chercher tout en se délestant du poids qu'ils n'avaient jamais demandé.",[14,20],{"src":15,"alt":16,"caption":17,"decision":18,"width":19},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-audit-1.jpg","Une slide de projet titrée 'Revue des éléments du site non écoconçus' avec trois colonnes, Vidéos, Images et Animations, listant les médias du site d'origine comme étant de haute qualité, surdimensionnés, non compressés et en lecture automatique.","Audit — les médias du site d'origine, passés en revue.","Nommer d'abord chaque ingrédient lourd a montré que la vidéo et les images représentaient l'essentiel du poids, et c'est donc là que la refonte se jouerait.","half",{"src":21,"alt":22,"caption":23,"decision":24,"width":19},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-audit-2.jpg","Une slide de projet titrée 'Revue des éléments du site non écoconçus' relevant des illustrations sans valeur informative, de très grandes quantités de médias de haute qualité, et des pages qui répètent le contenu d'une autre page.","Audit — quelle part n'apportait aucune information.","L'essentiel des médias était décoratif, nous pouvions donc retirer du poids sans rien retirer de ce qu'un client venait vraiment chercher.",{"label":26,"title":27,"prose":28,"artifacts":30},"Refonte","Le luxe sans le poids",[29],"La question de design était la plus intéressante : comment garder une image de prestige tout en retirant les ingrédients lourds qui la signalent d'habitude ? Nous avons reconstruit les pages clés (la page d'accueil, les chambres et suites, une suite comme la Riviera) autour de la sobriété, en traitant l'espace généreux et la typographie soignée comme le signal du luxe, à la place du spectacle en lecture automatique.",[31],{"src":32,"alt":33,"caption":34,"decision":35,"width":36},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-redesign.jpg","Une slide de projet titrée 'Comment retranscrire le luxe de manière écoconçue?' associant une approche de design en quatre points (mise en page épurée, couleurs revalorisées, médias allégés via des SVG sobres, moins de contenu) à des maquettes de la page d'accueil refondue, de la page La Plage et de la Suite Riviera.","Refonte — garder le luxe, retirer le poids.","Nous avons traité la sobriété comme le signal du luxe, en substituant au spectacle en lecture automatique une typographie et un espace soignés et des SVG sobres.","wide",{"label":38,"title":39,"prose":40,"artifacts":43},"Build","Nuxt 3, SSR et discipline des images",[41,42],"Nous sommes partis de Vue, le framework que nous connaissions, et nous sommes passés à Nuxt 3 précisément pour les outils de durabilité qu'il apporte. Grâce au rendu côté serveur, la page arrive prête à s'afficher avec un travail minimal sur l'appareil du visiteur, et Nuxt Image gère automatiquement la plus grosse source de poids : convertir les images vers des formats modernes comme WebP et AVIF, les charger en différé, et les redimensionner à l'écran réel plutôt que d'envoyer un seul énorme fichier à tout le monde.","Cette combinaison constitue l'essentiel du gain. Une architecture SSR sur Node.js réduit le travail côté client, et donc l'énergie de l'appareil, au minimum, et une gestion disciplinée des images fait des pages les plus lourdes les plus légères. L'idée tout du long était que la durabilité ici n'est pas une ambiance, ce sont des choix techniques précis avec des effets mesurables.",[44,49],{"src":45,"alt":46,"caption":47,"decision":48,"width":19},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-build-1.jpg","Une slide de projet titrée 'Nuxt Image' montrant un intérieur du Beau-Rivage converti en AVIF et redimensionné, passant de 51.5 kB à 22.5 kB, soit 56 % d'économie, à côté du code NuxtImg qui le fait.","Build — Nuxt Image fait le gros du travail.","La conversion automatique en WebP et AVIF, plus le redimensionnement au viewport, ont fait de la source de poids la plus lourde la plus légère.",{"src":50,"alt":51,"caption":52,"decision":53,"width":19},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-build-2.jpg","Une slide de projet titrée 'Server-Side Rendering (SSR)' avec un schéma du flux de requête où le serveur envoie du HTML prêt à l'emploi pour que la page s'affiche avec un travail minimal sur l'appareil du visiteur.","Build — le rendu côté serveur sur Nuxt 3.","Le rendu côté serveur fait arriver la page prête à s'afficher, ce qui réduit le travail côté client et l'énergie de l'appareil.",{"label":55,"title":56,"prose":57},"Hébergement","Chercher du vert, honnêtement",[58],"Nous avons aussi regardé où le site vivrait, en confrontant les hébergeurs au jeu de données de la Green Web Foundation. Le constat honnête était une zone grise : notre plateforme tourne sur une infrastructure AWS en Europe, qui revendique de l'énergie renouvelable mais n'est pas clairement répertoriée comme verte. Plutôt que d'enjoliver les choses, nous l'avons noté comme une limite réelle, car un projet d'éco-conception qui maquille son propre hébergement n'est pas honnête sur son empreinte.",{"label":60,"title":61,"prose":62,"artifacts":65},"Résultats","De F à A",[63,64],"L'avant-après est la part dont je suis le plus fier, car elle est mesurée, pas affirmée. Le poids de la page est passé de 13.11 MB à 504 KB. Le carbone annuel estimé est tombé de 368 kg à 15.35 kg de CO2. La note EcoIndex est passée de F à A, et le score de qualité global est monté de 36 à 73, les performances grimpant de 66 à 98.","Soit environ 95 % de poids et de carbone en moins, un site à peu près vingt fois plus léger, avec une utilisabilité et des performances qui montent au lieu de baisser. Le luxe a survécu au régime.",[66],{"src":67,"alt":68,"caption":69,"decision":70,"width":71},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-results.jpg","Quatre outils de mesure comparant le site d'origine et le site refondu : Website Carbon (de F à A, de 368 à 15.35 kg de CO2 par an), Beacon (de 13.11 MB à 504 KB), Ecograder (de 36 à 73) et Lighthouse (performance de 66 à 98).","Résultats — mesurés sur quatre outils, avant et après.","Chaque chiffre de cette étude est l'un de ces quatre relevés, avant et après, pas une affirmation.","full",{"type":73,"value":74,"toc":75},"minimark",[],{"title":76,"searchDepth":77,"depth":77,"links":78},"",2,[],{"role":80,"year":81,"host":82,"scope":83,"shipped":84},"Écoconception et build","2025","HEIG-VD · Eco-conception","Équipe de quatre","Refonte + build Nuxt 3",{"title":86,"alt":87,"image":88},"Beau-Rivage Eco-Redesign — un site d'hôtel de luxe 95 % plus léger","Le site du Beau-Rivage Palace refondu : sobre, élégant, bien plus léger que l'original.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fadjacent.jpg","md",[91,95,99,103],{"alt":92,"caption":93,"src":94},"Bandeau éditorial de la page d'accueil refondue : la façade du Beau-Rivage Palace au-dessus de sa piscine extérieure et du Léman, sous le titre Le Beau Rivage.","Page d'accueil — l'hôtel, posé sur le lac.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fgallery-01.jpg",{"alt":96,"caption":97,"src":98},"Page Chambres et Suites refondue : quatre cartes de chambres (Supérieure vue ville, vue lac et alpes, Deluxe, Deluxe Riviera) en photographie d'intérieur optimisée.","Chambres — la liste, reconstruite légère.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fgallery-02.jpg",{"alt":100,"caption":101,"src":102},"La page Suite Riviera : une grille de quatre images du salon, de la chambre et de la salle de bain avec vue sur le lac de la suite, en photographie optimisée.","Suite Riviera — le luxe sans le poids.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fgallery-03.jpg",{"alt":104,"caption":105,"src":106},"Page Restaurants et Bars refondue : des cartes pour PIC au Beau-Rivage Palace, Café Beau-Rivage et La Terrasse en photographie optimisée.","Restaurants et bars — l'éventail, gardé léger.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fgallery-04.jpg","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fhero.jpg","La page d'accueil refondue du Beau-Rivage Palace au repos : une barre de navigation sobre en haut et le logo centré 'Beau-Rivage Palace, Lausanne Switzerland' sur une trame de fines lignes dorées, bien plus léger que le site d'origine.",{},true,[112,113,114],"Un site du Beau-Rivage Palace refondu, environ 95 % plus léger en poids et en carbone que l'original, EcoIndex de F à A, tout en gardant l'allure d'une marque cinq étoiles.","Un build Nuxt 3 utilisant le rendu côté serveur et l'optimisation automatique des images comme leviers principaux, avec un avant-après mesuré plutôt qu'une affirmation.","Un compte rendu honnête des limites, y compris la zone grise autour de l'hébergement vert, car un projet d'éco-conception doit mesurer honnêtement sa propre empreinte.","\u002Fwork\u002Fbeau-rivage",[117,118],"Les sites des hôtels de luxe comptent parmi les plus lourds du web : vidéo en lecture automatique, images énormes, et tous les formats imaginables, le tout au nom du prestige. Ce poids n'est pas gratuit. C'est de la bande passante, de l'énergie et du carbone à chaque visite.","Le brief consistait à refondre le site du Beau-Rivage Palace selon les principes de l'éco-conception (le design numérique responsable), et le vrai défi tenait à une tension interne : réduire drastiquement le coût environnemental du site sans perdre le sentiment de luxe sur lequel repose toute la marque.","Ce projet a rendu la durabilité numérique concrète pour moi. Il est facile de parler de design responsable dans l'abstrait ; il est bien plus utile de réduire de 95 % le carbone d'un vrai site et de pouvoir montrer les chiffres. La leçon qui est restée, c'est que les parties les plus lourdes et les plus gaspilleuses d'un site sont en général les plus faciles à corriger automatiquement, les images avant tout, et que l'on peut être plus léger et plus rapide tout en restant haut de gamme. Cela touche de près à la question derrière mon mémoire : rendre visible le coût énergétique invisible du numérique, puis y faire quelque chose.",[121,125,129,133],{"type":122,"title":123,"url":124},"demo","Version éconçue du site (démo)","https:\u002F\u002Fheig-ecoconception-brp.netlify.app\u002F",{"type":126,"title":127,"url":128},"github","Code source (Nuxt 3)","https:\u002F\u002Fgithub.com\u002Fjerem-marti\u002FHEIG-VD_COMEM_IM51_EcoC_Groupe-CJJN",{"type":130,"title":131,"url":132},"pdf","Présentation du projet","\u002Ffiles\u002Fbeau-rivage-presentation.pdf",{"type":130,"title":134,"url":135},"Déclaration d'écoconception (RGESN)","\u002Ffiles\u002Fbeau-rivage-rgesn.pdf",{"led":137,"contributed":140,"notTouched":142,"team":144},[138,139],"Le build technique : le passage à Nuxt 3, le rendu côté serveur, et le pipeline d'optimisation des images","La mesure avant-après du poids, du carbone et des performances",[141],"L'audit du site existant et la refonte, avec l'équipe",[143],"Des parties du design visuel et des maquettes, partagées au sein de l'équipe de quatre","Équipe de quatre (Groupe CJJN) pour le module Eco-conception à la HEIG-VD : Nicolas Aerny, Joël Gaillard, Jérémy Martin et Clément Künzi. Enseigné par Stéphane Lecorney.",{"title":5,"description":76},"live","work\u002Fbeau-rivage","Une refonte écoconçue de fond en comble du site du Beau-Rivage Palace qui a réduit son poids et son empreinte carbone d'environ 95 % tout en gardant l'allure d'un hôtel cinq étoiles. Un audit du site existant, un nouveau design, et un build Nuxt 3 réglé pour la durabilité.","oePsCmr19TVjQPF_q8tivt-58O5UVq9ebq2t8gu9xGg",[151,157,163,165,171,177,183,189,195,201,207,213,219,225,231],{"path":152,"card":153},"\u002Fwork\u002Fa-ta-dispo",{"title":154,"alt":155,"image":156},"À ta Dispo — mettre en relation les bénévoles d'événements avec les organisateurs","Le logotype dessiné à la main d'À ta Dispo, un logo corail sur une forme d'autocollant rose, sur un fond corail uni.","\u002Fimages\u002Fwork\u002Fa-ta-dispo\u002Fadjacent.jpg",{"path":158,"card":159},"\u002Fwork\u002Fan-aura-of-words",{"title":160,"image":161,"alt":162},"An Aura of Words — les parcs de Lugano, racontés par leurs avis","\u002Fimages\u002Fwork\u002Fan-aura-of-words\u002Fadjacent.jpg","Les cinq parcs de Lugano montrés sur une carte, chacun une aura organique aux couleurs mêlées dimensionnée par le volume d'avis.",{"path":115,"card":164},{"title":86,"alt":87,"image":88},{"path":166,"card":167},"\u002Fwork\u002Fbereal",{"title":168,"alt":169,"image":170},"Recoder BeReal — une capture à double caméra et un pipeline d'images","Recoder BeReal : la publication composée à double photo à côté du fil d'un ami, sur une interface mobile sombre.","\u002Fimages\u002Fwork\u002Fbereal\u002Fadjacent.jpg",{"path":172,"card":173},"\u002Fwork\u002Fbrushbuddy",{"title":174,"image":175,"alt":176},"BrushBuddy — un cube monstre qui guide deux minutes de brossage des dents","\u002Fimages\u002Fwork\u002Fbrushbuddy\u002Fadjacent.jpg","Une main soulève la brosse à dents du socle au sommet du cube BrushBuddy, qui arbore un visage de monstre jaune inquiet.",{"path":178,"card":179},"\u002Fwork\u002Fcultural-trails",{"title":180,"alt":181,"image":182},"Cultural Trails — une app de randonnée patrimoniale full-stack","Deux écrans de l'application Sentiers culturels sur le ruban de sentier vert, pêche et bleu du projet : la carte d'exploration des sentiers le long de la rive de Lausanne, et la navigation en cours de marche suivant un itinéraire sur une carte satellite.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fadjacent.jpg",{"path":184,"card":185},"\u002Fwork\u002Fdatabloom",{"title":186,"image":187,"alt":188},"DataBloom — rendre visible l'impact énergétique des usages numériques","\u002Fimages\u002Fwork\u002Fdatabloom\u002Fadjacent.jpg","La fleur DataBloom : des pétales en feutre outremer sur une tige verte segmentée dans un petit pot en terre cuite, sur un fond de studio blanc.",{"path":190,"card":191},"\u002Fwork\u002Felen",{"title":192,"image":193,"alt":194},"ELEN — une caméra spéculative pour les présences sans fil invisibles","\u002Fimages\u002Fwork\u002Felen\u002Fadjacent.jpg","ELEN, une caméra portable au corps orange translucide avec deux poignées blanches, éclairée sur un fond de studio gris, son écran bleu profond visible à travers le plexiglas.",{"path":196,"card":197},"\u002Fwork\u002Ffamily-space",{"title":198,"image":199,"alt":200},"UBS Family Space — l'endroit partagé d'une famille pour gérer l'argent","\u002Fimages\u002Fwork\u002Ffamily-space\u002Fadjacent.jpg","Concept UBS Family Space : deux écrans de téléphone sur un dégradé rouge doux, un hub parent pour les analyses, les limites et les objectifs de l'enfant, et l'écran d'objectif d'épargne de l'enfant.",{"path":202,"card":203},"\u002Fwork\u002Fhuman-loci",{"title":204,"image":205,"alt":206},"Human Loci — un objet d'écoute synesthésique","\u002Fimages\u002Fwork\u002Fhuman-loci\u002Fadjacent.jpg","Human Loci : une boîte d'écoute transparente en acrylique avec trois disques de plâtre pour un parc, un port de plaisance et une gare.",{"path":208,"card":209},"\u002Fwork\u002Fmeeting-pond",{"title":210,"alt":211,"image":212},"Meeting Pond — des objets lumineux connectés pour la présence à distance","Deux unités Meeting Pond connectées posées côte à côte, l'une luisant en bleu et l'autre en rose, chacune montrant des ondes sur une grille de LED 32×32.","\u002Fimages\u002Fwork\u002Fmeeting-pond\u002Fadjacent.jpg",{"path":214,"card":215},"\u002Fwork\u002Fthea",{"title":216,"image":217,"alt":218},"Thea — un nouveau sens, calme, pour vivre avec une allergie","\u002Fimages\u002Fwork\u002Fthea\u002Fadjacent.jpg","Le wearable Thea suspendu dans un entrelacs de cordes orange sur un ciel cobalt, sa jauge oblongue qui luit, un cliché éditorial tiré de la présentation finale.",{"path":220,"card":221},"\u002Fwork\u002Fuefa-female-coaches",{"title":222,"alt":223,"image":224},"Why Not You? — la campagne UEFA pour les entraîneuses","La campagne Why Not You? : une typographie d'affichage percutante sur une entraîneuse, avec la ligne Lead Your Passion, Shape the Game.","\u002Fimages\u002Fwork\u002Fuefa-female-coaches\u002Fadjacent.jpg",{"path":226,"card":227},"\u002Fwork\u002Fwama",{"title":228,"image":229,"alt":230},"Wama — le machine learning comme témoin au bord de l'évier","\u002Fimages\u002Fwork\u002Fwama\u002Fadjacent.jpg","Le montage d'évier construit pour Wama, de biais : un robinet versant dans un bac transparent, le téléphone dans son support découpé au laser affichant le personnage.",{"path":232,"card":233},"\u002Fwork\u002Fwematch",{"title":234,"image":235,"alt":236},"WeMatch — un service de matching AX pour l'univers WeRoad","\u002Fimages\u002Fwork\u002Fwematch\u002Fadjacent.jpg","Carte-titre WeMatch : « WeMatch finds your group before you find your trip » en corail et encre sur un dégradé doux du blanc au rose, avec le personnage rond de l'agent Matchy.",1783535580390]