La Guilde

Les contraintes

• Deux écrans, deux compositions

  Écran large : le monde et une colonne de texte. Téléphone : deux tiers de l'écran au monde, un tiers au texte, en bas, sous le pouce.

• Mouvement réduit

  Une composition fixe et complète par chapitre, aucune boucle, aucun parcours joué seul.

• Accessibilité

  Le récit est du vrai HTML : neuf sections lisibles sans WebGL, sans JavaScript, en couleurs forcées et au clavier. La 3D est décorative.

• Fluidité

  Aucun gel, aucune image figée : le pire écart visé entre deux images est de 17 ms sur ordinateur.

• Honnêteté

  Pas de comptes, pas de paiement : les quatre formulaires sont des esquisses qui n'envoient et ne conservent rien.

1. 01

   Le défilement conduit tout

   Chaque mouvement de caméra suit le défilement. Un lien ne téléporte jamais : la caméra voyage jusqu'au chapitre demandé (environ 1,8 s vers un voisin).

   Pourquoi « Rien ne se déclenche seul, rien n'aspire le visiteur. » Il garde la main sur le rythme.

2. 02

   Un message à la fois

   Sur écran large, chaque message se lit seul, à la même place, puis s'en va avant le suivant. Son temps est calculé : 1 s + 0,22 s par mot (au moins 2,5 s), + 0,8 s de marge, 6 s au plus.

   Pourquoi Le texte ne se bat jamais avec l'image. « Une époque bascule. » reste 3,3 s ; le texte du SEUIL, 19 mots, reste 6 s.

3. 03

   Ne jamais rater un texte

   Un message dépassé pendant un défilement rapide s'affiche au moins 1 s, dans l'ordre. Un message parti revient quand on revient en arrière.

   Pourquoi Défiler vite ne doit pas faire perdre l'histoire.

4. 04

   Une aimantation douce

   Quand le visiteur s'arrête près d'un message (200 ms sans geste), la page glisse en 500 ms jusqu'à l'endroit où il se lit le mieux. Jamais sur téléphone ni en mouvement réduit ; un geste l'arrête aussitôt.

   Pourquoi Aider sans forcer : la page n'impose jamais sa position.

5. 05

   PLAY, toujours récupérable

   Un petit triangle joue le parcours entier tout seul, en plein écran sur ordinateur. Molette, clic, touche ou doigt : pause immédiate. La reprise repart de là, jamais du début. Échap ou une croix quittent le plein écran.

   Pourquoi Regarder comme un film, sans jamais être enfermé.

6. 06

   Une navigation qui se fait oublier

   Le premier écran est nu. La navigation se construit au premier défilement, ne montre que le chapitre précédent, l'actuel et le suivant, et se retire après 2,6 s sans geste, jamais quand elle a le focus clavier.

   Pourquoi Le monde parle d'abord ; l'outil reste à portée de main.

7. 07

   Une version téléphone dédiée

   Le texte dans le tiers bas, un bloc à la fois, des polices plus petites, une QUÊTE redessinée en fil d'or. Tout le monde 3D est préparé pendant le chargement.

   Pourquoi Sur téléphone, « un gel vaut pire qu'une attente ».

←

1 / 7

→

Téléphone : le monde en haut, le texte en bas, sous le pouce

Cliquer pour agrandirToucher pour agrandir · Captures de la dernière version du site, faites sans carte graphique : la matière y est un peu moins vive qu'à l'écran.

Cinq couleurs

• Carbone#08090Ale fond
• Ivoire#E8E5DCle texte, la matière éclairée
• Gris#A2A5A1la matière neutre
• Laiton#B59C72l'accent, rare
• Bronze#94734Ale protagoniste, dans la scène seulement

• Deux polices

  Space Grotesk pour la narration et les titres, IBM Plex Mono pour les libellés et les annotations. Licence libre, hébergées avec le site.

• Une seule matière

  Des grains, du premier écran au dernier. « Les formes changent, la matière reste. » Aucun grain n'apparaît ni ne disparaît entre deux chapitres.

• La lumière révèle

  Elle montre la matière, elle ne la recouvre pas : pas de halo massif, pas de néon, aucun post-traitement.

• Trois langages de texte

  La narration, les annotations reliées par un trait fin, les titres de section. Le texte devient matière une seule fois : les cinq mots d'HORIZON.

