Tous les projets

ASFP, association sportive, Lausanne

Rendre le
sport
accessible
a tous

L'Association Sportive Fair Play rend le sport accessible aux personnes en situation de handicap dans le canton de Vaud depuis 1989. Elle avait besoin d'un site moderne, accessible et d'une charte graphique refondee pour accompagner son developpement.

J'ai concu le site web, le design system et la charte graphique. L'accessibilite n'etait pas un ajout mais le point de depart de chaque decision de conception.

Voir le site en ligne

Design

  • Charte graphique
  • Design system
  • Palette et typographie
  • Brand book

Web

  • 21 pages
  • Formulaire d'inscription 5 etapes
  • Blog et actualites
  • Contenu MDX

Accessibilite

  • WCAG 2.1 AA
  • Navigation clavier complete
  • Widget d'accessibilite
  • Texte en FALC

Technique

  • Next.js 16, React 19
  • TypeScript
  • Framer Motion
  • Resend
Page d'accueil du site ASFP avec hero colore et navigation accessible

Les objectifs du projet

  • 01Creer un site accessible qui respecte les criteres WCAG 2.1 AA, parce que le public de l'association est directement concerne par ces enjeux.
  • 02Presenter les dix activites sportives proposees de maniere claire, avec un parcours d'inscription en ligne complet.
  • 03Refondre la charte graphique pour passer de trois couleurs a un systeme complet, sans perdre l'identite de l'association.
  • 04Reduire les couts d'infrastructure par rapport a l'ancienne plateforme, tout en rendant le contenu modifiable sans developpeur.

L'accessibilite comme point de depart

L'ASFP accompagne des personnes en situation de handicap. Un site inaccessible aurait ete une contradiction. Chaque composant a ete concu avec la navigation au clavier, les lecteurs d'ecran et les contrastes eleves comme contraintes de depart, pas comme couche ajoutee a la fin.

Le site propose un widget d'accessibilite qui permet d'activer le mode contraste eleve, d'agrandir le texte et de basculer en langage FALC (Facile a Lire et a Comprendre). Les animations respectent la preference prefers-reduced-motion du systeme.

Page des activites sportives de l'ASFP
Dix activites sportives presentees avec icones et descriptions accessibles.
Formulaire d'inscription en 5 etapes
Formulaire d'inscription en cinq etapes avec validation en temps reel.

Une charte qui porte l'energie du sport

L'ancienne identite reposait sur trois couleurs sans regles d'usage. La nouvelle charte en definit huit, organisees en roles : le bleu profond porte l'autorite institutionnelle, le bleu electrique porte l'action, le corail porte l'enthousiasme, le vert porte l'inclusion.

La typographie combine Fraunces, un serif de titrage lisible et chaleureux, avec Manrope, un sans-serif optimise pour la lecture longue a 18px. L'interligne a 1.8 et la largeur de colonne limitee facilitent la lecture pour les personnes ayant une basse vision.

#0A2463
#1E5AE8
#FF6B47
#00A86B
#FAF7F2

Vingt et une pages, un seul systeme

Le site compte vingt et une pages : activites, actualites, manifestations, inscription, dons, benevolat, partenaires, galeries, contact. Chaque page est construite a partir du meme design system, ce qui garantit la coherence visuelle et simplifie la maintenance.

Le contenu est gere en MDX et en JSON, ce qui permet a l'association de modifier les textes, d'ajouter des activites ou de publier des actualites sans toucher au code.

Page de contact de l'ASFP avec formulaire et informations
Page de contact avec formulaire, carte et informations pratiques.

Ce que le projet a produit

Le site est en ligne et constitue le point d'entree principal de l'association. L'inscription en ligne a simplifie un processus qui se faisait auparavant par telephone et par courrier. Le contenu est entierement gerable par l'equipe de l'association.

Statut
En ligne sur as-fairplay.ch
Pages
21 pages, 10 activites, blog
Accessibilite
WCAG 2.1 AA, widget dedie
Role
Design, developpement, gestion de projet