À propos de ce modèle
Aurora Onboard est un exemple de page de connexion lifestyle, construit à partir d’un seul brief écrit, et cette page documente ce brief. La couleur se réduit à noir #000000 en fond et indigo sourd #DBCDE9 pour le texte, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 1850x1352 pour que le cadre soit fixé avant la première ligne de code. Si vous préparez un brief pour page de connexion lifestyle, partez de cette composition et remplacez le sujet.
Conçu pour
- Équipes produit qui rédigent leurs propres textes de Page de connexion et doivent garder à chaque ligne la longueur sur laquelle la typo display a été calibrée.
- Cette base est calibrée pour un fondateur seul qui livre un design de page de connexion pour une marque lifestyle, sans design system derrière.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de page de connexion dont le titre doit rester aussi long que celui de Aurora Onboard.
Ce qui est inclus
- Une famille, deux rôles. Avec Inter aux commandes, les tailles chutent nettement du titre vers le texte secondaire et l’interlettrage se resserre à mesure que le corps grandit, si bien que la hiérarchie passe par la typographie et non par la couleur. L’interlignage suit les paliers de taille plutôt qu’une valeur globale unique.
- Le formulaire est tout le premier écran. 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. L’action se trouve juste sous le dernier champ, la décision n’est donc jamais à plus d’un regard. Gardez les libellés visibles, évitez les champs sans libellé.
- Le pied de page est une composition entière. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. Les colonnes s’alignent sur la même grille que la page au-dessus, le pied de page paraît donc issu du même design.
- Une structure en un seul écran. La construction de page de connexion fait arriver le texte avant tout le reste, la typographie porte la hiérarchie, le cadre 1850x1352 tient la composition, et les valeurs secondaires restent discrètes. La page est une seule composition en 1850x1352, c’est pourquoi elle tient quand le texte change.
Animation et interaction
Le pointeur là où il aide
Les états sont gérés composant par composant (des états de survol sur les boutons et les liens plutôt que sur chaque carte) plutôt que par une couche d’animation globale. Les états sont nommés dans le brief, donc la page ne dépend pas d’une bibliothèque d’effets de survol. Gardez la couche interactive réduite.
Statique par choix
Le brief laisse l’animation de côté et laisse la mise en page en 1850x1352 porter la page, les états de survol et d’appui étant les seuls changements. La composition reste immobile, donc la hiérarchie doit porter la page, et elle le fait.
Ce qui tient la route pour Lifestyle
Là où un template remplit le premier écran de modules, le design de page de connexion se sert de le titre, la ligne de statistiques, le formulaire, le clip de fond et le pied de page et s’arrête. La différence se voit dans un cadre 1850x1352, rien n’est gonflé pour occuper l’espace. Elle donne à un lecteur lifestyle le chemin le plus court vers l’offre.
Comment Aurora Onboard ordonne la première lecture
Le compromis demande de la patience, car la page retient le détail qu’une grille balayable livrerait tout de suite. Ce qu’elle gagne, c’est un premier écran où l’ordre de le titre, la ligne de statistiques, le formulaire, le clip de fond et le pied de page ne prête pas à confusion. Un lecteur lifestyle reçoit l’offre avant les options.
Le réagencement de page de connexion
La plupart du travail responsive s’arrête à masquer des éléments. Ici, la mise en page change de forme, l’échelle est fluide plutôt que par paliers, et rien d’important n’est supprimé pour faire tenir le premier écran. Rien d’important n’est supprimé en largeur étroite.
Questions fréquentes
Comment cette fiche de Aurora Onboard est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 4 770 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que recevez-vous en copiant le brief de Aurora Onboard?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1850x1352, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de page de connexion de Aurora Onboard avec une autre stack?
La référence se trouve avoir été construite en React et Tailwind CSS, 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à.
