Mise en contexte
John Rebaud est designer freelance depuis 2004. En vingt ans d’activité, il a travaillé pour de grands comptes comme Clarins, Renault ou Volvo, sur des projets allant de la 3D à la communication print.
Il avait déjà conçu entièrement le design de son nouveau portfolio. Ce qui lui manquait, c’était la partie technique : il ne maîtrisait pas Framer et cherchait quelqu’un capable de transformer sa maquette en site fonctionnel, sans trahir ses intentions graphiques.
Notre intervention a donc porté uniquement sur l’intégration, avec une exigence claire : un rendu fidèle au pixel près, et un site qu’il puisse ensuite faire vivre lui-même.
Objectifs du projet
intégrer sur Framer un design déjà finalisé, sans écart visuel
mettre en place un filtrage dynamique des projets par domaine
valoriser vingt ans de réalisations et des références de premier plan
rendre le site autonome et modifiable par le designer
garantir une adaptation mobile fidèle à la version desktop
Une page projets avec filtrage dynamique
Le cœur du portfolio est sa page projets, qui rassemble des réalisations très hétérogènes : 3D, e-learning, motion design, print.
Un système de filtre dynamique a été intégré pour permettre au visiteur de trier les projets selon son besoin. Un client venu pour de la 3D n’a pas à parcourir des modules e-learning avant de trouver ce qui l’intéresse.
C’est un point déterminant sur un portfolio aussi fourni : sans filtre, la richesse d’un parcours de vingt ans devient un obstacle à la lecture. Avec, elle redevient un argument.
Le filtrage est instantané, sans rechargement de page, et l’ensemble reste géré depuis Framer pour que John puisse ajouter ses futurs projets en autonomie.
Mettre en avant les domaines de compétences
Une section dédiée présente les domaines dans lesquels John intervient : e-learning, motion design, communication digitale et communication print.
Cette diversité est rare chez un freelance et constitue un véritable différenciant. La section a donc été traitée comme un argument à part entière, et non comme une simple liste de compétences reléguée en bas de page.
Une adaptation mobile fidèle au design
Le design d’origine ayant été pensé pour le desktop, une attention particulière a été portée à la déclinaison mobile.
L’objectif n’était pas de simplifier, mais de conserver la même intention : mêmes proportions perçues, même hiérarchie, même respiration. Le système de filtres reste pleinement utilisable au doigt, et les visuels de projets gardent leur impact sur petit écran.
Rendu final
Le site a été intégré sur Framer à partir du design fourni par John Rebaud. Il dispose aujourd’hui d’un portfolio conforme à ses intentions graphiques, techniquement solide, et qu’il peut mettre à jour seul au fil de ses nouveaux projets.
