À propos de ce modèle
Real-Time Alerts est un exemple de page de connexion SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. Le titre affiché est « Built for fast-moving teams », et le reste de page de connexion s’organise autour de lui. La palette repose sur neutre #797979 en fond et assombri #2F2A27 pour le texte, et la page est composée en Eloquia. L’ensemble est livré en un seul fichier HTML autonome, ce qui permet de transposer un design de page de connexion dans un projet sans passation de design. Le brief consacre son budget d’animation à 3500ms de transitions, cubic-bezier(.2.7.3,1) et un fond vidéo en boucle. Prenez-la lorsque l’ordre de page de connexion doit être arrêté avant d’ajouter de nouvelles sections.
Conçu pour
- Transmettez un seul fichier HTML autonome à l’ingénieur avec le cadrage 1738x1080 joint, puis laissez-le reconstruire.
- Ce design de page de connexion sert aux équipes qui doivent justifier un seul fichier HTML autonome auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Des équipes Studio qui briefent un build et cherchent un breakpoint à 370px pour avoir une matière sur laquelle réagir.
Ce qui est inclus
- Le brief nomme les pas. Typographie et espacements sortent ici de la même liste, un corps display fixe de 16px, des sections de 100vh, des angles de 26px et des pas d’espacement de 10px. Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition.
- Un média sans surcouche. Un unique clip muet en boucle remplit le cadre en 1738x1080 sur 4,9s, cadré en cover avec le texte empilé par-dessus. Le brief écarte toute surcouche du fond vidéo pour ne pas en ternir les couleurs. Une image d’attente en 1738x1080 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- Un champ, une action. Il n’y a qu’une décision à prendre ici, remplir le formulaire ou partir. Tout le reste de l’écran soutient cette décision. Les champs sont empilés sur une seule colonne, l’ordre de tabulation suit donc l’ordre de lecture. Gardez les libellés visibles, évitez les champs sans libellé.
- Une bande de chiffres, aucun tableau. Les chiffres sont composés en Eloquia à une taille plus proche du titre que du texte courant. Les libellés sont composés à une seule taille, un libellé long ne change donc pas la hauteur de la rangée.
Animation et interaction
Des durées en millisecondes
Les contrôles répondent en 3500ms, assez vite pour que la page réagisse dès qu’on la touche, et non après. Rien n’attend une position de scroll, donc la page répond dès que vous la touchez. Conservez les durées quand vous changez l’habillage de la page.
La bande qui ne s’arrête jamais
Un bandeau défilant traverse la composition en boucle sans fin, composé en Eloquia, donc la page bouge même là où rien ne s’anime au scroll. Parce que la bande est décorative, elle peut être mise en pause ou retirée sans changer la mise en page.
L’ordre de page de connexion
Une mise en page pilotée par les fonctionnalités énumère ce que fait le produit, celle-ci conduit le lecteur vers une seule décision. Le trajet se voit dans le titre, le badge d’annonce, la ligne de statistiques, la grille de cartes et le formulaire et dans l’espacement réglé par un corps display fixe de 16px et des sections de 100vh. Un lecteur SaaS reçoit l’offre avant les options.
Par où commencer dans Real-Time Alerts
La composition est la partie réutilisable, le sujet vous appartient. Gardez un corps display fixe de 16px et des sections de 100vh et remplacez les mots, les médias et les signes de marque. Réécrivez la ligne affichée avant de toucher à la couleur.
Lire Real-Time Alerts comme une spécification
Le brief est une spécification. Il énonce un corps display fixe de 16px, des sections de 100vh, des angles de 26px, des pas d’espacement de 10px et des transitions de 3500ms et nomme le cadre média en 1738x1080 avant qu’on dessine quoi que ce soit autour. Rien dans le design de page de connexion ne dépend d’une valeur par défaut.
Questions fréquentes
Pourquoi la fiche mentionne-t-elle un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Real-Time Alerts 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.
Que faire du brief de Real-Time Alerts une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 21 771 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Quelle est la longueur du prompt derrière Real-Time Alerts?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1738x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
