Comment ce site a été fait

le mandat

Vendre le résultat, ne rien montrer d'interne

Nordet étudie la vraie façon de travailler d'un professionnel, construit une automatisation qui fait le répétitif, et l'opère. Le site avait une seule job : rendre ce résultat réel sans jamais montrer la machinerie. Pas de noms d'outils, pas de configuration, pas de captures d'écran de logiciel.

La première version livrée avait la bonne structure et le mauvais feeling. Une révision indépendante en juillet 2026 l'a nommé franchement : visuellement générique. Des verts mi-teintes boueux, un héros qui était littéralement une carte de logiciel simulée, une typographie petite et prudente, et une histoire qui dramatisait la pause (la barrière d'approbation) au lieu de ce que les clients achètent : un débit continu, sans surveillance.

la direction

Deux pôles, un accent, une métaphore

La refonte a gardé le vert et tué les mi-teintes. Tout repose maintenant sur deux pôles : papier crème chaud et encre épinette presque noire, avec un seul accent cuivre qui n'apparaît que là où quelque chose de chaud ou d'humain se passe. La typographie est un système à trois voix : Newsreader pour l'affichage (avec exactement un mot italique cuivre par titre), Instrument Sans pour la lecture, IBM Plex Mono pour les étiquettes et les données.

La métaphore était déjà dans le nom. Le nordet, c'est le vent du nord-est québécois : constant, il travaille toute la nuit. Le nord-est, c'est aussi la direction d'une courbe de croissance. Le logo dessine cette idée littéralement : un N dont la diagonale déborde en pointe de flèche vers le nord-est. Le vent revient en dérive ambiante dans les sections sombres, et la palette entière se lit comme un carnet de terrain : papier, encre, une aiguille d'instrument en cuivre.

la signature

Le ruban d'opérations

Le héros culminait sur deux boutons : approuver ou refuser. Il montre maintenant l'histoire inverse : un flux continu de travail terminé. Chaque ligne est une vraie forme de tâche tirée des cas d'usage (une annonce comparée, un dossier lu, un formulaire prérempli), qui entre éparpillée et pâle, s'accroche au rail comme un crochet complété, et dérive vers le haut pendant que deux compteurs en serif grimpent.

Ce n'est ni une vidéo ni une librairie : une seule boucle requestAnimationFrame limitée à 30 images par seconde, un bassin fixe de nœuds DOM recyclés, et moins de 5 Ko de code. Le serveur rend une image fixe qui veut dire quelque chose : sans JavaScript ou avec le mouvement réduit, le héros est une photographie de la même vérité.

line.y -= (SPEED * dt) / 1000;
if (line.y < -LINE_GAP) {
  // recycle at the bottom with the next log entry, scattered and dim
  line.y += LINE_COUNT * LINE_GAP;
  line.text = nextText.current++ % TEXT_COUNT;
  line.snapAt = now + SNAP_DELAY;
}

provenance

D'où vient chaque élément visuel

Tout ce qui est visuel sur ce site est dessiné, pas sourcé. Le N-girouette, les bandes de la semaine récupérée ci-dessous, le schéma du plan, la bande du mois tranquille et le ruban sont du SVG et du canvas écrits à la main dans ce dépôt. La carte sociale est générée à la demande à partir de la même géométrie et des mêmes jetons de couleur. Les polices sont Newsreader, Instrument Sans et IBM Plex Mono via Google Fonts. Il n'y a aucune photo de banque et aucune image générée sur aucune page.

les passes

Ce que chaque passe a changé

15 juillet 2026 · la passe de refonte : le système de jetons crème/épinette/cuivre avec un mode sombre complet; les titres à l'échelle d'affiche avec le mot italique unique; le héros de démonstration d'approbation remplacé par le ruban d'opérations; un balayage complet du site qui a déplacé l'histoire de la pause vers le débit, dans les deux langues; les bandes de la semaine récupérée; le N-girouette; le système de mouvement (révélation au défilement, entrées de page, compteurs, logo qui se dessine, champ de vent), le tout derrière prefers-reduced-motion.

Les trois passes de polissage arrivent après les portails; chacune sera consignée ici avec ce qu'elle a trouvé et ce qu'elle a changé.