Composants
Le vocabulaire visuel du prototype. Les valeurs sont extraites du prototype de tunnel fourni par le métier ; les composants d'état (pastilles, alertes, état vide, erreur de formulaire, liste de données) sont créés ici, parce que le tunnel ne connaît qu'un chemin heureux et n'en avait pas.
Règle : aucun écran ne redéclare une couleur, une taille ou un rayon. Tout passe par
css/abo.css.
Couleurs
Marque
Neutres chauds
Surface sombre
La seconde « couleur » du système n'est pas une teinte, c'est une valeur. Avec un orange et des gris pour seul matériau, le catalogue devenait monotone : aucune couleur d'état ne s'y affiche, il ne restait donc que de l'orange sur du gris. Un bloc sombre crée le contraste qui manquait sans faire entrer de couleur concurrente. À employer par petites touches — un bandeau en tête de carte, un en-tête de page — et jamais en aplats larges : une carte entièrement sombre écrase la rangée au lieu de recommander. Il cohabitera aussi mieux avec les visuels d'offre qu'une seconde teinte.
Couleurs de sens
La marque étant orange, l'orange ne peut pas signifier « attention ». Les états se distinguent donc d'abord par la forme — liseré à gauche, pastille, icône — et seulement ensuite par la couleur. C'est pourquoi l'échec de paiement est en rouge et non en orange : il est critique, pas consultatif.
Typographie
Abonnez-vous à GRANDPRIX et retrouvez dix numéros par an, deux hors-série, et l'accès complet aux articles du site. Le magazine de référence du sport équestre, chez vous et partout où vous allez.
Jost pour l'interface et les titres : une géométrique libre dessinée d'après Futura, la face de marque. Toute la gamme de graisses, ce que les fichiers Futura et Gotham du dépôt n'offrent pas — ils n'ont que light et bold, rien entre les deux. IBM Plex Serif pour les passages qu'on lit vraiment : elle est déjà dans la charte, et déjà libre.
La typo de marque est respectée, par substitut libre plutôt que par licence. Playfair Display et Darker Grotesque sont en revanche abandonnées : cinq familles, ce n'est pas une charte, c'est de la sédimentation.
Élévation
Le prototype fourni n'avait aucune ombre : tout reposait sur des bordures, ce qui est le marqueur le plus net d'une maquette. Trois niveaux, pas plus, et teintés chaud plutôt que du noir pur.
Boutons
Le bouton destructif est créé au lot 0 : il servira à la résiliation et à la suppression d'un moyen de paiement.
Champs
L'état d'erreur est créé au lot 0 : le prototype fourni n'en avait pas.
Texte d'aide et messages d'erreur
Le texte d'aide explique avant, l'erreur explique après. Une erreur dit ce qui ne va pas et comment le corriger — jamais « champ invalide ».
Choix exclusif
Sert au sélecteur de moyen de paiement du tunnel, et partout où l'on choisit une option parmi plusieurs avec un descriptif. Toute la ligne est cliquable, pas seulement le rond.
Recherche prédictive
- 12 rue de la Paix75002 Paris
- 12 rue de la Palestine75019 Paris
- 12 rue Pasteur92100 Boulogne-Billancourt
- Votre adresse n'apparaît pas ? La saisir manuellement
Sans suggestion, personne ne saisit une adresse correctement — et le magazine part au mauvais endroit. La liste met en évidence ce qui correspond à la frappe, et propose toujours une sortie manuelle : l'adresse absente du référentiel ne doit jamais bloquer un achat.
Onglets
Sert deux fois : dans le catalogue pour choisir la marque, et dans Mon espace pour choisir la rubrique.
Bandeau de progression
Tunnel uniquement. N'apparaît jamais dans l'espace abonné.
Carte d'offre et périodicité
La carte mise en avant garde un bandeau sombre en tête, pas un bloc entier : une carte entièrement noire écrase la rangée au lieu de recommander. Le bandeau suffit à marquer la hiérarchie, et le liseré orange la confirme sans crier. Les deux cartes se soulèvent au survol.
Bloc récapitulatif
Le total est créé au lot 0. Le prototype fourni affiche deux colonnes de prix ligne par ligne sans jamais dire ce qui est réellement prélevé — c'est l'un des trois défauts relevés sur l'écran de commande.
Pastilles d'état
Le composant structurant de l'espace abonné : c'est lui qui rend un abonnement ou une facture lisible d'un coup d'œil.
Bandeaux d'alerte
Un bandeau porte toujours une action, sauf s'il ne fait que confirmer un état.
Liste de données
Remplace les grilles de back-office actuelles. Ni tableau — pas de tri, pas de pagination, pas de sélecteur de taille de page — ni carte d'offre. Sur petit écran, les lignes s'empilent.
État vide
Ne dit jamais seulement « rien ici » : dit quoi faire ensuite.