À propos de ce modèle
Avant toute reconstruction de pied de page pour une marque e-commerce, lisez Heritage Grove, qui publie ensemble la composition et la spécification. Elle ouvre sur « Heritage Grove — Footer » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La couleur se réduit à crème #EAE3DE en fond, sarcelle #0F454F pour le texte et assombri #2A707C pour les accents, composée en Poppins. La livraison est en un seul fichier HTML autonome, capturée en 1920x1424 pour que le cadre soit fixé avant la première ligne de code. La page s’en tient à 2s de transitions, cubic-bezier(.22,1.36,1) et un fond vidéo en boucle. Si vous préparez un brief pour pied de page e-commerce, partez de cette composition et remplacez le sujet.
Conçu pour
- Mettez un easing cubic-bezier(.22,1.36,1) dans la note de passation pour que la prochaine reconstruction n’ait pas à reparcourir la page.
- Si vous briefez un modèle plutôt qu’un designer, partez de la structure de pied de page et laissez le prompt porter un seul fichier HTML autonome.
- Des équipes Studio qui briefent un build et cherchent un breakpoint à 359px pour avoir une matière sur laquelle réagir.
Ce qui est inclus
- Une barre sans superflu. La navigation est une bande fine et non un bandeau, avec le nom de marque à gauche, les liens vers le centre droit et une action en #2A707C, le tout posé en tête de pied de page, sans fond propre. Sous 359px, les liens se replient au lieu de passer sur une seconde ligne. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants.
- Un clip plein cadre derrière la typographie. La composition se construit par-dessus le clip 1920x1424 et non à côté, le média n’obtient donc jamais de panneau ni de bordure. Une image d’attente en 1920x1424 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- Le comportement est défini par largeur. Les changements de largeur sont gérés dans la typographie même, un clamp entre 240px et 52px porte le titre du téléphone au desktop sans composition mobile séparée. L’échelle étant bornée, la ligne display ne saute jamais d’un breakpoint à l’autre. Vérifiez le premier écran sur un téléphone.
- Repli des liens à une largeur. Les libellés tiennent sur une ligne à 359px, et l’élément actif se signale par la graisse et non par une pastille.
Animation et interaction
La boucle fait l’ambiance
Le mouvement d’ambiance vient de la boucle de 9,6s en 1920x1424 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention.
Une branche plus calme est prévue
La couche d’animation a un interrupteur. Sous prefers-reduced-motion, l’animation d’entrée et de boucle est retirée et tout le reste ne bouge pas. Le retour d’information des interactions fonctionne encore en mouvement réduit, seules les entrées sont retirées. Conservez la branche reduced-motion quand vous portez la page.
L’ordre de pied de page
L’attention est canalisée plutôt que dispersée. La page le dit sans détour, « Heritage Grove — Footer ». L’œil se pose d’abord sur la ligne display, puis sur le texte de soutien, puis sur l’action. La preuve sociale, quand elle apparaît, reste un bandeau ou une ligne plutôt qu’un mur de témoignages. Cette séquence est le design. Un lecteur e-commerce reçoit l’offre avant les options.
Le réagencement de pied de page
La mise en page étroite est conçue, pas héritée, et la hiérarchie survit à la réorganisation, l’échelle est fluide plutôt que par paliers, la mise en page bascule à 359px et la section est tenue à 100vh à chaque largeur. L’ordre est la dernière chose à changer.
Ce qui tient la route pour E-commerce
Là où un template remplit le premier écran de modules, le design de pied de page se sert de la navigation, la ligne de statistiques, la liste de fonctionnalités, le formulaire et le clip de fond et s’arrête. La différence se voit dans un corps display fixe de 16px et des sections de 100vh, rien n’est gonflé pour occuper l’espace. Elle donne à un lecteur e-commerce le chemin le plus court vers l’offre.
Questions fréquentes
Faut-il un seul fichier HTML autonome pour reconstruire Heritage Grove?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Heritage Grove 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 Heritage Grove est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 12 893 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 Heritage Grove?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1424, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