1. 00SIGNALL'affirmationL'IA ne remplace pas le métier. Elle change tout ce qui l'entoure.
2. 01L'ACCÉLÉRATIONLa preuve, en courbesL'IA générative : moins de 3 ans.
3. 02LE SEUILLa conséquenceUne époque bascule.
4. 03LES VOIESCinq profilsPlusieurs façons d'y prendre part.
5. 04L'ACCOMPAGNEMENTCe que la Guilde prépareChaque entreprise est différente. L'accompagnement aussi.
6. 05LA QUÊTELa méthodePas à pas, du premier problème à la solution qui tient.
7. 06LA GUILDELe réseauRejoindre un réseau fiable. Construire la confiance par l'action.
8. 07HORIZONL'ambitionPartir explorer. Revenir partager. Construire ensemble.
9. 08ENTRERLe choixVous avez suivi le signal. Choisissez maintenant votre place.

↺ Puis retour au SIGNAL, à travers le portail : la boucle est bouclée.

Les chapitres en images

←

1 / 8

→

00 — SIGNAL : le premier message vient au premier défilement

Cliquer pour agrandirToucher pour agrandir · Captures de la dernière version du site, faites sans carte graphique : la matière y est un peu moins vive qu'à l'écran.

• LE SEUIL : trois regards abandonnés

  Avant

  La caméra s'arrêtait devant la porte et tournait la tête à gauche, puis à droite.

  Après

  La porte se lève sous nos yeux, puis on est aspiré vers elle. Le passage du SEUIL au parcours joué seul passe de 27,6 s à 16,7 s.

  Pourquoi Le retour du 9 octobre : « c'était mécanique, pas immersif ».

• La lisibilité

  Avant

  Des titres reliés à la scène par un trait, des phrases collées à la porte, des messages ratés quand on défile vite.

  Après

  Les titres au-dessus du premier texte, sans trait ; les phrases écartées de la porte ; LA QUÊTE en une seule colonne ; plus aucun message raté ; l'aimantation douce.

  Pourquoi Un récit qu'on ne lit pas ne raconte rien.

• Le rythme du parcours joué seul

  Avant

  268,6 s sur ordinateur au premier parcours mesuré.

  Après

  217,9 s, avec un chapitre de plus (L'ACCÉLÉRATION), sans jamais couper un texte.

  Pourquoi Chaque section est jouée plus vite, sauf là où un message n'aurait plus son temps de lecture.

• Le téléphone, sans aucun gel

  Avant

  Des écrans figés entre deux chapitres sur le téléphone de test : jusqu'à 8,4 s une fois le problème reproduit.

  Après

  Tout est préparé pendant le chargement : 0 gel, et la pire image en 33 ms, mesurée sur le vrai téléphone.

  Pourquoi Une attente au chargement se comprend ; un écran figé au milieu du récit, non.

Le cadre

• Une bible du projet

  Vision, direction artistique, narration, principes d'animation, décisions et journal. Chaque nouvelle session la lit avant d'écrire une ligne.

• Des chantiers courts

  Un brief par chantier : objectif, critères de réussite, contraintes. Une branche, puis une entrée au journal.

• Des tests automatisés

  463 tests unitaires et 165 tests de bout en bout dans la dernière version.

• Rien en ligne sans mon accord

  Aucune mise en ligne sans ma validation. En mon absence, seuls des choix réversibles, notés et soumis à ma revue.

• Ce qui est validé ne bouge plus

  Une fois l'écran large validé, chaque chantier suivant prouve qu'il n'y a pas touché (captures identiques au pixel).

• 9chapitres, un seul monde
• 3 min 38 sparcours joué seul sur ordinateur
• 0gel mesuré sur un vrai téléphone
• 628tests automatisés (463 + 165)

Ce que j'en retiens

• Juger sur l'image réelle

  Les noms des métiers de LA GUILDE ont « bougé dans tous les sens » alors que les tests étaient verts : ils mesuraient des positions calculées, pas l'image. Retirés après diagnostic sur l'image réelle. « Une absence vaut mieux qu'un mouvement. »

• Le téléphone est un autre produit

  Même récit, autre composition, autre rythme, autres contraintes techniques. Le valider sur un vrai appareil a tout changé.

• Écrire chaque décision

  La bible permet de reprendre le projet à tout moment, sans perdre ce qui a été décidé ni pourquoi.

La suite

• La Guilde est un projet en préparation : l'accompagnement n'existe pas encore, les formulaires sont des esquisses.
• Prochaines étapes : tester Safari, Firefox et une carte graphique intégrée ; brancher un vrai envoi des formulaires.