Refonte du site internet d'Alex Spiga

Une autorité métier réelle,un site qui dit l'inverse ? Faisons mieux.

refonte-site-internet-alex-spiga.fr

_01 Le client

Coach business expérimenté pour coachs et thérapeutes.

Alex Spiga forme et accompagne les coachs, thérapeutes et accompagnants francophones autour du programme Business Flow. Communauté de pros engagés, deux études de cas client publiées avec chiffres, page témoignages dense, présence multicanale réelle (LinkedIn, YouTube, Instagram). Une marque qui existe vraiment dans son métier, avec une autorité installée par la pratique.

_02 Le constat

Une autorité métier réelle, un site qui disait l'inverse.

Le site historique tournait sur WordPress avec un thème legacy plus mis à jour depuis des années. PageSpeed mobile à 26/100, LCP de 14,5 secondes, version anglaise techniquement cassée (mauvais hreflang, méta vides, balise lang à fr-FR sur la home EN), page de vente noyée dans un blog de plus de 200 articles publiés au fil de l'eau. Un coach qui pose et qui rassure, sur un site qui faisait l'inverse à la première seconde.

Storytelling océan plein écran

9 slides

_03 Le vrai enjeu

Une marque digitale, pas une plaquette WordPress.

Une autorité comme Alex ne se vend pas en page longue : elle se met en scène. La refonte transforme le site en single-page applicative immersive de neuf slides plein écran, qui raconte un parcours océan → vague → plage → transat. Le site EST la méthode : posé, ancré, sobre. Bilingue FR/EN dès la première version, mobile-first parce que la majorité des prospects arrive sur smartphone en cold.

Chiffres clés

2 langues FR + EN, hreflang natif dès le départ
25 composants Design system Atomic livré au client
0 plugin Aucune dépendance CMS propriétaire

La méthode

Storytelling cinéma, single-page applicative, bilingue natif.

_01

Direction artistique cinéma

Storyboard neuf scènes commandé sur générateur d'image, palette océan calme, typographie display massive, espace négatif assumé. Aucun emoji, aucune capitale hurlante, micro-interactions discrètes. Le calme et la clarté visuels avant le copy.

_02

Architecture immersive

Single-page applicative neuf slides plein écran : horizontal en desktop, vertical snap-scroll en mobile. Navigation clavier flèches + tactile + clic sur les zones latérales. Pas de version mobile light : la même histoire en vertical qu'en horizontal.

_03

Bilingue FR/EN dès le départ

Tout le copy bilingue dans un fichier unique data/site.json, hreflang propre côté head, ajout d'une langue = duplication d'une clé. Aucun plugin de traduction, aucune string en dur dans une page ou un composant.

_04

Design system livré au client

Page /design-system fournie en interne au client comme outil de marque : tokens couleur, typo, espacement, durées d'animation centralisés ; huit atomes, six molécules et onze organismes documentés avec leurs variantes. Le client peut briefer un futur prestataire sans casser la cohérence visuelle.

Sous le capot

Les choix techniques.

Astro 6 SSG Génération statique pure. Le contenu et la mise en page restent intégralement lisibles sans JavaScript ; le JS sert uniquement aux animations et à la navigation immersive, en amélioration progressive.
Tailwind 4 + tokens Tokens CSS centralisés via @theme. Palette océan, typographie display, espacements et durées d'animation cohérents partout.
Atomic Design strict Huit atomes (Button, Eyebrow, Headline, NavArrow, ProgressFill...), six molécules, onze organismes (un par slide + topbar + bottombar). Variantes via props, jamais duplication.
Design system livré au client Page interne /design-system qui documente le système : chaque atome, chaque molécule, chaque organisme est exposé avec ses variantes réelles. Outil de marque que le client garde en propre, pas une promesse marketing.
Bilingue single-source Tout le copy FR/EN dans data/site.json. Aucune string en dur, hreflang auto. Une troisième langue = une duplication de clé, zéro refactor.
Storyboard cinéma Neuf scènes ambiance commandées et calibrées : océan calme, vague, mousse, plage, transat. Cohérence visuelle assumée comme une direction artistique de film.

_04 Résultat

Une marque digitale qui pose Alex à la place qu'il mérite.

Le nouveau site raconte la méthode avant de la décrire. Storytelling immersif océan, bilingue FR/EN dès la première version, design system livré en interne au client qui survivra aux évolutions de l'offre. Plus de plaquette WordPress qui dément l'autorité métier : un dispositif cohérent qui prolonge LinkedIn, YouTube et Instagram dans la même tonalité, et qui convertit ce que les autres canaux génèrent.

Étape suivante

Et pour votre site web ?

30 minutes en visio pour regarder votre site ensemble, identifier ce qui freine, chiffrer ce qui vaut la peine d’être fait. Sans engagement, sans relance commerciale. Si on s’entend, on continue.

Projet suivant

Voyager Gratuitement

Média · Voyage · 2026

← Toutes les réalisations