À propos de ce modèle
Airlines Hero Section résout le problème de section hero pour une marque de voyage à partir d’un seul brief capturé. La palette est indigo profond #20153E en fond et indigo #56489B pour les accents, composée en Inter. La livraison tient en un seul fichier HTML autonome, une seule page, sans plugin ni outillage de build entre vous et le design. Le brief consacre son budget d’animation à un fond vidéo en boucle. Servez-vous-en comme référence quand vous construisez un design de section hero pour une marque de voyage et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Équipes qui reprennent un design de section hero voyage repéré chez un concurrent et veulent un seul fichier HTML autonome dans le brief avant que quiconque choisisse un framework.
- Si l’animation doit sauter, le design de section hero reste lisible, des sections de 100vh et des pas d’espacement de 14px assurant la hiérarchie.
- Des développeurs front-end qui reconstruisent cette page en un seul fichier HTML autonome et veulent les transitions spécifiées plutôt que devinées.
Ce qui est inclus
- En haut, marque, liens et action unique. Nom de marque, liens et action en #56489B partagent une même ligne de base, c’est ce qui évite qu’une rangée fine paraisse accidentelle. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #56489B est le seul élément de la barre à porter du gras.
- Le brief nomme les pas. Les tailles ont été relevées sur le rendu en 1466x1080, des sections de 100vh et des pas d’espacement de 14px. La plus petite et la plus grande valeur de cette liste bornent la plage dans laquelle travaille la composition. Là où le brief reste muet, il l’est volontairement.
- La typographie fait le style. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Inter à un corps display serré, puis une chute nette vers le texte secondaire. Le palier de légende est assez petit pour se placer sous un chiffre sans changer le rythme de la page.
- Une ligne, aucun tiroir. La barre se pose sur la composition 1466x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
États de pointeur, rien de plus
La couche interactive est petite et prévisible, des états de survol sur les boutons et les liens plutôt que sur chaque carte. Tout le reste ne bouge pas, ce qui garde l’accent sur la composition. Chaque état ne change qu’une propriété, ce qui garde le retour lisible. Moins d’états, tous spécifiés.
Une boucle, pas une timeline
Un clip de 2,2s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Une image poster prend le relais quand la lecture automatique est bloquée, donc le mouvement est un plus et non une nécessité.
Le gain pour une marque de voyage
Un hero standard et le design de section hero utilisent les mêmes pièces. Ici, elles sont ordonnées par la navigation, le titre, la ligne de statistiques et le clip de fond et mesurées avec des sections de 100vh et des pas d’espacement de 14px, si bien que l’écran se lit comme une séquence et non comme un conteneur. Airlines Hero Section énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
L’ordre de section hero
Comparez le haut de cette page avec un premier écran voyage classique. Les deux portent un titre et une action, mais ici l’ordre de la navigation, le titre, la ligne de statistiques et le clip de fond est fixe au lieu d’un affrontement au même poids. Un lecteur voyage reçoit l’offre avant les options.
Les timings derrière section hero
Une animation ambitieuse coûte d’habitude la lisibilité du premier écran. Ce brief maintient des états de survol et de clic, une boucle média de 2,2s et un bandeau défilant en boucle en deçà du seuil où la typographie devrait attendre. Rien ne s’anime pour lui-même dans le design de section hero.
Questions fréquentes
Que recevez-vous en copiant le brief de Airlines Hero Section?
Comptez 2 222 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Quelle part de Airlines Hero Section dépend de un seul fichier HTML autonome?
Non. Le brief est une spécification, pas une liste de dépendances. Il a été écrit pour un seul fichier HTML autonome, mais la même composition se reconstruit avec ce que vous utilisez déjà. La stack est nommée pour que vous sachiez comment la référence a été produite.
Comment gérer les médias de Airlines Hero Section dans un projet client?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1466x1080.
