Über diese Vorlage
Real-Time Alerts ist die Referenz (Anmeldebildschirm) für dieses Publikum, also für ein KI- oder SaaS-Produkt. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Sie beginnt mit „Built for fast-moving teams“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Das Farbschema ist neutral #797979 darunter und abdunkelung #2F2A27 für die Schrift, und die Seite ist in Eloquia gesetzt. Es kommt als eine eigenständige HTML-Datei, damit sich der ganze Anmeldebildschirm ohne Design-Übergabe in ein Projekt heben lässt. Die Bewegung beschränkt sich auf Übergänge von 3500ms, cubic-bezier(.2.7.3,1) und eine Videospur in Schleife. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema Anmeldebildschirm wandern unverändert in deine Marke.
Gemacht für
- Entwickler, die das Anmeldebildschirm-Design auch bei langsamer Verbindung am Leben halten müssen, planen 1738x1080 und die Schriftgrößen-Skala als Gewichtsbudget ein.
- Wenn du ein Modell statt eines Designers briefst, starte mit dem Anmelde-Flow-Briefing und lass den Prompt eine eigenständige HTML-Datei festhalten.
- Product Manager, die den Aufwand schätzen müssen, lesen ein Breakpoint bei 370px als Umfang der Arbeit.
Was enthalten ist
- Werte bis in den Build. Die Größen wurden am Render in 1738x1080 abgelesen: eine feste Display-Größe von 16px, 100vh hohe Sektionen, Radius 26px und Abstände in 10px-Schritten. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Ein Feld, eine Aktion. Hier ist eine Entscheidung zu treffen: das Formular ausfüllen oder gehen. Alles andere auf dem Screen stützt diese Entscheidung. Die Felder sind in einer Spalte gestapelt, damit die Tab-Reihenfolge der Lesereihenfolge entspricht. Lass die Labels sichtbar; nutze keine Felder, die nur aus einem Platzhalter bestehen.
- Labels unter den Zahlen. Die Zahlen stehen in Eloquia in einer Größe, die näher an der Headline liegt als am Fließtext. Die Zeile gehört zum ersten Screen und nicht zu einem eigenen Band, was den Beleg nah an der Aussage hält.
- Feste Stufen statt einer Skala. Die Abstände sind genauso zitiert (eine feste Display-Größe von 16px, 100vh hohe Sektionen, Radius 26px und Abstände in 10px-Schritten) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Die Bedienelemente reagieren in 3500ms, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Die Werte sind kurz genug, um als Rückmeldung zu lesen und nicht als Animation. Die Zeiten gehören zum Design, nicht in den Feinschliff.
Der Streifen, der nie anhält
Ein Laufband zieht in einer Endlosschleife durch die Komposition, gesetzt in Eloquia. Weil der Streifen dekorativ ist, lässt er sich pausieren oder weglassen, ohne das Layout zu ändern.
Wie Real-Time Alerts den ersten Blick ordnet
Eine solche Seite vergräbt die Handlung meist unter einem Feature-Raster. Diese hält die Abfolge fest: die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und das Formular, mit der Handlung im ersten Screen statt nach drei Scrolllängen. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was du in Real-Time Alerts zuerst änderst
Setz den neuen Text in der Display-Größe, die das Briefing nennt (eine feste Display-Größe von 16px und 100vh hohe Sektionen), und der Rest der Skala folgt ohne Redesign. Schreib Text und Medien um, bevor du irgendetwas neu einfärbst.
Real-Time Alerts als Spezifikation lesen
Die Seite enthält mehr Zahlen, als es den Anschein hat. eine feste Display-Größe von 16px, 100vh hohe Sektionen, Radius 26px, Abstände in 10px-Schritten und 3500ms Übergänge sind die, die ein Nachbau behalten muss; der Rest darf wandern. Nichts in diesem Eintrag Anmeldebildschirm hängt an einer Voreinstellung.
Häufige Fragen
Warum nennt der Eintrag eine eigenständige HTML-Datei überhaupt?
Real-Time Alerts wurde in eine eigenständige HTML-Datei 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.
Was kann ich mit dem Briefing zu Real-Time Alerts machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 21.771 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Ist der Prompt zu Real-Time Alerts eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1738x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
