UI/UX DESIGN
Figma
Maquettes haute fidélité, direction artistique, composants réutilisables et préparation du design mobile-first.
Projet client · Freelance
É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, pensé pour faciliter la prise de contact).
Objectifs
- Clarifier l’offre et la valeur du coaching
- Créer un sentiment de confiance (structure + ton)
- Faciliter la prise de contact (CTA, sections, formulaire)
- 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
Problème
Un coach indépendant évolue dans un univers sport / performance : il fallait une direction visuelle forte, sans tomber dans un site générique.
Décision
Un dark UI à fort contraste avec un accent lime électrique, pensé pour incarner l’énergie et la performance tout en gardant une hiérarchie visuelle claire.
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 pensée pour faciliter la prise de contact, 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.