Loading
La plupart des portfolios de développeurs se ressemblent. Je voulais que le mien ressemble à un manuel de physique.
La plupart des portfolios de développeurs sont le même portfolio.
Même section hero avec un arrière-plan dégradé et un nom en grande police sans-serif. Même grille de cartes de projets. Même « Je construis des choses qui comptent. » Le design essaie de paraître sérieux en ressemblant à d'autres choses qui ont été considérées sérieuses — ce qui est rationnel, sauf que quand tout ressemble à tout le reste, rien n'est mémorable. Le premier rôle d'un portfolio est d'être mémorisé. Son deuxième rôle est de raconter une histoire sur la façon de penser de son créateur. La plupart des portfolios échouent sur les deux.
La question que j'ai posée à la place : à quoi devrait ressembler un portfolio si le travail concerne véritablement la physique et l'intelligence artificielle et la nature de l'intelligence elle-même ? Pas « comment puis-je signaler ma crédibilité en empruntant à des choses qui semblent crédibles ? » mais « quel langage visuel est réellement natif à ce domaine ? »
La réponse, il s'est avéré, n'était pas sur Dribbble.
Le système qui a émergé a trois couches : les principes fondamentaux (ce en quoi le système croit), les règles dérivées (comment ces croyances deviennent des décisions), et une couche d'implémentation (les choix spécifiques qui les exécutent). La plupart des systèmes de design ne documentent que la troisième. Ce post couvre les trois, dans l'ordre.
Un signal, trois encodages. La forme change ; les mesures restent identiques.
Les références qui ont façonné ce design n'étaient pas des références de design. C'étaient la documentation technique du CERN, les affiches de missions NASA des années 1970 à 1990, et la composition typographique de Physical Review Letters.
Ce qu'ils partagent — et que presque aucun design web ne partage — c'est qu'ils traitent les données comme le citoyen principal de la composition. Dans un affichage d'événements du CERN, les chiffres sont le contenu. La hiérarchie visuelle sert les données, pas l'inverse. Dans une affiche de mission NASA, la couleur encode des informations fonctionnelles : phases de trajectoire, états du système, paramètres de mission. L'esthétique découle de la fonction si étroitement qu'elles deviennent indiscernables. Personne chez la NASA n'a conçu le langage visuel en demandant « qu'est-ce qui a l'air cool ? » Ils ont demandé « qu'est-ce qui encode le plus d'informations avec le moins de bruit visuel ? » et la réponse s'est avérée être belle.
Trois décisions de design spécifiques qui sont venues directement de ces références. Première : les arrière-plans sombres, non pas comme un choix stylistique mais comme un choix sur le poids visuel. Les arrière-plans clairs mettent l'accent sur le contenant — l'espace blanc, les surfaces des cartes, le cadre. Les arrière-plans sombres mettent l'accent sur le contenu lui-même, ce qui est là où il doit être quand le contenu est technique. Le différentiel de luminance entre le texte et l'arrière-plan est ce qui crée la lisibilité ; les arrière-plans sombres inversent la convention et font du texte la source de lumière. Deuxième : la typographie monospace pour les données. Dans un article de physique, les équations occupent un registre visuel différent de la prose — on sait immédiatement si on regarde des données ou un argument. Cette distinction mérite d'être préservée sur le web, et le monospace est le signal qui la porte. Troisième : la couleur limitée à un usage sémantique. Les diagrammes du CERN utilisent la couleur pour distinguer les types de particules. Supprimez la couleur et vous perdez de l'information. Ce standard — la couleur seulement quand elle encode un sens qui serait perdu sans elle — est devenu la règle non négociable.
Chaque domaine sur ce site a une couleur. L'attribution n'était pas esthétique. Elle était sémantique, et les choix étaient délibérés.
Bleu électrique (#378ADD) pour la physique : la couleur du rayonnement Cherenkov, de la décharge plasma, de la précision froide de la mesure. Il se lit simultanément comme énergique et exact, ce qui est la physique — des phénomènes qui portent une énergie énorme, décrits avec une précision totale.
Sarcelle (#1D9E75) pour la robotique : une couleur qui se situe entre le vert organique de la biologie et le bleu froid de la technologie. La robotique est exactement cette intersection — des systèmes mécaniques qui se déplacent dans l'espace physique avec un but analogue au biologique. La couleur se lit comme vivante d'une façon que le bleu pur ne fait pas, et comme conçue d'une façon que le vert pur ne fait pas.
Violet (#7F77DD) pour l'IA : la couleur de l'invisible et de l'abstrait. Les systèmes d'IA produisent des sorties mais n'ont pas d'instanciation physique qu'on peut pointer. Le violet encode historiquement l'abstraction dans la visualisation scientifique — ultraviolet, cartes en fausses couleurs du fond diffus cosmologique, la représentation de choses qui existent dans des domaines qu'on ne peut pas percevoir directement.
Or rose (#B76E79) pour Ayri : chaleureux, intime, distinctement humain. Ayri n'est pas le côté technique de ce site. C'est le côté créatif et personnel — le projet concerné par la beauté, le sentiment et les parties de l'intelligence qui résistent à la réduction. L'or rose se situe à l'intersection de la chaleur et de la retenue — pas agressif comme l'orange, pas froid comme la lavande. C'est la seule couleur chaude de la palette, et cette singularité est le but.
#378ADDPhysique#1D9E75Robotique#7F77DDIA#B76E79AyriPrincipe fondamental : Si une couleur n'encode pas de sens, c'est de la décoration. La décoration est du bruit.
En pratique, cela signifie : le bleu n'apparaît jamais sur une page de robotique. Le violet n'apparaît jamais sur un tag de physique. La couleur n'est pas un inventaire décoratif — c'est un signal de domaine, et l'utilisation inter-domaine dégrade le signal pour chaque lecteur qui a déjà appris le système. Un lecteur ayant passé cinq minutes sur ce site devrait pouvoir identifier à quel domaine appartient une page sans lire le titre de la page. La couleur fait le travail. Le texte le confirme. C'est la différence entre un système et une palette — un système assigne du sens, une palette assigne une ambiance.
Deux rôles typographiques, jamais trois. Le moment où on introduit une troisième police, le langage visuel se fragmente. On perd le signal qui distingue les deux rôles dont on avait vraiment besoin, et on ajoute un troisième rôle rarement justifié par son coût cognitif.
Police d'affichage pour les titres : géométrique, confiante, lisible en grande taille sans décoration. Elle porte la narration et la hiérarchie sans attirer l'attention sur elle-même en tant que choix de police. Si un lecteur remarque la police des titres, quelque chose a mal tourné — c'est le contenu qu'il devrait remarquer.
Monospace pour les données, étiquettes, tags, horodatages, code et chiffres : parce que les données sont monospace. Ce n'est pas une convention de design importée arbitrairement. C'en est une sémantique avec une histoire. La typographie monospace est née dans des environnements où chaque caractère devait avoir la même largeur pour l'alignement des colonnes — machines à écrire, téléscripteurs, terminaux. Elle est devenue la convention pour le code et les données parce qu'elle rend la structure visible d'un coup d'œil. Cette reconnaissance visuelle — monospace signifie lisible par machine, structuré, précis — mérite d'être préservée et exploitée.
La règle appliquée de façon cohérente : si c'est un chiffre, une date, un tag de catégorie, une taille de fichier, une chaîne de version ou un extrait de code, c'est en monospace. Tout ce qui est argument, explication ou narration est en police d'affichage ou de corps. Le contraste visuel entre les deux est cohérent sur chaque page. Un lecteur apprend le système en quelques secondes : monospace signifie données, proportionnel signifie sens.
Cela résout aussi un problème récurrent dans l'écriture technique : distinguer le code en ligne de la prose. Quand le corps du texte est proportionnel et le code est monospace, la distinction est immédiate et ne nécessite ni couleur de fond, ni bordure, ni décoration supplémentaire. Le type lui-même porte le signal.
En pratique, cela signifie : chaque date, tag, chaîne de version, statistique et extrait de code sur ce site est en monospace. Chaque titre, paragraphe de corps et légende est en proportionnel. Il n'y a pas d'exceptions. Le moment où on brise la règle pour un seul élément — un nombre décoratif en police d'affichage, un titre composé en monospace pour l'effet — on invalide le signal pour tout ce qui l'entoure.
AX-Series et Ayri partagent l'infrastructure — le même arrière-plan sombre, le même système typographique, la même grille de mise en page, la même échelle d'espacement, les mêmes conventions de border-radius. Tout ce qui est structurel est identique. Et pourtant ils donnent l'impression d'être des sites entièrement différents.
AX-Series : froid, électrique, dense en données, précis. Le registre émotionnel est l'intérieur d'un accélérateur de particules — tout est délibéré, tout est mesuré, aucune surface n'existe pour elle-même.
Ayri : chaud, doux, généreux, intime. Le registre émotionnel est une conversation entre deux personnes sur quelque chose qui compte — personnel, attentionné, tranquille.
Une seule variable les sépare : la température de couleur. Les couleurs d'AX-Series tirent vers l'extrémité froide du spectre — bleu électrique, sarcelle, violet froid. Les couleurs d'Ayri tirent vers l'extrémité chaude — rose, violet chaud, accent ambré. Toute autre variable est maintenue constante. Même système de border-radius, même espacement, mêmes proportions de grille, même échelle de type. La chaleur ou le froid de la couleur d'accent se propage à travers toute la page via les états de survol, les superpositions de dégradé, les effets de lueur et les indicateurs d'état actif — et transforme la qualité ressentie de l'interface sans en altérer la structure.
C'est l'insight le plus important du processus de design : l'identité réside dans la variable qui change, pas dans les constantes. Contraindre tout ce qui est structurel. Varier le minimum nécessaire pour créer de la distinction. Quand on varie la température de couleur et seulement la température de couleur, le contraste entre les deux identités est clair et immédiat sans créer de fragmentation — les deux sites sont reconnaissablement issus du même système, ce qu'ils sont.
En pratique, cela signifie : on pourrait cloner identiquement la mise en page d'AX-Series, changer une seule variable CSS — la teinte d'accent — et arriver à quelque chose qui ressemble à Ayri. La chaleur se propage à travers chaque état de survol, chaque lueur, chaque teinte de dégradé. La structure est identique. L'identité est différente.
Un système de design n'est aussi fort que ses contraintes. Voici les violations qui le dégradent — chacune a un mécanisme d'échec spécifique.
Utiliser la couleur de façon décorative. Ajouter un dégradé bleu à une section parce qu'elle a l'air bien — non pas parce que le contenu est lié à la physique — dilue le mapping sémantique. Le lecteur a appris que le bleu signifie physique. Maintenant le bleu signifie « cette section avait besoin d'intérêt visuel. » Le signal se dégrade un peu à chaque fois que ça se produit, et finit par ne plus rien signifier.
Une troisième police. Deux polices en tension produisent du rythme. Trois produisent du bruit. Le signal qui distingue les données de la narration nécessite exactement deux registres. Un troisième registre érode les deux, parce que le lecteur ne peut plus résoudre ce que le contraste signale.
Accents chauds dans AX-Series. La séparation froid-chaud entre AX-Series et Ayri est le différenciateur d'identité principal. Tout accent chaud du côté AX — un état de survol orange, un badge ambré, un dégradé rose — efface la distinction entre les deux systèmes.
Arrière-plans clairs pour « respirer ». Le principe contenu-comme-lumière dépend des arrière-plans sombres. Une carte claire insérée pour le contraste ne crée pas de respiration — elle met l'accent sur le contenant de la carte plutôt que sur son contenu, inversant la hiérarchie partout où elle apparaît.
Mouvement sans contenu informationnel. Des transitions qui n'existent que comme polish — un fondu de survol qui ne signale rien, un spinner qui ne communique pas l'état — sont du bruit. Chaque animation devrait répondre à une question : quel état a changé ? Quelle action s'est terminée ? Qu'est-ce qui charge ? Si l'animation ne répond pas à l'une de ces questions, elle ne devrait pas exister.
Deux erreurs spécifiques, pas de l'auto-dépréciation vague.
Le placement du logo était faux pendant trois mois. Il se trouvait à l'intérieur de la pilule de navigation à une taille qui rivalisait avec les éléments de navigation — trop proéminent pour un élément de nav, trop petit pour une déclaration de marque. Un logo devrait établir l'identité au bord de la fenêtre d'affichage. C'est le premier signal que reçoit un utilisateur, et il a besoin d'espace pour fonctionner. Un logo dimensionné pour s'adapter à l'intérieur d'une barre de navigation a déjà concédé la hiérarchie visuelle à la barre. La solution — déplacer le logo hors de la pilule, lui donner une échelle proportionnelle par rapport à la fenêtre — était évidente rétrospectivement. J'y ai résisté parce que j'avais passé du temps sur le design de la pilule de navigation et que je pondérais le coût irrécupérable plutôt que la correction.
La grille des cartes de projets a été conçue d'abord pour le bureau, et ça se voit sur les petites fenêtres. À une largeur de 375 px, une grille avec des états de survol complexes, des hiérarchies de texte en couches et des structures de mise en page imbriquées devient illisible — les états de survol ne se déclenchent jamais sur les appareils tactiles, le texte s'enveloppe de façon inattendue, et le rythme visuel qui fonctionne à 1200 px s'effondre complètement. La bonne approche aurait été de concevoir d'abord la carte mobile : le minimum irréductible d'information que la carte doit communiquer, présenté dans le minimum d'espace, avec le minimum de complexité visuelle. Puis d'expand à partir de là à mesure que la largeur de la fenêtre le permet. Concevoir pour le bureau d'abord et le rendre « responsive » ensuite n'est pas du design responsive. C'est un design grand écran qui tolère les petits écrans sous la contrainte.
Un système de design est un argument. Chaque choix signale quelque chose sur la façon dont on pense au domaine. Les grilles denses signalent l'aise avec la complexité et la précision. L'espace blanc généreux signale la confiance dans le contenu — qu'il n'a pas besoin de bousculer d'autres contenus hors de la page pour s'affirmer. Le monospace signale que les données sont un citoyen de première classe, pas une note de bas de page. Les arrière-plans sombres signalent que le contenu est plus important que le contenant.
Le design d'un portfolio est le premier projet qu'il contient.
Plus à lire
Comment l'esthétique sci-art et le mouvement expressif créent une expérience de portfolio vivante.
L'interface doit inviter au jeu sans masquer la causalité, montrer les preuves sans devenir un mur de tableaux et fonctionner sur mobile.
Le projet a commencé comme expérience visuelle. Il m'a appris que l'espacement, la mesure, la reproductibilité et l'interface forment un même problème scientifique.