Vue d'ensemble
Phase 1, nous avons construit un site qui vend. Phase 2, une plateforme qui dure. Ce troisième projet prouve autre chose. Artdantech est sombre, dense, très écrit : c'est un site qui se lit. Ce hub est clair, court, immersif : c'est un site qui se traverse. Deux langues visuelles opposées, sorties du même atelier, à quinze jours d'intervalle. Le registre n'est pas une signature que nous imposons à nos clients. C'est un choix de projet. Le niveau, lui, ne bouge pas.
Le projet
Concevoir un hub personnel qui existe au-dessus des marques : il raconte un parcours, prépare le lancement d'un média et accueillera les activités à venir sans jamais être refondu.
Le défi
Construire l'exact opposé stylistique du site studio, sans que le résultat ressemble à une incohérence de marque ni à un exercice de style gratuit.
La contrainte
Une expérience en 3D temps réel qui reste narrative de bout en bout. Chaque effet devait porter du sens, sinon il ne devait pas exister.
Le résultat
Un parcours immersif en quatre scènes, en ligne sur sebastienbel.fr, que chacun peut ouvrir et juger par lui-même en trois minutes.
Un studio qui ne sait produire qu'un seul style n'est pas un studio, c'est une signature. La vraie preuve de compétence n'est pas de refaire le même beau site une fois de plus : c'est de tenir le niveau dans un registre qu'on ne vous a jamais vu pratiquer.
Résultats concrets
Un positionnement lisible en une phrase
Une seule ligne à l'entrée, deux objets dans la première scène, et le visiteur a compris d'où vient ce studio et ce qui le rend différent.
Une preuve de sur-mesure difficile à imiter
Le personnage central n'a pas été acheté sur une banque de modèles. Il a été fabriqué, avec l'outil que nous avons développé pour le fabriquer.
Un parcours qui conduit sans forcer
Quatre scènes, un ordre, une progression. Le visiteur arrive au studio et au média parce que le récit l'y mène, pas parce qu'un bandeau l'y pousse.
Une architecture qui grandit par ajout
Une nouvelle activité, une nouvelle marque, un nouveau format : tout s'ajoute comme une carte de plus, sans renommer ni reconstruire quoi que ce soit.
Avant / Après
Le problème
Construire son propre hub personnel pose une question que peu de projets posent : de quoi parle un site quand il ne vend rien directement ? Il ne s'agissait ni d'un catalogue de réalisations, ni d'une seconde vitrine commerciale. Sans cette clarté posée d'emblée, le projet partait vers l'un des deux pièges classiques, et les deux étaient confortables.
Deux réflexes étaient à écarter :
- Le portfolio de développeur ou de designer : la liste de projets, les captures d'écran, les logos alignés. C'était le geste naturel, et il disait exactement l'inverse de ce qu'il fallait dire. Un portfolio installe une posture de prestataire qui attend d'être choisi sur pièces. Ce n'était pas le sujet.
- La seconde vitrine de marque : reprendre le registre d'artdantech.fr en changeant le logo. Rassurant, cohérent, et parfaitement inutile. Deux sites qui prouvent la même chose ne prouvent rien de plus qu'un seul.
À cela s'ajoutait une contrainte de structure, moins visible mais plus déterminante. Le hub devait pouvoir accueillir demain des activités qui n'existent pas encore : d'autres marques, d'autres formats, d'autres terrains. Ce qui interdisait de le construire autour d'une offre, puisqu'une offre change et que le nom, lui, ne change pas.
L'enjeu était donc de tenir une ligne étroite : un site personnel qui ne soit ni un CV ni une plaquette, immersif sans être gratuit, court sans être creux, et bâti pour durer plus longtemps que ce qu'il montre aujourd'hui.
Notre approche
Nous avons traité ce projet interne avec la méthode que le studio applique à chaque mission. Six étapes, aucun raccourci, et la stratégie avant le premier pixel.
1. Séparer les couches avant de dessiner
Trois couches devaient être distinguées, et l'ordre entre elles décidé une fois pour toutes.
La personne, qui est le point fixe : un nom, un parcours, une réputation qui survivent à n'importe quelle marque. Les marques, qui sont des variables : Artdantech aujourd'hui, éventuellement d'autres demain. Le média, qui est un canal porté par l'une des marques.
Le hub porte la couche personne. Artdantech y apparaît comme un projet mené, jamais comme l'émetteur du site. Cette seule décision est ce qui rend l'ensemble extensible : une activité nouvelle ne demandera pas une refonte, seulement une carte de plus.
2. Construire l'outil avant de construire l'avatar
Le personnage central du site aurait pu être téléchargé en trois minutes sur une banque de modèles. Nous avons fait le contraire.
Nous avons développé un avatar builder en React et Three.js : personnalisation du personnage à partir d'une bibliothèque d'éléments, contrôle des couleurs sur les matériaux 3D, vêtements et accessoires interchangeables, export du modèle final au format GLB. La direction artistique s'inspire des familles d'avatars vues sur Dribbble et Peps, retravaillées pour coller à l'identité du studio.
C'est toute la différence entre assembler et fabriquer. Un avatar acheté ressemble à tous ceux qui l'ont acheté. Un avatar fabriqué porte une cravate exactement à la couleur du logo, parce que l'outil qui l'a produit permettait de la régler. Le sur-mesure ne se raconte pas : il se constate dans ce genre de détail.
3. Écrire le parcours en quatre scènes
Le site se lit comme quatre tableaux traversés au scroll : qui je suis, mon savoir-faire, ce que je construis, me contacter.
Chaque scène porte un objet qui incarne le propos plutôt que de le commenter. Une balance de justice pour le droit. Une Vénus pour l'histoire de l'art. Le personnage marche entre les deux, au centre. Le visiteur comprend le croisement avant d'avoir lu la moindre phrase, ce qui est précisément l'intérêt d'un site qui se traverse plutôt qu'il ne se lit.
La narration a commandé la mise en scène, à chaque étape. Jamais l'inverse.
4. Transformer le chargement en seuil narratif
Un site en 3D impose un temps de chargement. La plupart le masquent derrière une barre de progression que personne ne regarde.
Nous en avons fait une entrée. Une phrase seule sur fond clair, une durée minimale d'affichage pour qu'elle soit vraiment lue, puis un bouton à pousser. Le visiteur ne patiente pas : il franchit une porte. Le temps technique est devenu du temps de récit, et la première chose que le site donne à voir est une idée, pas un pourcentage.
5. Tenir la 3D au service du récit
Le personnage marche quand le visiteur avance, se retourne quand il revient en arrière, s'immobilise quand il s'arrête. La transition entre ces états devait avoir la fluidité d'une chose évidente, de celles qu'on ne remarque que lorsqu'elles sont ratées.
C'est la partie du travail qui ne se voit pas et qui prend le plus de temps. Elle ne mérite pas d'être détaillée ici. Elle mérite seulement d'être vue.
6. Ancrer l'identité sans dupliquer la marque
Le nom en signature typographique, un unique accent doré repris du logo Artdantech, une palette crème et anthracite, aucune surcharge.
Assez de points communs pour que l'on sente une famille entre les deux sites. Jamais assez pour qu'on les confonde. C'est exactement le dosage qu'un système de marque doit tenir quand une personne et une entreprise coexistent sans se confondre.
Un seul filtre a été appliqué à chaque arbitrage : est-ce que ce choix sert le récit, ou l'avons-nous fait parce que la 3D le permettait ? Tout ce qui ne passait pas ce filtre est resté en dehors du site, y compris des effets que nous avions envie de garder.
Stack technique
- React
- Three.js
- React Three Fiber et Drei
- Vite
- Framer Motion 3D (transitions de scènes)
- Jotai (état applicatif)
- Avatar builder maison (personnalisation, matériaux, vêtements et accessoires, export GLB)
- Rig et cycles d'animation appliqués au personnage
- Navigation entièrement pilotée au scroll
- Typographie 3D en relief
- Responsive desktop et mobile
- Déploiement continu
Le résultat
Ce hub n'est pas une démonstration technique. C'est un point fixe : une adresse au nom de son auteur, qui raconte d'où il vient, montre ce qu'il construit, et se tient prête à accueillir la suite.
- Un positionnement personnel lisible dès l'écran d'entrée
- Quatre scènes traversées au scroll, chacune portée par un objet qui incarne son propos
- Un personnage entièrement fabriqué sur mesure, avec l'outil développé pour le produire
- Un registre visuel à l'opposé du site studio, sans rupture d'identité entre les deux
- Une hiérarchie de marque explicite, la personne au-dessus, les projets en dessous
- Une architecture prête à accueillir de nouvelles activités par simple ajout
- Le lancement de La lettre Artdantech préparé et annoncé, pour la rentrée
Le site est en ligne sur sebastienbel.fr. Trois minutes suffisent à en faire le tour, et c'est le meilleur usage que vous puissiez faire de cette étude de cas.
Ce que ce projet révèle
Phase 1, un site qui vend. Phase 2, un produit qui dure. Phase 3, une expérience qui raconte. Trois projets, trois natures de livrable, trois registres visuels qui n'ont presque rien en commun. La constante n'est pas le style : c'est le niveau. Un studio capable de tenir trois registres est un studio capable de tenir le vôtre, quel qu'il soit.
Vous avez lu comment ce site a été pensé. Il vous reste trois minutes pour vérifier si le résultat tient la promesse. Si le standard que vous venez de voir correspond à celui que vous cherchez pour votre propre projet, parlons-en.