À propos de ce modèle

Paradiso CTA est une référence de travail pour une marque de voyage, un exemple de bloc CTA entièrement mesuré et prêt à reproduire. Le titre affiché est « Enter your email address », et le reste de bloc CTA s’organise autour de lui. Toute la page repose sur blanc #EFF3F4 en fond et vert anis profond #1B200B pour le texte. La construction repose sur un seul fichier HTML autonome. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. Le budget d’animation est un fond vidéo en boucle. Prenez-la lorsque l’ordre de bloc CTA doit être arrêté avant d’ajouter de nouvelles sections.

Conçu pour

  • Les chefs de produit qui doivent chiffrer la reconstruction liront un seul fichier HTML autonome comme le périmètre du travail.
  • Si la référence n’est qu’un point de départ, les designers peuvent garder un cadre 2522x1858 et reconstruire le reste du design de bloc CTA.
  • Des designers qui veulent d’abord les chiffres, des pas d’espacement de 15px, tous cités depuis le brief.

Ce qui est inclus

  • Mesuré, pas estimé à l’œil. La mise en page est résolue sur des valeurs fixes (des pas d’espacement de 15px), ce qui garde le premier écran composé à n’importe quelle largeur. Le brief énonce des valeurs et non des proportions, la composition garde donc ses relations quand le texte change de longueur.
  • Un média sans surcouche. La vidéo occupe le calque inférieur de la composition 2522x1858, la typographie est disposée au-dessus, sans rien entre les deux. Exportez en 2522x1858 ou plus large et le recadrage en cover continue de fonctionner. Exportez en 2522x1858 ou plus large pour garder un cadrage honnête.
  • Le brief nomme les pas. Les espacements sont cités de la même façon (des pas d’espacement de 15px), et non comme une échelle qui grandit toute seule.
  • Un clip plein cadre derrière la typographie. Une image d’attente en 2522x1858 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.

Animation et interaction

Une ambiance sans bibliothèque de scroll

Le mouvement d’ambiance vient de la boucle de 4,6s en 2522x1858 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction.

Presque aucune animation

Il n’y a aucune bibliothèque de scroll ici, la composition en 2522x1858 reste immobile et seuls les éléments qui vous répondent bougent. Le mouvement est traité comme un retour d’information et non comme une décoration.

Par où commencer dans Paradiso CTA

Si votre marque porte une palette plus lourde, testez-la sur le cadre avant de valider. blanc #EFF3F4 porte la page, donc un accent plus sombre demande plus de contraste que dans la référence. Le sujet est la partie qui doit changer.

Comment Paradiso CTA ordonne la première lecture

Si votre page ouvre aujourd’hui sur les fonctionnalités, voici l’ordre à copier, la grille de cartes et le clip de fond devant, le détail d’appui ensuite, et des pas d’espacement de 15px pour régler la distance. Un lecteur voyage reçoit l’offre avant les options.

Les chiffres derrière bloc CTA

Là où un moodboard laisse l’échelle ouverte, ce brief la ferme, des pas d’espacement de 15px, avec les valeurs voisines dérivées de cette décision. Rien dans le design de bloc CTA ne dépend d’une valeur par défaut.

Questions fréquentes

Que recevez-vous en copiant le brief de Paradiso CTA?

Comptez 1 665 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.

Pourquoi la fiche mentionne-t-elle un seul fichier HTML autonome?

La référence se trouve avoir été construite en un seul fichier HTML autonome, mais ce choix n’engage rien dans la mise en page. Les espacements, la typographie et les valeurs d’animation se transposent dans la stack que vous utilisez déjà.

Comment cette fiche de Paradiso CTA est-elle organisée?

Tout ce qui est cité sur la page provient du brief capturé de 1 665 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.

Le reproduire dans Studio

Partez de la référence, puis adaptez le contenu et les détails visuels dans Studio.