[WEB] Maquettes Figma des sept écrans web, référence pour les tickets Front

olivier commented

2026-09-01 13:23:04 +00:00

Member

Exigence couverte

EF-11, ENF-06

Épreuve servie

EC05 · Data, ETL et BI

Charge estimée

2 j.h

Ce qu'on veut obtenir

Une maquette de référence pour les sept écrans web, afin que celui qui prend un
ticket Front implémente au lieu d'inventer la mise en page.

Sept tickets Front existent déjà et décrivent chacun ce que son écran fait.
Aucun ne dit à quoi il ressemble : pas de grille, pas de jetons de couleur,
pas d'états de chargement, et « respecter la RGAA » sans contraste mesuré. Trois
personnes qui les prennent en parallèle produiront trois interfaces différentes.

Ce ticket produit la référence commune, en amont :

Écran maquetté	Ticket Front alimenté
Connexion	#25
Tableau de bord, graphiques	#24
Tableau de bord, recommandations	#23
Profil	#21
Règlement RGPD	#20
Contact	#19
Administration	#16

Méthode

Deux outils, deux rôles distincts :

Claude Design pour les premiers jets. Un canevas, plusieurs planches côte à
côte, itération rapide sur la disposition sans ouvrir Figma. C'est là qu'on
jette ce qui ne marche pas.
Figma pour la version qui fait référence, poussée depuis le canevas retenu
via le connecteur MCP. Les jetons y deviennent des variables, le fichier
devient partageable et commentable par le groupe.

Le sens est important : Figma est la source de vérité, le canevas est le
brouillon. Une maquette qui ne finit pas dans Figma n'existe pas pour l'équipe.

Critères d'acceptation

Un fichier Figma unique porte les sept écrans du tableau ci-dessus, un cadre par écran
Les couleurs, la typographie, les espacements et les rayons sont des variables Figma, jamais des valeurs posées à la main : le thème a une seule source
Chaque écran qui affiche une mesure nomme la route de services/api/openapi.json qui la fournit, et n'affiche aucune donnée qu'aucune route ne fournit
Toute valeur mesurée est maquettée avec son indicateur de qualité et sa méthode visibles, brut ou imputé (ENF-06 : toute valeur affichée remonte à sa lecture et à sa méthode)
Chaque écran porte ses trois états : vide, en chargement, en erreur de source
Les contrastes sont mesurés et atteignent le niveau AA, relevés dans un tableau joint au fichier

Comment on le vérifie

Tests      aucun — ce ticket ne produit pas de code, donc pas de fichier pytest
Commande   aucune
Preuve     lien du fichier Figma, capture des sept cadres, export des variables,
           tableau des contrastes mesurés, et relecture par une personne qui
           prendra un ticket Front

L'absence de test est assumée et non un oubli : la convention du dépôt
(tests/unit/test_<module>.py) ne s'applique pas à un livrable de conception.
La preuve est la maquette elle-même et sa relecture.

Hors périmètre

L'implémentation Vue : c'est l'objet des sept tickets Front, pas de celui-ci
Le choix de la bibliothèque de composants
Les écrans alertes et qualité des capteurs, que l'exigence EF-11 réclame (« parc, site, prévisions, alertes, qualité ») mais qui n'ont aucun ticket Front à ce jour. À ouvrir séparément, sinon EF-11 restera partiellement couverte
Les maquettes mobiles au delà d'un point de rupture unique

Dépendance

Le contrat de l'API est gelé mais n'est pas encore fusionné sur develop : il
vit sur la branche olivier/0-api-socle-et-contrat. Les vingt-et-une routes et
leurs schémas sont déjà définitifs (ADR-006), donc les maquettes peuvent s'y
adosser sans attendre la fusion.

