Über diese Vorlage
Aesthetic Onboarding wurde bei 1894x1378 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Die Zeile lautet „Welcome back“, und der Rest des Eintrags Anmeldebildschirm ordnet sich darum. Die ganze Seite baut auf helles orange #F09819 darunter, tiefes blau #0C0C0E für die Schrift und helles petrol #00C6FF für die Akzente auf. Es kommt als React und Tailwind CSS, damit sich der ganze Anmeldebildschirm ohne Design-Übergabe in ein Projekt heben lässt. Die Bewegung kommt über eine Videospur in Schleife nicht hinaus. Nimm es als Briefing für ein KI- oder SaaS-Produkt: Der Eintrag Anmeldebildschirm muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Nimm zuerst Abstände in 80px-Schritten und lass die Palette folgen, weil die Abstände dieses Anmeldebildschirm-Design lesbar machen.
- Dieses Anmelde-Flow-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 5,4s Video in Schleife tragen kann.
- Gemacht für Content-Leads, die ein Anmeldebildschirm-Design neu betexten, dessen Headline so lang bleiben muss wie die von Aesthetic Onboarding.
Was enthalten ist
- Größen stehen im Briefing. Die Werte sind die Spezifikation: Abstände in 80px-Schritten, aufgenommen bei 1894x1378 und nicht aus einem Screenshot abgeleitet. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann. Die Zahlen sind das Design, der Rest ist Anordnung.
- Labels unter den Zahlen. Ein kompakter Zahlenstreifen trägt die Aussagen, die sonst einen Absatz bräuchten, und hält damit die Komposition (Anmeldebildschirm) davon ab, zur Feature-Liste zu werden. Die Ziffern tragen den Akzent in #00C6FF, während alles um sie herum auf der Textfarbe bleibt. Streiche eine Zahl, bevor du das Label verkleinerst.
- Werte bis in den Build. Die Abstände sind genauso zitiert (Abstände in 80px-Schritten) und nicht als Skala, die von selbst weiterwächst.
- Die Schleife als Hintergrund. Das Video liegt in der untersten Ebene der Komposition 1894x1378, die Schrift ist darüber angeordnet, dazwischen liegt nichts. Das Poster bei 1894x1378 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Die Hintergrundbewegung ist ein Clip von 5,4s in 1894x1378, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren. Dreh oder exportiere in 1894x1378 oder breiter.
Statisch mit Absicht
Diese Seite kommt als stehende Komposition in 1894x1378, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Die Komposition steht still, die Hierarchie muss die Seite also tragen, und sie tut es. Stillstand ist eine gültige Entscheidung.
Wie Aesthetic Onboarding den ersten Blick ordnet
Eine solche Seite vergräbt die Handlung meist unter einem Feature-Raster. Diese hält die Abfolge fest: die Überschrift, die Kennzahlen-Zeile, das Kartenraster, der Hintergrund-Clip und der Footer, mit der Handlung im ersten Screen statt nach drei Scrolllängen. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Wie der Eintrag Anmeldebildschirm umbricht
Das Briefing beschreibt, was sich bei welcher Breite ändert (die Skala ist fließend statt gestuft); die Mobil-Version ist also eine Entscheidung und keine Quetschung. Der Kontrast liegt auf dem Akzent #00C6FF über den Medien, und das Video ist stumm und inline. Die Breite ändert die Maße, nicht den Lesepfad.
Was ein KI- oder SaaS-Produkt hier gewinnt
Der Preis ist Dichte: Dieser Eintrag Anmeldebildschirm sagt auf dem ersten Screen weniger als ein feature-getriebenes Layout. Was bleibt, ist die Leserichtung, und die Überschrift, die Kennzahlen-Zeile, das Kartenraster, der Hintergrund-Clip und der Footer leisten die Arbeit, die eine längere Seite verteilen würde. Aesthetic Onboarding nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Ist der Prompt zu Aesthetic Onboarding eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 3.133 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Warum steht der Prompt von Aesthetic Onboarding hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 3.133 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Aesthetic Onboarding wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
