Über diese Vorlage
Das hier ist der Eintrag Hero-Bereich von Portal, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Palette umfasst neutral #F2F2EE darunter, abdunkelung #192837 für die Schrift und abdunkelung #7342E2 für die Akzente, die Schrift ist Helvetica Now Display. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Die Seite begrenzt die Bewegung auf Übergänge von 0.3s. Lass es beim Schreiben offen: Die 5.718 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Dieses Hero-Bereich-Design richtet sich an Teams, die ein 640x474 Rahmen gegenüber jemandem rechtfertigen müssen, der nicht im Kickoff saß.
- Marketingverantwortliche, die ein Hero-Bereich-Design übernehmen, ziehen 100vh hohe Sektionen und Abstände in 24px-Schritten heran, um zu prüfen, ob eine Neufassung die Größenverhältnisse gehalten hat.
- Das Hero-Bereich-Layout ist für Product Manager zugeschnitten, die beim Nachbau #7342E2 wiederverwenden wollen, statt eine Palette zu erfinden.
Was enthalten ist
- Zurückhaltende Navigation. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #7342E2, alles über der Komposition (Hero-Bereich) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #7342E2 ist das einzige Element in der Leiste mit Gewicht. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Größen stehen im Briefing. Das Briefing hält seine Größen bei der Aufnahme fest (100vh hohe Sektionen, Abstände in 24px-Schritten und 0.3s Übergänge), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen. Miss nach, bevor du anpasst.
- Der Aufbau passt in einen Screen. Die Komposition ist bei 640x474 vollständig: Text, Medien und Bedienelemente sind im Briefing benannt. Die Seite ist eine Komposition bei 640x474, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x474, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Zeiten in Millisekunden
Das Animationsbudget ist klein und ausdrücklich benannt: 0.3s, eingesetzt für Zustandswechsel und nicht für Auftritte. Das Easing steht zusammen mit der Dauer im Briefing (0.3s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Schnelle Zustandswechsel, keine Scroll-Timelines.
Zeiger nur, wo sie helfen
Die Zeiger-Arbeit ist klein und festgelegt: Hover-Zustände auf Buttons und Links statt auf jeder Karte, angewendet auf die Elemente, die schon interaktiv aussehen. Druck-Zustände sind ebenso festgelegt wie Hover, ein Tippen bestätigt also genauso wie ein Klick.
Die Reihenfolge im Eintrag Hero-Bereich
Ein Screen, eine Handlung, und dazwischen die Navigation, das Ankündigungs-Badge, die Feature-Liste und der Hintergrund-Clip. Das Briefing legt diese Reihenfolge fest, statt den ersten Screen einem Stapel von Sektionen zu überlassen. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Der Preis einer festen Skala ist weniger Raum zum Improvisieren. 100vh hohe Sektionen und Abstände in 24px-Schritten halten die Komposition zusammen, aber ein neues Element muss eingepasst und nicht platziert werden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Warum das Briefing für SaaS trägt
Du könntest das als Stapel einzelner Karten nachbauen und würdest nur das Argument verlieren. Der Eintrag Hero-Bereich liest sich als eine Entscheidung: die Navigation, das Ankündigungs-Badge, die Feature-Liste und der Hintergrund-Clip in einer einzigen Abfolge. Portal 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 Portal eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 5.718 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.
Kann ich die Übergänge von Portal behalten und nur die Zeitwerte ändern?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 0.3s abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
Was kann ich mit dem Briefing zu Portal machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.718 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
