À propos de ce modèle
La capture de HAUL! a été faite en 1832x1354 et conservée comme spécification, pas comme image de galerie. La page affiche son propre titre, « `. Next to the logo block, add the text », et la composition est construite autour de ces mots exacts. La couleur se réduit à blanc #FFFFFF en fond et orange #BB420D pour les accents, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 1832x1354 pour que le cadre soit fixé avant la première ligne de code. Le brief consacre son budget d’animation à 0.8s de transitions. Prenez-la lorsque l’ordre de pied de page doit être arrêté avant d’ajouter de nouvelles sections.
Conçu pour
- Quiconque briefe un modèle sur un design de pied de page utilisera le prompt de 4 329 caractères comme point de départ.
- Cette base est calibrée pour un fondateur seul qui livre un design de pied de page pour un produit IA ou SaaS, sans design system derrière.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de pied de page dont le titre doit rester aussi long que celui de HAUL!.
Ce qui est inclus
- Mesuré, pas estimé à l’œil. Les valeurs sont la spécification, des sections de 50vh et des transitions de 0.8s, relevées sur 1832x1354 et non déduites d’une capture d’écran. 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 cartes font la structure. La grille fait la structure, des panneaux de même taille, composés en Inter, disposés pour que l’œil aille vers la droite plutôt que vers le bas. La hauteur des panneaux suit le texte, une ligne plus longue ne casse donc pas l’alignement de la rangée.
- L’accent sur un fond calme. #BB420D est dépensé sur les contrôles et nulle part ailleurs, une valeur saturée peut donc se poser sur blanc #FFFFFF sans crier. Le contraste entre #BB420D et blanc #FFFFFF est ce qui rend l’accent lisible en petite taille.
- Les chiffres portés jusqu’au build. Les espacements sont cités de la même façon (des sections de 50vh et des transitions de 0.8s), et non comme une échelle qui grandit toute seule.
Animation et interaction
Les contrôles forment la couche interactive
La couche interactive est volontairement réduite, des états de survol sur les boutons et les liens plutôt que sur chaque carte. Rien sur la page n’ouvre de modale ni ne détourne le scroll, les interactions restent locales à l’élément.
La page s’assemble en avançant
Parallaxe se joue pendant que la page défile, donc la composition a un état de repos défini. La page change au rythme du lecteur plutôt que selon un programme. N’empilez pas un second effet de scroll.
Par où commencer dans HAUL!
Composez le nouveau texte au corps d’affichage nommé dans le brief (des sections de 50vh et des transitions de 0.8s), et le reste de l’échelle suit sans refonte. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
Lire HAUL! comme une spécification
4 329 caractères de brief produisent une spécification complète. La partie porteuse est courte, des sections de 50vh et des transitions de 0.8s. Rien dans le design de pied de page ne dépend d’une valeur par défaut.
Le réagencement de pied de page
En large, la composition est dense, en étroit, la section est tenue à 50vh. Les deux états sont décrits dans le brief. La largeur change les mesures, pas le parcours de lecture.
Questions fréquentes
Quelle est la longueur du prompt derrière HAUL!?
Comptez 4 329 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.
Puis-je reconstruire ce type de pied de page de HAUL! avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que HAUL! 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 gérer les médias de HAUL! 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 1832x1354.
