Les écrans que personne ne dessine.
Ce site a sept écrans que personne ne voit jamais. Ils n’ont pas d’adresse et n’arrivent que si quelque chose sort du chemin prévu : une adresse fausse, un réseau coupé ou une liste sans résultat. Trois d’entre eux se manipulent ici même.
-
La page d’erreur
Une adresse mal recopiée ou un lien périmé mènent ici. Personne ne relit jamais le texte de cet écran. J’en ai fait un atelier : vous prenez les trois décisions à ma place et l’écran se redessine à chaque choix.
Aller dessiner cet écranLa page d’erreur du site, chargée ici telle qu’elle est. L’atelier se trouve juste en dessous, sur la vraie page.
-
La page hors ligne
Le réseau tombe au milieu d’une lecture et le navigateur affiche sa propre page d’erreur, celle qu’aucun designer ne peut dessiner. Un service worker garde celle-ci en réserve et la sert à la place.
Ouvrir la page hors ligneCoupez le wifi et rechargez une page du site : c’est cet écran qui arrive.
-
L’état vide
Un état vide n’est pas une erreur : il doit dire pourquoi il n’y a rien et quoi faire ensuite. Tapez un mot que les huit projets ne portent pas et vous tomberez sur celui que j’ai écrit.
- Le parcours d’affiliation
- Le portail et ses factures
- Les enjeux de connexion
- Le design system
- Ateliers & Personas
- Quatre produits, du B2B au B2C
- Expériences interactives
- Peinture à l’huile
Aucun projet ne porte ce mot. Les huit sont toujours là, essayez plutôt portail, atelier ou peinture.
Cette recherche ne vit que sur cette page : elle est là pour vous amener sur l’écran qui n’a rien à montrer.
-
Le chargement
La place de chaque image est réservée avant qu’elle arrive, sinon la page se réorganise sous les doigts au moment où elle se pose. Le squelette va plus loin et dessine la forme de ce qui manque, bloc par bloc.
![Une capture du portail marchand : le tableau de bord et ses chiffres de la semaine.]()
Refonte & prototype · 2024–2026
Le portail et ses factures
Ils venaient une fois par an pour télécharger leurs factures. Je leur ai donné d’autres raisons de se connecter.
Le squelette a la forme exacte de la carte qui va arriver. Même vignette, même titre, mêmes deux lignes de résumé.
Ce site n’a pas besoin de squelette : son texte est déjà dans la page et seules les images arrivent après. C’est un écran de portail, là où le contenu se demande à un serveur.
-
Sans JavaScript
Sans JavaScript l’accueil garde sa liste et ses liens : les apparitions au défilement ne sont posées que si le script tourne. Le pied de page écrit alors mon adresse email en toutes lettres à la place du script qui la recompose.
La liste des projets de l’accueil, chargée sans son JavaScript.
-
Le mouvement réduit
Certaines personnes règlent leur système pour moins d’animation à cause du mal des transports, de la migraine ou des vertiges. Ce site l’écoute et pose les blocs à leur point d’arrivée au lieu de les y conduire.
Version animée
Les trois lignes montent l’une après l’autre.
Le parcours d’affiliationRecherche & tests · 2023–2024Le portail et ses facturesRefonte & prototype · 2024–2026Les enjeux de connexionPoint d’entrée · 2024Version posée
Les trois lignes sont déjà à leur place.
Le parcours d’affiliationRecherche & tests · 2023–2024Le portail et ses facturesRefonte & prototype · 2024–2026Les enjeux de connexionPoint d’entrée · 2024Votre système ne demande rien de particulier : sur le site, vous avez la colonne de gauche.Votre système demande moins de mouvement : ailleurs sur le site, c’est la colonne de droite.
Sur un Mac le réglage est dans Réglages › Accessibilité › Moniteur › Réduire les animations. Sur Windows il est dans Paramètres › Accessibilité › Effets visuels.
-
L’impression
Sans feuille d’impression, l’accueil sort en pleine page de dégradé. La même page avec la feuille tient sur du blanc, avec le texte rallumé et l’adresse du site ajoutée sous le titre.
Sans la feuille d’impression 
Avec 
Deux vraies impressions de l’accueil, sorties du navigateur. Ctrl+P ou Cmd+P sur n’importe quelle page du site, celle-ci comprise.
Aucun de ces écrans n’a d’adresse à lui : on tombe dessus. C’est pour ça que je les écris en même temps que le reste plutôt qu’à la fin.