Concept fictifClub de boxe
Garde Haute
On ne frappe pas fort, on frappe juste.
- Secteur
- Club de boxe
- Offre
- Studio
- Durée
- 5 semaines
- Ville
- Saint-Ouen (93)
Club de boxe anglaise associatif installé dans un ancien entrepôt des Docks : un ring de six mètres, quatorze coachs diplômés d’État, 420 licenciés de 8 à 60 ans, du loisir à la compétition amateur. Marque, textes et chiffres sont inventés : ce concept montre notre méthode, pas un client réel.
(01) Brief
Le point de départ.
- Contexte
- Le club vivait d’un compte Instagram et d’un planning PDF mis à jour à la main. Les débutants appelaient pour savoir s’il restait de la place, les créneaux du soir saturaient pendant que ceux du midi restaient à moitié vides, et rien ne racontait cinquante ans de gants, de galas et de champions formés dans la salle.
- Objectif
- Faire du site la porte d’entrée du club : qu’un débutant réserve sa séance d’essai en moins d’une minute, voie en un coup d’œil les places restantes par créneau, et sente l’énergie d’un soir de gala dès la première seconde.
- Public
- Des 18-40 ans du nord parisien qui hésitent entre une salle de sport et un vrai club, des parents qui cherchent un cours éducatif pour leurs enfants, et les licenciés qui consultent le planning chaque jour depuis leur téléphone.
- Contraintes
- Le planning et les places restantes doivent rester lisibles à 375 px, dans un vestiaire, d’une main
- Photos sans visage identifiable de mineurs : traitement graphique obligatoire
- Aucune promesse de perte de poids ni de « transformation » : le club vend de la technique
- Mise à jour du planning par les coachs eux-mêmes, sans passer par le studio
(02) Direction artistique
Affiche de gala
« Une page qui se lit comme l’affiche collée à l’entrée du club : du noir de ring, un rouge de coin, une grotesque condensée qui frappe en capitales et un seul mot en gothique pour la signature. »
- Affiche de combat
- Trame
- Rouge de coin
- Brut mais précis
- Horloge de round
(03) Palette
Des couleurs qui ont un rôle.
Noir de ring
Fond. Un noir légèrement chaud, celui d’une salle éclairée au néon, jamais un #000 numérique.
- Contraste
- sur Bande de main15,8:1 AAA
- sur Rouge de coin4,4:1 AA large
- sur Papier d’affiche14,4:1 AAA
- sur Salle ouverte9,3:1 AAA
Bande de main
Texte, carte du planning. Le blanc cassé du coton des bandes, qui adoucit le contraste sans le perdre.
- Contraste
- sur Noir de ring15,8:1 AAA
- sur Rouge de coin3,6:1 AA large
- sur Papier d’affiche1,1:1 —
- sur Salle ouverte1,7:1 —
Rouge de coin
Accent unique : CTA, bandeau des disciplines, duotone de la photo, mot « juste. ».
- Contraste
- sur Noir de ring4,4:1 AA large
- sur Bande de main3,6:1 AA large
- sur Papier d’affiche3,3:1 AA large
- sur Salle ouverte2,1:1 —
Papier d’affiche
Affiche du gala scotchée au mur, un ton plus jaune que le texte pour lire « papier ».
- Contraste
- sur Noir de ring14,4:1 AAA
- sur Bande de main1,1:1 —
- sur Rouge de coin3,3:1 AA large
- sur Salle ouverte1,5:1 —
Salle ouverte
Signal fonctionnel seulement : le voyant d’ouverture dans la navigation.
- Contraste
- sur Noir de ring9,3:1 AAA
- sur Bande de main1,7:1 —
- sur Rouge de coin2,1:1 —
- sur Papier d’affiche1,5:1 —
Valeurs en OKLCH, HEX calculé. Contraste WCAG 2.x pour du texte courant.
(04) Typographie
Les voix du site.
Titres, navigation, planning, horloge de round, bandeau
Big Shoulders
900 · 800 · 700, axe opsz poussé à 72
On ne frappe pas fort
Une grotesque condensée née pour la signalétique de Chicago : elle tient quatre mots par ligne en capitales sans écraser l’œil, et ses chiffres tabulaires font une horloge crédible.
Un seul mot : « juste. », et le « 93 » de l’affiche
Pirata One
400
juste.
La gothique des ceintures de champion et des tatouages de salle. Utilisée une fois, elle signe la promesse du club ; utilisée partout, elle deviendrait un costume.
Paragraphe d’introduction
Switzer
400
La technique avant la force.
Un texte courant neutre et très lisible, pour que la seule phrase calme de la page reste calme.
Étiquettes, statuts, places restantes
Geist Mono
400
4 places · Ring A
Le registre « feuille de match » : horaires, rounds et compteurs ont la voix d’un tableau de pesée.
(05) Grille & mise en page
La structure sous l’image.
Douze colonnes ; le texte occupe les sept premières, la photo traitée court sur les deux tiers droits en pleine hauteur, sous le titre.
- 01Le titre chevauche la photo : la trame et le dégradé lui laissent toujours un fond noir
- 02Les informations utiles (horloge, planning) vivent dans des cartes à angles droits, posées comme des tableaux d’affichage
- 03Une seule pièce de travers, l’affiche du gala, pour casser la rigueur de la grille
- 04Le bandeau rouge ferme la page comme les cordes ferment le ring
- 05En portrait, la photo passe au-dessus, le titre se cale en bas et le CTA prend toute la largeur au pouce
(06) Composants
Les pièces de l’interface.
- C.01
Horloge de round
Le chronomètre mural de la salle, en direct : round 02/03, secondes décomptées, barre de progression rouge. Il annonce le sparring du soir mieux qu’une bannière.
- C.02
Planning du jour
Sélecteur de jour, une ligne par créneau : heure, cours, niveau en trois crans, places restantes. Complet barré, dernières places en rouge.
- C.03
Affiche de gala
Carte papier scotchée de travers, photo de gants anciens virée sépia, date et nombre de combats : l’agenda du club traité comme un objet.
- C.04
Bouton d’essai
Bloc rouge à ombre portée pleine, sans arrondi, flèche dans un carré noir : le CTA a la carrure d’un coin de ring.
- C.05
Étiquettes de discipline
Pastilles à filet fin et une pastille pleine pour la discipline principale, comme les mentions d’une affiche.
(07) Motion
Chaque mouvement a un rôle.
Entrée
Flash
Un éclair de flash blanc traverse la photo à l’arrivée, comme un photographe au bord du ring.
Emphase
Uppercut
« juste. » arrive surdimensionné et flou, encaisse, recule puis se pose. Le même ressort ne revient que pour le ticket d’essai et son tampon, dans la visite simulée.
Entrée
Montée des lignes
Les trois lignes du titre sortent d’un masque, décalées de 70 ms, sur une courbe expo ; « juste. » frappe à 260 ms.
Boucle
Décompte
Les secondes de l’horloge tournent en CSS pur (propriété enregistrée animée, affichée par un compteur), les deux-points clignotent.
Boucle
Bandeau
Les disciplines défilent en continu dans le bandeau rouge, révélé à l’entrée par un balayage.
Boucle
Visite simulée
En boucle de 13 s, un curseur ouvre le menu « Coachs », enfonce « Réserver un essai » dans son ombre : un ticket tamponné « OK » tombe et le 07:00 passe à 3 places, puis la page défile jusqu’au planning de la semaine et aux tarifs, survole un sparring et remonte.
(08) Choix expliqués
Ce qu’on a décidé, et pourquoi.
Choix 1 : Une photo tramée plutôt qu’un portrait propre
La trame et le duotone rouge donnent l’énergie d’une affiche imprimée, cachent l’identité des jeunes boxeurs et rendent cohérentes des photos prises par des bénévoles.
Choix 2 : Le noir chaud, pas le noir pur
Un #000 rend le rouge criard et la photo plate. Un noir légèrement brun garde la profondeur d’une salle au néon et laisse le blanc cassé respirer.
Choix 3 : Un seul mot en gothique
La gothique dit « ceinture de champion » et héritage. Réservée au mot qui porte la promesse, elle crée un point d’impact au lieu d’un déguisement.
Choix 4 : Le planning dès l’accueil
C’est la page la plus consultée par les licenciés. L’afficher dans le hero, avec les places restantes, remplace les appels au club et oriente les débutants vers les créneaux du midi.
Choix 5 : Une horloge vivante plutôt qu’une vidéo
Quelques lignes de CSS racontent « ça se passe ce soir » sans poids ni lecteur vidéo, et le chiffre qui bouge attire l’œil vers le sparring ouvert.
Choix 6 : « Réserver un essai », pas « S’inscrire »
Le frein d’un débutant, c’est la peur de ne pas être au niveau. Un essai gratuit et sans engagement est la seule promesse qui lève ce frein.
Choix 7 : Pas d’arrondis
Cartes, boutons et pastilles sont à angles droits : le langage des tableaux d’affichage et des affiches, cohérent avec un club qui vend de la rigueur.
(09) Arborescence
7 pages, une intention chacune.
/ Garde Haute
- AccueilPromesse, horloge du sparring, planning du jour, réservation d’essai.
- CoursBoxe anglaise, éducative, cardio, femmes, compétition : pour qui, quel niveau, quel équipement.
- PlanningSemaine complète filtrable par niveau et âge, places restantes en temps réel.
- CoachsQuatorze portraits, diplômes, palmarès et créneaux de chacun.
- Tarifs & essaiLicence, formules, aides (pass’Sport), réservation de la séance d’essai.
- Le clubCinquante ans d’histoire, galas, champions formés, galerie d’affiches.
- ContactAccès, horaires d’ouverture, vestiaires et équipement à apporter.
(10) Objectifs
Ce qu’on vise.
Objectifs visés — projet fictif, aucun chiffre mesuré
- Séances d’essai
- 40 / mois
- Objectif : réservations en ligne, contre une dizaine par téléphone aujourd’hui.
- Créneaux du midi
- ≥ 70 %
- Objectif de remplissage, en rendant les places libres visibles dès l’accueil.
- Réservation d’essai
- < 60 s
- Objectif de parcours sur mobile, de l’accueil à la confirmation.
- LCP mobile
- < 2 s
- Cible sur 4G : une photo AVIF, aucune vidéo, animations en CSS.