Donner vie au book d’une directrice artistique, sans trahir sa direction
Sa maquette Figma est devenue un site en ligne, sur ordinateur, tablette et téléphone, avec des étoiles qui la suivent comme un dragon chinois.
- Livrable
- site de trois pages en ligne, adaptation tablette et téléphone, visionneuse photo et vidéo
- Rôle
- design d’interaction, adaptation aux petits écrans, direction du développement
- Ma part
- J’ai choisi de ne rien inventer sur la direction artistique : chaque écart à la maquette vient d’une demande de la cliente, et chaque mouvement lui a été montré avant d’être gardé.
- Cadre
- commande d’une directrice artistique, direction artistique et maquettes Figma : la cliente, conçu et dirigé par moi, développé avec Claude Code
- Client
- directrice artistique
- Durée
- du 18 octobre au 4 novembre 2026
- En ligne
- depuis novembre 2026
Contexte
Mon travail n’était pas de redessiner son book, mais de le faire vivre partout, sans le trahir
Un book qui devait rester le sien
La cliente avait dessiné son portfolio dans Figma : trois pages, en 1440 px de large seulement. Ses intentions de mouvement tenaient dans quelques commentaires posés sur la maquette.
La maquette et le siteL’ouverture dessinée dans Figma, puis la même page en ligne.
- Suivre la maquette au pixel près sur ordinateur
- Ne prendre aucune initiative sur la direction artistique
- Garder les textes en 12 px, comme la maquette
- Un site léger, sans dépendance inutile, que la cliente pourra garder longtemps
Ce qu’il fallait concilier
- La fidélitéReproduire la maquette au pixel, typographies mélangées comprises.
- Le mouvementTraduire quelques mots de commentaire en un geste qui lui ressemble.
- Les petits écransInventer une tablette et un téléphone qui n’existaient pas dans la maquette.
Comment faire vivre le book d’une directrice artistique sur tous les écrans, sans y mettre ma propre patte ?
Exploration
Chaque mouvement lui a été montré en prototype, à choisir, avant d’être gardé ou retiré
Seize étoiles qui suivent la souris
Un seul commentaire de la cliente : « Il faudrait que toutes les étoiles suivent la souris dans cette zone seulement. » Tout le reste était à imaginer, avec elle.
Le dragon chinoisLa première étoile se colle au curseur, les autres suivent son chemin en ondulant.
- Les étoiles qui suivent en fileUne simple chaîne derrière le curseur : juste, mais sans caractèreÉcartée
- Le corps d’un dragon chinoisLe corps repasse par le chemin de la tête et onduleRetenue
- Un indice de dragon parmi quatre croquisMoustaches, perle, queue en éventail, ou tête et queue : la tête grossit, la queue s’affineRetenue
- Une arrivée en dragon, en cinq prototypes« L’enroulement » choisi, ralenti, puis retiré : les étoiles sont déjà en place à l’ouvertureÉcartée
- Chaque étoile retourne à la place libre la plus prochePas forcément la sienne : le cercle se reforme sans croisementsRetenue
Un geste réglé finement
- 16ÉtoilesLe cercle de la maquette, à l’identique
- 4Croquis d’indices de dragonRetenu : la tête et la queue
- 5Prototypes d’arrivéeUn choisi, puis retiré à la demande de la cliente
- 0Suivi sur téléphoneSans souris, les étoiles restent en cercle
Conception
La maquette fait foi : quand une demande et la maquette se contredisaient, c’est la maquette qui l’emportait
Une maquette d’ordinateur, trois tailles d’écran
De la maquette au site
L’ordinateur, au pixelLa maquette comme source de vérité
Comparé à la maquetteChaque page capturée en 1440 px et comparée image par image au rendu Figma.
Les alignementsLes liens du menu tombent pile sur les colonnes de la page Infos, à toutes les largeurs.
La tabletteD’après la référence choisie par la cliente
Une barre par projetNom, mission et année restent en haut de l’écran ; « + » déplie les fiches ; une ou deux colonnes au choix, projet par projet.
Le téléphoneLes maquettes arrivées en cours de route
Relevé cote par coteQuand la cliente a dessiné le téléphone, j’ai repris chaque rangée d’images : chaque projet tombe à 2 px de sa place.
La visionneuseBoutons carrés comme demandé ; sur téléphone, les flèches à côté de l’image, jamais dessus.
Le projet en chiffres
- 11Projets sur la page d’accueil92 images et une vidéo
- 23Travaux personnelsSur la page Playground
- 3Tailles d’écranOrdinateur au pixel, tablette et téléphone adaptés
- 18JoursDu 18 octobre au 4 novembre 2026, du Figma au nom de domaine
Tests
Ses retours les plus utiles sont venus du téléphone, la taille d’écran que la maquette ne montrait pas
La cliente, sur son téléphone
Chaque version a été vérifiée à l’écran avant d’être montrée, puis la cliente l’a éprouvée elle-même, sur son iPhone et pendant la revue de son book.
Vérifié avant chaque livraison
- Neuf scripts de vérification : étoiles, menu, alignements, visionneuse, débordements
- Les pages comparées aux maquettes, sur ordinateur et sur téléphone
- Le site affiché avec le moteur de Safari, pas seulement Chrome
- Tout au clavier : focus visible, Échap ferme la visionneuse, le focus revient à l’image
Corrigé grâce à ses retours
- Les flèches de la visionneuseEn bas de l’écran, elles étaient loin de l’image : elles sont remontées à sa hauteur.
- Une ou deux colonnesLe choix changeait toute la page : il ne vaut plus que pour le projet touché.
- La page PlaygroundSa barre et ses options gênaient les images : retirées sur tablette et téléphone.
- La photo de la page InfosElle reste à l’écran pendant qu’on lit le parcours, sur téléphone puis sur ordinateur.
À régler
- Un titre de l’ouverture signalé comme absent sur un ordinateur, sans que j’arrive à le reproduire
- Le lien « Hit me up » reste petit au toucher
Bilan
Ma part la plus visible est un mouvement d’étoiles ; la plus utile, c’est tout ce que je n’ai pas ajouté
Servir la direction d’une autre
Faire autrement
J’ai adapté le téléphone avant d’avoir sa maquette
Mes premiers réglages ont été défaits quand la cliente a dessiné ses écrans de téléphone. Demander ces maquettes dès le départ aurait évité une série d’allers-retours.
- Retrouver le titre manquant avec une capture de l’écran concerné
- Agrandir la zone de clic de « Hit me up » à tout l’autocollant
- Une courte présentation en tête du Playground sur téléphone