Clarifier les trois programmes et leur différence dès les premières sections.
PROJET 04 · SITE WEB
PROJET WEB UX/UI & WEBFLOWPACE/ONE · 2026
COACHING SPORTIF · LYON
UN SITE QUI
GARDE LE RYTHME.
Conception d’un site web de coaching sportif, du cadrage et des wireframes jusqu’au design UI, au responsive et au développement Webflow.
UX / UIRESPONSIVEWEBFLOW
02. LE CONTEXTE
FAIRE COMPRENDRE L’OFFRE AVANT DE FAIRE TRANSPIRER L’INTERFACE.
PACE/ONE est un concept de coaching sportif individuel à Lyon. Le site devait traduire une approche directe, premium et énergique, tout en expliquant clairement les programmes et la méthode.
L’enjeu : construire une expérience qui donne envie d’agir sans tomber dans les codes génériques du fitness, avec un parcours simple du premier scroll jusqu’à la prise de rendez-vous.
Créer du rythme avec la typographie, le contraste et les interactions sans nuire à la lecture.
Penser le parcours desktop et mobile comme deux expériences cohérentes, pas comme un simple redimensionnement.
01CADRAGE
02WIREFRAMES
03UI DESIGN
04WEBFLOW
03. STRUCTURE & WIREFRAMES
STRUCTURER AVANT DE DÉCORER.
STRUCTURERYTHMECONTRASTECLARTÉ
Le travail commence par l’architecture du site : ordre des sections, hiérarchie des messages, emplacement des CTA et progression du récit.
Les wireframes desktop et mobile servent ensuite à valider le parcours avant d’ajouter la direction visuelle. Le design final reste ainsi fidèle à une structure pensée en amont.
04. UI DESIGN
DU WIREFRAME À UNE INTERFACE QUI A DU RYTHME.
Une fois la structure validée, l’interface s’appuie sur un contraste fort, une typographie massive et un système graphique simple pour garder l’attention sans perdre la clarté.
LE WIREFRAME
Des blocs sobres pour tester la hiérarchie, la longueur des sections et la place des actions avant toute décision esthétique.
LA TYPOGRAPHIE
PACE/ONE
ARCHIVO BLACK TITRES DM MONO LABELS & REPÈRES
GEIST · TEXTE COURANT
LA PALETTE
Noir profond, ivoire chaud, vert acide et violet électrique. Peu de couleurs, mais une hiérarchie très nette.
05. RESPONSIVE & INTERACTIONS
LE MÊME RYTHME. UNE AUTRE FAÇON DE LE PARCOURIR.
01
Sur mobile, les contenus se réorganisent pour garder une lecture rapide, verticale et immédiatement compréhensible.
02
La méthode circulaire du desktop devient une timeline simple sur petit écran afin de préserver la logique sans forcer la composition.
03
Les animations, hover et transitions renforcent le rythme, mais restent au service du contenu et des appels à l’action.
06. LES ÉCRANS FINAUX
DESKTOP ET MOBILE PENSÉS COMME UN MÊME SYSTÈME.
Les maquettes finales montrent la même identité à deux échelles : grands rythmes typographiques et compositions immersives sur desktop, lecture plus directe et séquentielle sur mobile.
07. LE RÉSULTAT
UN SITE CLAIR, RESPONSIVE ET PRÊT À CONVERTIR.
L’offre est structurée en trois parcours lisibles, avec des CTA visibles sans surcharger l’expérience.
Le système responsive conserve la personnalité du desktop tout en adaptant réellement les compositions au mobile.
Le développement Webflow traduit les maquettes en un site vivant, avec interactions, FAQ, responsive et structure prête à évoluer.
08. LE SITE LIVE