Über diese Vorlage
RIVR ist eine brauchbare Referenz für dieses Publikum: die Komposition (Hero-Bereich), ausgelegt für ein Fintech-Produkt, vermessen und bereit zum Nachbauen. Die Überschrift der Seite lautet „Fluid Asset Streams“, und die Komposition ist um genau diese Worte gebaut. Das Farbschema ist grau #969BA2 darunter, und die Seite ist in Helvetica gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 800x599, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Wenn du ein Briefing zum Thema Hero-Bereich im Bereich Fintech schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Gemacht für Agenturen, die nach Runden abrechnen und Schrift von 12px bis 80px und Abstände in 14px-Schritten vor der ersten Runde verbindlich haben wollen.
- Gemacht für einen Solo-Gründer, der ein Hero-Bereich-Design für ein Fintech-Produkt ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 8.089 Zeichen.
Was enthalten ist
- Ein Breakpoint für die Links. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Helvetica gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x599, damit die Medien darunter bis an den Rand durchlaufen. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern.
- Abstände als Werte genannt. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt Schrift von 12px bis 80px und Abstände in 14px-Schritten, und der Build muss genau diese Werte treffen. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet.
- Navigation ohne Hintergrund. Hover- und Fokuszustände sind für jeden Link festgelegt, und genau das verhindert, dass eine dünne Leiste leblos wirkt. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Werte bis in den Build. Die Abstände sind genauso zitiert (Schrift von 12px bis 80px und Abstände in 14px-Schritten) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Zeiger-Zustände, mehr nicht
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte; genau das verhindert, dass eine dichte erste Bildschirmfläche überladen wirkt. Ein Bedienelement, das interaktiv aussieht, verhält sich auch so; es gibt keine falschen Affordanzen. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Fast keine Bewegung
Eine Scroll-Bibliothek gibt es hier nicht: Die 800x599-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein.
Das Argument des Eintrags Hero-Bereich
Zähl die Entscheidungen im Eintrag Hero-Bereich, und sie führen auf ein einziges Dokument zurück: 8.089 Zeichen, die den Rahmen bei 800x599, die Schrift und den Rhythmus benennen. RIVR nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie RIVR den ersten Blick ordnet
Das Briefing umfasst 8.089 Zeichen und benennt die Leserichtung ausdrücklich: die Navigation, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip, dazwischen Schrift von 12px bis 80px und Abstände in 14px-Schritten. Ein Leser im Bereich Fintech bekommt das Angebot vor den Optionen.
Was sich in RIVR bewegt
Wenn eine Seite unruhig wirkt, sind es meist zu viele Auftritte. Diese hält die Liste kurz: Hover- und Druckzustände. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Was steht eigentlich im Briefing hinter RIVR?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x599, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von RIVR hängt von React und Tailwind CSS ab?
RIVR 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.
Wie gehe ich mit den Medien von RIVR in einem Kundenprojekt um?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 800x599 erfasst.
