UI/UX DESIGN
Figma
Maquettes haute fidélité, direction artistique, composants réutilisables et préparation du design mobile-first.
Étude de cas · UI/UX · Front-end
Landing page pour un coach sportif
Conception et développement d’une landing page one-page pour un coach sportif indépendant. Objectif : inspirer confiance, clarifier l’offre et maximiser la prise de contact.
Travail réalisé : structure UX (mobile-first), UI design premium dark, hiérarchie typographique, composants réutilisables, intégration HTML/CSS/JS et mise en ligne.
UI/UX
Mobile-first
HTML/CSS/JS
Responsive
Aperçu (captures — mobile & desktop)
Contexte
Problème
Un coach indépendant a besoin d’une présence en ligne claire et crédible pour transformer des visiteurs en demandes de contact, sans complexifier l’expérience (site simple, rapide, orienté conversion).
Objectifs
- Clarifier l’offre et la valeur du coaching
- Créer un sentiment de confiance (structure + ton)
- Optimiser la conversion (CTA, sections, contact)
- Garantir une expérience mobile-first fluide
Approche
Structure UX
La page suit un parcours simple et progressif (one-page) : Accueil → À propos → Services → Méthode → Retours → Contact → FAQ.
- Message clair en 5 secondes
- Sections courtes, lisibles, sans surcharge
- CTA répétés aux endroits clés
Direction UI
Identité premium “performance” : dark UI, contraste fort, accent lime, typographie structurée, cartes et composants cohérents.
- Hiérarchie typographique et rythme visuel
- Cohérence des composants (cards, boutons, sections)
- Focus sur la lisibilité mobile
Développement
Stack
- HTML sémantique (structure claire)
- CSS responsive + composants réutilisables
- JavaScript léger (menu, interactions)
- Mise en ligne (démo accessible)
Focus
- Mobile-first puis adaptation desktop
- Lisibilité et hiérarchie visuelle
- CTA visibles et parcours fluide
Résultat
Une landing page premium, claire et orientée conversion, conçue mobile-first et déclinée en desktop. L'intégration front respecte le responsive, la lisibilité et une structure simple pour faciliter l'évolution.
Points clés
- Hero impactante + CTA immédiat
- Sections structurées et rassurantes
- Design premium dark / performance
- Navigation par ancres + menu mobile
- Contact accessible et visible
Logiciels utilisés
HTML, CSS, JavaScript
Visual Studio Code
Structure sémantique et organisation claire des sections.