Construire la direction artistique

Quand on conçoit son propre portfolio, le plus grand danger est de vouloir en mettre trop partout sans fil conducteur. Pour cette version, j'ai voulu prendre le contre-pied : définir une identité visuelle radicale, tenue par une grille très rigoureuse, tout en intégrant des matières tactiles contemporaines.

1. Veille Awwwards et amour du design suisse

Avant d'aligner les premiers pixels, j'ai passé des heures en veille active, notamment sur Awwwards, à disséquer ce qui fait la force des sites qui marquent les esprits. Ce qui ressortait systématiquement, ce n'étaient pas les animations gratuites, mais la force de la typographie et la clarté de la composition.

J'ai toujours eu un gros penchant pour le style typographique international (le design suisse) : une grille millimétrée, de l'espace pour laisser respirer le contenu, et des contrastes de graisses très appuyés. C'est ce qui a dicté le choix du tandem typographique du site : Archivo (dans ses déclinaisons extrêmes Thin et Fat) pour des titrages expressifs, et Hanken Grotesk pour un confort de lecture irréprochable sur les textes courants.

2. La rencontre avec le Liquid Glass

Mais s'arrêter à une grille suisse épurée aurait été trop sage. Je voulais que l'interface ait une physicalité, une texture tangible sous les doigts et sous la souris. C'est là que l'idée du Liquid Glass est née : marier la froideur géométrique de la grille avec la réfraction organique du verre.

C'est un clin d'œil direct aux interfaces spatiales et tactiles contemporaines (dans l'esprit de ce qu'on commence à voir émerger avec visionOS ou les préfigurations d'iOS 26) : des matières semi-translucides, des biseaux lumineux qui captent la lumière ambiante, et ce fameux verre cannelé qui vient brouiller l'arrière-plan avec élégance.

3. La dualité Dark & Light poussée à 100 %

Gérer un double thème est souvent traité comme une formalité : on inverse le noir et le blanc, et l'affaire est classée. Ici, la démarche était radicalement différente car chaque mode possède sa propre vibration chromatique :

En mode clair, j'ai banni le blanc stérile au profit d'un bleu cobalt électrique (#0029FF). C'est la signature chromatique du portfolio : saturée, vivante, elle donne une profondeur incroyable aux effets de réfraction du verre. En mode sombre, l'ambiance bascule vers un noir minéral chaud (#08090D), feutré et reposant, sans jamais tomber dans un gris fade.

Surtout, je voulais qu'absolument TOUT le site réagisse au thème actif sans la moindre exception. Même les miniatures de ce journal basculent instantanément : chaque article dispose d'une couverture cobalt et d'une couverture sombre minérale générées sur mesure. Quand tu cliques sur le switch de thème, l'image permute sous tes yeux sans aucun rechargement. C'est ce genre de jusqu'au-boutisme qui donne une sensation de produit fini, sérieux et cohérent.

4. L'ingénierie des contrastes : calibrage par scripts

C'est sur le volet technique que le vrai défi a commencé. Travailler avec des verres translucides, des flous d'arrière-plan et des fonds ultra-saturés comme le cobalt pose immédiatement la question de l'accessibilité et de la lisibilité.

Plutôt que d'ajuster les teintes à l'œil nu composant par composant, j'ai développé des scripts de vérification automatisés pour auditer les contrastes section par section. Chaque couple texte/fond, chaque bordure biseautée et chaque niveau de translucidité a été mesuré selon les normes WCAG et APCA.

Ces scripts ont permis d'ajuster finement les paliers d'opacité : rehausser légèrement le blanc des titrages sur fond cobalt, doser les ombres portées pour que les boutons flottants ressortent instantanément, et introduire des lueurs rasantes subtiles en mode sombre pour que le verre ne disparaisse pas dans l'obscurité.

Côté performances, la bascule de thème se fait de manière instantanée, sans flash de rendu (zéro FOUC) et sans surcharge JavaScript inutile : ce sont des variables CSS pures et des classes déterministes qui orchestrent le tout, garantissant une fluidité totale à 60 FPS.

5. Ce que je retiens de cet équilibre

Ce travail sur la direction artistique m'a rappelé une chose essentielle : un bon design d'interface n'est jamais purement esthétique ou purement technique. C'est précisément l'aller-retour constant entre inspiration graphique, rigueur de composition et validation par le code qui permet de créer une expérience mémorable sans jamais sacrifier l'utilisateur.