### Exigence couverte EF-11, ENF-06 ### Épreuve servie EC05 · Data, ETL et BI ### Charge estimée 2 j.h ### Ce qu'on veut obtenir Une maquette de référence pour les sept écrans web, afin que celui qui prend un ticket Front implémente au lieu d'inventer la mise en page. Sept tickets Front existent déjà et décrivent chacun **ce que** son écran fait. Aucun ne dit **à quoi il ressemble** : pas de grille, pas de jetons de couleur, pas d'états de chargement, et « respecter la RGAA » sans contraste mesuré. Trois personnes qui les prennent en parallèle produiront trois interfaces différentes. Ce ticket produit la référence commune, en amont : | Écran maquetté | Ticket Front alimenté | |---|---| | Connexion | #25 | | Tableau de bord, graphiques | #24 | | Tableau de bord, recommandations | #23 | | Profil | #21 | | Règlement RGPD | #20 | | Contact | #19 | | Administration | #16 | ### Méthode Deux outils, deux rôles distincts : - **Claude Design** pour les premiers jets. Un canevas, plusieurs planches côte à côte, itération rapide sur la disposition sans ouvrir Figma. C'est là qu'on jette ce qui ne marche pas. - **Figma** pour la version qui fait référence, poussée depuis le canevas retenu via le connecteur MCP. Les jetons y deviennent des variables, le fichier devient partageable et commentable par le groupe. Le sens est important : Figma est la source de vérité, le canevas est le brouillon. Une maquette qui ne finit pas dans Figma n'existe pas pour l'équipe. ### Critères d'acceptation - [ ] Un fichier Figma unique porte les sept écrans du tableau ci-dessus, un cadre par écran - [ ] Les couleurs, la typographie, les espacements et les rayons sont des **variables Figma**, jamais des valeurs posées à la main : le thème a une seule source - [ ] Chaque écran qui affiche une mesure nomme la route de `services/api/openapi.json` qui la fournit, et n'affiche aucune donnée qu'aucune route ne fournit - [ ] Toute valeur mesurée est maquettée avec son indicateur de qualité et sa méthode visibles, brut ou imputé (ENF-06 : toute valeur affichée remonte à sa lecture et à sa méthode) - [ ] Chaque écran porte ses trois états : vide, en chargement, en erreur de source - [ ] Les contrastes sont mesurés et atteignent le niveau AA, relevés dans un tableau joint au fichier ### Comment on le vérifie ``` Tests aucun — ce ticket ne produit pas de code, donc pas de fichier pytest Commande aucune Preuve lien du fichier Figma, capture des sept cadres, export des variables, tableau des contrastes mesurés, et relecture par une personne qui prendra un ticket Front ``` L'absence de test est assumée et non un oubli : la convention du dépôt (`tests/unit/test_<module>.py`) ne s'applique pas à un livrable de conception. La preuve est la maquette elle-même et sa relecture. ### Hors périmètre - **L'implémentation Vue** : c'est l'objet des sept tickets Front, pas de celui-ci - Le choix de la bibliothèque de composants - Les écrans **alertes** et **qualité des capteurs**, que l'exigence EF-11 réclame (« parc, site, prévisions, alertes, qualité ») mais qui n'ont **aucun ticket Front à ce jour**. À ouvrir séparément, sinon EF-11 restera partiellement couverte - Les maquettes mobiles au delà d'un point de rupture unique ### Dépendance Le contrat de l'API est gelé mais n'est pas encore fusionné sur `develop` : il vit sur la branche `olivier/0-api-socle-et-contrat`. Les vingt-et-une routes et leurs schémas sont déjà définitifs (ADR-006), donc les maquettes peuvent s'y adosser sans attendre la fusion.

olivier self-assigned this

2026-09-01 13:23:04 +00:00

olivier added the

labels

2026-09-01 13:23:18 +00:00

olivier changed title from ~~[EF-11] Maquettes Figma des sept écrans web, référence pour les tickets Front~~ to [WEB] Maquettes Figma des sept écrans web, référence pour les tickets Front

2026-09-01 13:25:04 +00:00

olivier added this to the EnerVision project

2026-09-01 14:07:21 +00:00

olivier referenced this issue

2026-09-02 08:03:45 +00:00

[Front] Page de connexion #25

olivier referenced this issue from a commit

2026-09-02 09:22:06 +00:00

dashboard: ajoute six comptes de démonstration pour la page de connexion

olivier referenced this issue

2026-09-02 09:23:33 +00:00

dashboard: intègre la page de connexion de la maquette #25 et son jeu de comptes #75