Sites portfolioProjets clients · 2026Des sites portfolio, de la maquette à la mise en ligne
Pour un photographe de sport, puis pour un réalisateur de documentaires, j'ai conçu, développé et mis en ligne leur site.
- Rôle
- design des sites, développement, mise en ligne
- Clients
- photographe de sport, réalisateur de documentaires
- Équipe
- seul, avec Claude Code
- Livrable
- 2 sites en ligne, hébergement
BKBSHOTS
« Le maître mot du site est fluidité et infini. »
Le site d'un photographe de sport
Le photographe couvre le sport : CAN, Six Nations, Diamond League. Ses photos sont souvent sombres et toutes en portrait. Son site devait les faire défiler sans fin, sans jamais les déformer.
Comment faire parcourir des centaines d'images sans jamais faire attendre le visiteur ?
Les décisions
Un seul mot pour changer de projet
La molette et le glissé parcourent toujours les photos. Changer de projet passe uniquement par cette liste.
Les photos restent visibles
Un voile léger seulement : la série change en direct derrière la liste. Cliquer un autre projet le montre sans fermer.
Une mosaïque sans fin
Elle s'étend dans les deux sens, et deux cases visibles ne montrent jamais la même photo.
- Le nom du site sert de retourIl referme le zoom, repasse de ALL à SERIES, puis ouvre la liste : un seul repère pour revenir en arrière.
- Assombrir plutôt que marquerLa photo survolée descend à 78 % de luminosité, jamais sous 60 %, pour garder les ombres d'une photo de sport.
- La photo voyage d'une vue à l'autreAu zoom comme entre SERIES et ALL, elle part de sa place exacte et y revient : on ne perd jamais ce qu'on regardait.
- Une croix pour quitter le zoomÉchap et le nom du site le fermaient déjà, mais rien à l'écran ne l'indiquait. La croix, dessinée comme les flèches, marche aussi au clavier et au doigt.
- Le menu en négatifLes noms des projets non choisis inversent la photo qu'ils recouvrent, comme tous les textes du site. Le projet choisi reste le seul en blanc.
- Des collimateursSept cadres de mise au point, comme dans un viseur, montrent le chargement, la position dans la série et le projet choisi.
- L'entrée glisse dans le sens du siteLe voile de l'écran d'entrée ne s'efface plus en fondu : il glisse vers la gauche sur ordinateur, vers le haut sur téléphone, et les photos arrivent avec leur élan.
Un site qui ne fait pas attendre
- 186Photos en 7 projetsToutes en portrait, jamais déformées
- 36×Moins de pixels chargés pour une vignette de la mosaïqueChaque image dit au navigateur à quelle taille elle s'affiche
- 3Photos attendues par l'écran d'entréeAu lieu de toute la première série en pleine résolution
- 0À-coup pendant un zoom au doigt dans la mosaïqueContre 5 avant l'optimisation, mesurés sur un iPhone simulé et ralenti
Ce que j'en retiens
- Aucun rebondJ'ai écarté les mouvements qui dépassent leur cible : ils attiraient l'œil sur le mouvement, pas sur la photo.
- Le vrai téléphone a le dernier motUn écran noir n'apparaissait que sur iPhone. Un journal d'erreurs affiché sur le téléphone a permis d'en trouver la cause.
- Chaque décision est notéeJe décide et je teste, Claude Code écrit le code. Chaque choix est écrit avec sa raison, pour qu'aucune correction ne soit défaite plus tard.
Nedim Torun
Aucun fondu : ce qui arrive monte, ce qui part redescend.
Le site d'un réalisateur de films documentaires
Le réalisateur tourne des documentaires, courts et longs métrages. Son site devait faire voir ses films avant tout, puis donner les moyens de le contacter, en français comme en anglais.
Comment donner envie de voir les films, puis de contacter leur réalisateur ?
Les décisions
Le film d'abord
Le lecteur prend toute la place, à égale distance du nom et de la barre du bas.
À quai
Un geste vers le bas pose la vidéo à gauche et ouvre le descriptif. Aucune position intermédiaire.
Deux films par rangée au plus
Pour ne jamais confondre deux projets. Au survol, la vidéo du film se lance dans sa case.
- Le film suivant se montre au survolSa vidéo suit la souris en miniature. Un geste de côté change de film, un seul à la fois.
- Une seule action mise en avant« Voir le film complet », en blanc sur noir, juste sous le résumé.
- Le statut, rien d'autreDans la grille, chaque film ne dit que son titre et son statut : l'année, ou « En tournage ». Le reste est dans le descriptif.
- Le chargement s'ouvre sur le filmLe trait du chargement s'allonge à la largeur de la vidéo, puis une fenêtre s'ouvre à sa place : on arrive directement sur le film, sans fondu.
Un site sobre et léger
- 5Films, courts et longs métragesChacun avec son extrait, ses photos et sa fiche
- 2LanguesFrançais et anglais
- 75Ko de code envoyés au navigateur, environAu lieu de 265 Ko avec la bibliothèque habituelle
- 14 pxTaille minimale du texteSur tous les écrans
Ce que j'en retiens
- La vidéo sur iPhone a ses règlesSon coupé, lecture dans la page, économie d'énergie : chaque garde-fou du lecteur répond à un problème constaté sur iPhone.
- Hiérarchiser sans rapetisserAucun texte sous 14 px : la hiérarchie passe par la graisse, le gris et l'espacement des lettres.
- Une seule policeUne police variable tient les trois voix du site : le texte, les chiffres et les titres d'affiche.
Tous les projets
Deezer
Ornikar
BlaBlaCar
APS Communication
Robots
Sites portfolio (projet en cours de lecture)