À propos de ce modèle
Lisez Mostar Guide comme une spécification de landing page, dont les valeurs ont été écrites avant la construction de la page. La page affiche son propre titre, « A cinematic three-screen scroll story for Mostar city », et la composition est construite autour de ces mots exacts. La palette repose sur #111411 en fond, éclairci #FDF1E1 pour le texte et bleu #7FB4D4 pour les accents, et la page est composée en Inter. La fiche nomme la stack qui a produit la page (vanilla JS) au lieu de la passer sous silence. L’animation se limite à 640ms de transitions, cubic-bezier(0.22, 1, 0.36, 1) et un fond vidéo en boucle. Servez-vous-en comme référence quand vous construisez un design de landing page pour une marque de voyage et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Reprenez le cadre 798x584 et une typographie de 12px à 24px et des sections de 19vh de ce design de landing page avant tout le reste.
- Ce design de landing page sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte voyage peut porter 7,4s de vidéo en boucle.
- Cette base est calibrée pour un fondateur seul qui livre un design de landing page pour une marque de voyage, sans design system derrière.
Ce qui est inclus
- Repli des liens à une largeur. La barre porte le nom de marque, les liens de la section et un bouton en #7FB4D4, mesurée à une typographie de 12px à 24px et des sections de 19vh pour ne jamais devenir un second header. Les libellés tiennent sur une ligne à 560px, et l’élément actif se signale par la graisse et non par une pastille. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants.
- Vidéo plein cadre, aucun panneau. Le média est un seul clip de 7,4s recadré en cover dans le cadre 798x584, il ne laisse donc jamais de bandes noires, quelle que soit la largeur. Exportez en 798x584 ou plus large et le recadrage en cover continue de fonctionner.
- Un bandeau de nav volontairement fin. Sous 560px, les liens se replient au lieu de passer sur une seconde ligne. Testez la barre sur vos propres médias avant de lui donner un fond.
- Des tailles fixées par le brief. Le brief nomme les chiffres, une typographie de 12px à 24px, des sections de 19vh, une grille de 2 colonnes et des angles de 24px. C’est ce qui tient la composition, parce qu’aucun pas d’espacement inventé ne s’intercale entre la typographie et le cadre. La plus petite et la plus grande valeur de cette liste bornent la plage dans laquelle travaille la composition. Gardez les valeurs nommées quand vous portez la page.
Animation et interaction
Assez rapide pour être voulu
Les changements d’état sont fixés à 640ms, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. Les timings courts font que la page semble conçue, un réglage par défaut trop lent annulerait la composition.
Les contrôles forment la couche interactive
Le retour se limite aux contrôles (un élément sticky qui tient sa position pendant que le contenu défile sous lui et un slider qui fait défiler le contenu par pages à la demande), donc le reste de la mise en page est une composition fixe. Chaque état ne change qu’une propriété, ce qui garde le retour lisible. Gardez la couche interactive réduite.
Adapter landing page à votre marque
Commencez par la promesse, pas par la décoration. Réécrivez « A cinematic three-screen scroll story for Mostar city » en une phrase qui dit ce que vous faites, puis composez-la en Inter au corps display du brief. Remplacez bleu #7FB4D4 par votre propre accent et vérifiez-le contre #111411 avant de toucher au reste. Composez le nouveau texte au même corps display et revérifiez le contraste avant d’ajouter quoi que ce soit.
Le réagencement de landing page
La plupart du travail responsive s’arrête à masquer des éléments. Ici, la mise en page change de forme, la typographie est bornée entre 12px et 24px, la mise en page bascule à 560px et la section est tenue à 19vh, et rien d’important n’est supprimé pour faire tenir le premier écran. La mise en page étroite est une décision et non un écrasement, et la hiérarchie y survit.
L’ordre de landing page
Placez votre propre texte dans le design de landing page et la séquence tient toujours, car les éléments de la navigation, le badge d’annonce, la ligne de statistiques, la grille de cartes et la liste de fonctionnalités ne sont pas interchangeables. Un lecteur voyage reçoit l’offre avant les options.
Questions fréquentes
Que faire du brief de Mostar Guide une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 27 876 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que recevez-vous en copiant le brief de Mostar Guide?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 798x584, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de Mostar Guide dépend de vanilla JS?
La fiche indique vanilla JS pour la provenance, parce que Mostar Guide 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.
