Le contexte

Dans le cadre de l’EURO féminin 2025, la HEIG-VD a collaboré avec l’UEFA et Amazon pour proposer aux étudiants en ingénierie des médias un défi passionnant pour leur projet de fin d’études.

Comment pouvons-nous encourager davantage de femmes à devenir entraîneuses dans le football féminin en tirant parti d’approches innovantes avec les médias numériques?

Notre mission

Notre mission consistait à développer un mini-site web qui présentait les diverses propositions des étudiants et mettait en avant les projets sélectionnés par l’UEFA et leur développement ultérieur par l’institut d’ingénierie des médias (MEI).

Notre plan

Nous avons cherché à insuffler au projet un design très interprétatif et légèrement caricatural afin de garantir une inclusivité maximale, tout en conservant une esthétique visuellement saisissante et mémorable. L’objectif consistait à créer une expérience à la fois accueillante et originale.
Notre choix s’est porté sur une stack React (Typescript) – Three.js.

Palette de couleurs

Nous avons sélectionné une palette de couleurs conçue pour conférer au personnage une qualité presque abstraite.

Typographie

Nous avons choisi la typographie brutaliste Mona Sans Expanded pour renforcer l’identité audacieuse et assumée du projet.

Particules

Afin d’habiller le fond de l’expérience, nous avons ajouté des particules animées, dotées d’un comportement calme et continu, sans pour autant être totalement prévisible. Visuellement nous avons imaginé de petits glyphes bruts dont la forme serait amenée à varier avec le temps contribuant à un comportement vivant et discret.

Ce type d’animation constitue un défi, car chaque particule doit être mise à jour à chaque rafraîchissement de l’écran tout en faisant évoluer sa forme, sa taille et son intensité. L’ensemble doit rester suffisamment léger pour ne pas affecter la fluidité de l’expérience, y compris sur des appareils aux ressources de calcul limitées. Pour répondre à ces contraintes, nous avons choisi d’utiliser une forme simple basée sur un quadrillage de 16 × 16, soit un maillage avec de bonnes performances.

Cette forme, volontairement minimaliste et pixelisée se voit appliquer plusieurs transformations pour changer de silhouette et donner un effet de “morphing” au fil du temps.

Shader WebGL personnalisé pour dessins animés

Nous avons réalisé un fragment shader personnalisé mettant en œuvre un rendu toon (“cel-shading” permettant un rendu proche du dessin animé). L’éclairage est volontairement simplifié afin de produire des zones de lumière et d’ombre bien marquées. Celles-ci sont enrichies par un léger bruit procédural, appliqué sous forme de dithering animé. C’est un léger bruit qui rompt les aplats trop uniformes et apporte une texture intéressante au rendu. L’ensemble devait rester compatible avec les textures, les normales et le système d’éclairage existant, tout en conservant de bonnes performances.

3D Character

Une partie importante de l’identité visuelle du site web est incarnée par notre personnage emblématique. Il a été développé sur la base d’un modèle 3D prêt à l’emploi provenant de Mixamo, puis affiné dans Blender. Chaque texture a été méticuleusement retravaillée afin d’obtenir une esthétique bicolore caractéristique, garantissant ainsi un aspect unique et cohérent en accord avec notre univers visuel.

Gamification

Quelques easter eggs ont été dissimulés dans le site. En cliquant sur la barre d’espace ou sur Entrée, le personnage effectue des actions spéciales qui ne sont pas disponibles autrement.

WebGL Texts

Afin d’enrichir le rendu visuel, nous avons intégré le composant react-fluid-distortion, réalisé par @whatisjery, qui permet d’appliquer une distorsion au rendu final. Apposé sur nos titres et nos rendus 3D, cet effet introduit une légère perturbation de l’image, rappelant certains phénomènes optiques. On peut ainsi se représenter la surface d’un lac que l’on viendrait troubler avec une branche. Utilisé avec parcimonie, il apporte une sensation de mouvement global et de profondeur, sans détourner l’attention des éléments principaux de l’interface.

Tech stack

Front-end & architecture

• React (TypeScript)
• React Router
• Vite

Web 3D

• React Three Fiber (Three.js)
  • Core
  • Drei
  • Postprocessing

Animations

• GSAP

Gestion d’états

• Zustand

Internationalisation

• i18next

Dream Team

Laurent Berthelot, chargé de projet
Diego Brambilla Designer (direction artistique et design)
Yoan Douillet Designer (Modélisation 3D)
Meryl Dubois Développeuse (UI + Intégration)
Mikkel Vestergaard Développeur (Web 3D)
Robin Zweifel Développeur (Web 3D)