À propos de ce modèle
Travel Journal est une référence de travail pour une marque de voyage, un exemple de section blog entièrement mesuré et prêt à reproduire. La palette se limite à bleu profond #1A1A1E en fond et sarcelle sourd #77A0B0 pour les accents, et la typographie est Inter. La livraison est en React et Tailwind CSS, capturée en 1470x1080 pour que le cadre soit fixé avant la première ligne de code. Le budget d’animation est 150ms de transitions et un fond vidéo en boucle. Prenez-la lorsque l’ordre de section blog doit être arrêté avant d’ajouter de nouvelles sections.
Conçu pour
- Équipes d’agence qui défendent un design de section blog pour une marque de voyage et tiennent à citer des angles de 52px et des pas d’espacement de 10px dans la présentation, pour que le devis tienne encore après la réunion de lancement.
- Les responsables de studio qui mènent plusieurs projets de front utiliseront ce design de section blog comme le motif que toutes les autres pages recopient.
- Équipes produit qui rédigent leurs propres textes de Section blog et doivent garder à chaque ligne la longueur sur laquelle la typo display a été calibrée.
Ce qui est inclus
- Repli des liens à une largeur. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #77A0B0, dimensionnée pour rester discrète face au reste de la page. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #77A0B0 est le seul élément de la barre à porter du gras.
- Une seule échelle, texte et cadre. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (des angles de 52px, des pas d’espacement de 10px et des transitions de 150ms). La typographie et la mise en page partagent les mêmes pas, rien ne dérive donc quand l’une des deux est remplacée. Les chiffres sont le design, le reste est de l’arrangement.
- Un clip, pas une illustration. Le premier écran est un seul clip en 1470x1080, et tout le reste s’organise par-dessus. Exportez en 1470x1080 ou plus large et le recadrage en cover continue de fonctionner.
- Deux fontes, des rôles clairs. La ligne display est composée en Inter à une taille fixée par le brief, le titre devient donc un élément de composition et non un paragraphe. Les graisses sont spécifiées par rôle, la hiérarchie ne dépend donc pas d’une approximation au moment du build.
Animation et interaction
Des durées courtes et nommées
Une seule durée couvre les interactions (150ms), et c’est ce qui fait que survol et pression se lisent comme un seul système. Chaque changement d’état nomme une valeur, donc le réglage par défaut du navigateur n’est jamais utilisé.
La boucle fait l’ambiance
Le mouvement d’ambiance vient de la boucle de 6,4s en 1470x1080 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. La boucle est rognée en cover, ce qui veut dire que la composition ne dépend pas d’un format d’image précis. Tournez ou exportez en 1470x1080 ou plus large.
Par où commencer dans Travel Journal
La plupart des gens commencent par la couleur d’accent. Commencez plutôt par la promesse, réécrivez la ligne affichée, puis retestez sarcelle sourd #77A0B0 sur vos propres médias. Le cadre et l’échelle sont ce qu’il faut laisser tranquilles.
Ce qui bouge dans Travel Journal
Un budget d’animation court coûte du spectaculaire sur la première image. Il achète de la lisibilité et permet de porter 150ms de transitions et une boucle média de 6,4s sans bibliothèque. Rien ne s’anime pour lui-même dans le design de section blog.
Lire Travel Journal comme une spécification
Démontez la composition et les valeurs continuent de décrire section blog, avec des angles de 52px et des pas d’espacement de 10px pour le cadre et le rythme en dessous. Rien dans le design de section blog ne dépend d’une valeur par défaut.
Questions fréquentes
Le brief de Travel Journal est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 5 151 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que contient réellement le brief derrière Travel Journal?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1470x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de section blog de Travel Journal avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Travel Journal a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
