À propos de ce modèle
Place Saver est un design de landing page pour une marque de voyage, livré avec les instructions qui l’ont produit. La page affiche son propre titre, « The place for all your places », et la composition est construite autour de ces mots exacts. La palette se limite à blanc #F4F4F4 en fond et bleu profond #0C0C0E pour le texte, et la typographie est Playfair Display. La livraison est en un seul composant, capturée en 1480x1080 pour que le cadre soit fixé avant la première ligne de code. Le budget d’animation est 0.9s de transitions, cubic-bezier(0.16, 1, 0.3, 1) et un fond vidéo en boucle. Traitez-la comme le brief de landing page pour une marque de voyage, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Si la référence n’est qu’un point de départ, les designers peuvent garder un seul composant et reconstruire le reste du design de landing page.
- Si l’animation doit sauter, le design de landing page reste lisible, des angles de 48px et des pas d’espacement de 28px assurant la hiérarchie.
- Équipes qui reprennent un design de landing page voyage repéré chez un concurrent et veulent un seul composant dans le brief avant que quiconque choisisse un framework.
Ce qui est inclus
- Les pas d’espacement sont cités. Les tailles sont citées plutôt qu’héritées, des angles de 48px, des pas d’espacement de 28px, des transitions de 0.9s et un easing cubic-bezier(0.16, 1, 0.3, 1). Changez la fonte ou le texte, ces relations tiennent toujours. Les proportions du cadre sont notées avec les tailles, une reconstruction obtient donc aussi le bon ratio. Vérifiez une reconstruction contre les mêmes chiffres.
- Vidéo plein cadre, aucun panneau. Le cadre 1480x1080 est rempli par une seule boucle qui tourne derrière le texte et ne réclame aucun contrôle. La boucle est assez courte (5,6s) pour que l’œil la lise comme une texture et non comme une timeline. Exportez en 1480x1080 ou plus large pour garder un cadrage honnête.
- Deux fontes, des rôles clairs. Ici, la typographie est le système de style, avec Playfair Display au corps display, la même fonte sur toute l’interface, et aucune seconde couleur d’accent pour faire le travail. Le texte d’interface reste sur une seule fonte, la page ne mélange donc jamais deux voix au même corps.
- Les tailles sont dans le brief, pas dans une échelle. Les espacements sont cités de la même façon (des angles de 48px, des pas d’espacement de 28px, des transitions de 0.9s et un easing cubic-bezier(0.16, 1, 0.3, 1)), et non comme une échelle qui grandit toute seule.
Animation et interaction
La boucle fait l’ambiance
Le mouvement d’ambiance est un clip de 5,6s en 1480x1080, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. 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.
Assez rapide pour être voulu
Le budget d’animation est faible et explicite, 0.9s avec cubic-bezier(0.16, 1, 0.3, 1), appliqué aux changements d’état plutôt qu’aux entrées. L’easing est spécifié avec la durée (0.9s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Les timings font partie du design, pas d’une passe de finition.
Les chiffres derrière landing page
Le coût d’une échelle fixe est une marge d’improvisation plus faible, car la composition reste cohérente grâce à des angles de 48px et des pas d’espacement de 28px et un nouvel élément doit s’ajuster plutôt que se poser. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Le réagencement de landing page
Ici, la typographie est fluide plutôt que par paliers (un clamp entre 66px et 28px), donc la ligne d’affichage ne saute pas d’une largeur à l’autre. Les deux états sont décrits dans le même brief.
Les timings derrière landing page
Chaque transition porte ici un chiffre. C’est pourquoi le portage de 0.9s de transitions et une boucle média de 5,6s se fait valeur par valeur au lieu d’un réglage au ressenti. Rien ne s’anime pour lui-même dans le design de landing page.
Questions fréquentes
Quelle part de Place Saver dépend de un seul composant?
La fiche indique un seul composant pour la provenance, parce que Place Saver 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.
Comment cette fiche de Place Saver est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 8 226 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 Place Saver?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1480x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
