Une maquette Figma de cinq sections à faire tenir en HTML et CSS : un hero pleine largeur, une grille de circuits, une galerie de huit destinations, un bloc de services et une inscription à la newsletter. Aucun framework, aucune ligne de JavaScript.
Une maquette Figma complète m'est fournie : un site vitrine d'agence de voyage vers le Japon, une seule page, cinq sections. L'exercice ne porte pas sur la conception mais sur la restitution - rendre en code exactement ce que la maquette montre, y compris ce qu'elle ne dit pas.
Deux contraintes posées d'entrée : pas de framework CSS, pas de JavaScript. Tout ce que la maquette suggère d'interactif doit donc être obtenu en CSS seul, ou abandonné.
La question que je me suis posée : qu'est-ce que cette maquette impose vraiment, et où me laisse-t-elle décider ?
Le site s'adresse à quelqu'un qui envisage un voyage sans savoir encore ce qu'il veut y faire. Il ne cherche pas une information précise, il regarde. C'est ce qui explique la structure de la maquette : deux sections consécutives sont des galeries d'images, et le seul appel à l'action fort est en haut de page.
Cette lecture a une conséquence directe sur l'intégration. Une page de consultation, parcourue en faisant défiler, sur laquelle on s'arrête sur des photos : le poids des images et la stabilité de la mise en page pendant leur chargement comptent plus que la rapidité d'accès à un formulaire.
Je n'ai pas mené d'entretiens ni de tests sur ce projet : la maquette était le point de départ imposé. Ce que je décris ici est une lecture argumentée de l'intention du designer, pas une recherche utilisateur.
Avant d'écrire la première ligne, j'ai relevé ce que la maquette fixe et ce qu'elle laisse ouvert. C'est ce relevé qui décide de la structure du CSS.
J'ai découpé la page en cinq blocs autonomes, chacun sous forme d'une section avec son propre titre de niveau 2. Les cartes de circuit et les vignettes de destination sont des article : ce sont des contenus qui garderaient leur sens sortis de la page.
Côté CSS, quatre fichiers chargés dans un ordre volontaire - reset, puis color, puis style, puis responsive. Chacun ne surcharge que le précédent, ce qui évite d'avoir à monter la spécificité des sélecteurs pour régler un conflit.
Toutes les couleurs sont sorties dans color.css sous forme de variables CSS, y compris les deux voiles semi-transparents et l'ombre de l'en-tête. Changer l'ambiance du site entier revient à modifier huit lignes.
La direction est celle de la maquette. Mon travail a consisté à la relever précisément et à la rendre modifiable, pas à la réinventer.
Rouge
#E83F43
Tous les boutons, sans exception
Bleu ardoise
#213442
Titres et texte courant
Bleu nuit
#000829
Logo et pied de page
Gris fumée
#4D5D68
Paragraphes secondaires
Gris brume
#E9EBED
Fond du champ de la newsletter
preconnect et display=swap.Trois pictogrammes seulement, dans la section des services, livrés en SVG. Je les ai gardés en SVG plutôt qu'en PNG : ils restent nets à tous les niveaux de zoom et pèsent moins d'un kilo-octet chacun. Chaque pictogramme est accompagné de son titre, il ne porte jamais l'information seul.
Une input de type case à cocher, masquée, dont l'état pilote l'affichage de la navigation. Le label qui lui est associé devient le bouton. Résultat : le menu fonctionne au clavier, à la souris et au tactile, et la page ne charge aucun script.
Les circuits et les destinations sont les deux seuls blocs où je dois maîtriser les lignes et les colonnes en même temps : repeat(2, 1fr) pour l'un, repeat(4, 1fr) pour l'autre. Ailleurs, les éléments s'alignent sur un seul axe, et Flexbox y est plus simple à relire comme à replier en petit écran.
Huit variables dans color.css, y compris les deux voiles semi-transparents. Les valeurs ne sont jamais écrites en dur dans les règles : reteinter le site entier ne demande pas d'ouvrir style.css.
Les animations ne sont activées que si le système ne demande pas de mouvement réduit. C'est l'inverse de l'approche habituelle, qui anime d'abord et désactive ensuite : ici, une personne sensible au mouvement n'a rien à désactiver.
max-width : le site est donc pensé du grand écran vers le petit. Aujourd'hui je l'écrirais en min-width, en partant du mobile. C'est exactement ce que j'ai appliqué sur ce portfolio.Deux choses m'ont gêné en intégrant. La première : le site propose de « planifier son voyage » dès le premier bouton, mais aucune section ne dit combien ça coûte ni comment on réserve - le parcours s'arrête sur une inscription à la newsletter. La seconde : les huit destinations ne sont pas filtrables, alors que les quatre types de circuits présentés juste au-dessus formeraient des filtres évidents.
Je commencerais donc par relier ces deux sections, et par ajouter l'écran qui manque entre l'envie et la réservation.