Über diese Vorlage
Portal wurde bei 800x609 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Die Überschrift der Seite lautet „A voyage through forgotten realms, where past and future intertwine“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf schwarz #292926 darunter, gedämpftes orange #F3BC9E für die Schrift und rot #E1836B für die Akzente begrenzt, gesetzt in Inter. Geliefert wird React und Tailwind CSS, erfasst bei 800x609, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 300ms aus. Am nützlichsten ist es, wenn beim Eintrag Hero-Bereich für Lifestyle ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Gemacht für einen Solo-Gründer, der ein Hero-Bereich-Design für eine Lifestyle-Marke ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 6.663 Zeichen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Portal.
Was enthalten ist
- Zurückhaltende Navigation. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #E1836B, alles über der Komposition (Hero-Bereich) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #E1836B ist das einzige Element in der Leiste mit Gewicht. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern.
- Abstände als Werte genannt. Das Layout ist gegen feste Werte gelöst (Abstände in 20px-Schritten und 300ms Übergänge), und das hält den ersten Screen bei jeder Breite komponiert. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
- Eine Leiste ohne Beiwerk. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x609, damit die Medien darunter bis an den Rand durchlaufen.
- Größen stehen im Briefing. Die Abstände sind genauso zitiert (Abstände in 20px-Schritten und 300ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Zustandswechsel mit Zeitwert
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 300ms. Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Ein Wert wird für alle Bedienelemente wiederverwendet, ihr Timing kann also nicht auseinanderlaufen.
Hover, aber sparsam
Jedes interaktive Element tut eine Sache (Hover-Zustände auf Buttons und Links statt auf jeder Karte), dadurch bleiben die Zustände vorhersehbar. Die Zustände stammen aus der Palette der Seite und nicht aus einem Komponenten-Standard.
Wie Portal den ersten Blick ordnet
Nichts konkurriert hier mit der ersten Entscheidung. Die Seite sagt es selbst: „A voyage through forgotten realms, where past and future intertwine“. Das Stützmaterial wartet unter dem Fold, und die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip tragen die obere Seite allein. Ein Leser im Bereich Lifestyle bekommt das Angebot vor den Optionen.
So wird der Eintrag Hero-Bereich deiner
Fang beim Versprechen an, nicht bei der Dekoration. Schreibe „A voyage through forgotten realms, where past and future intertwine“ zu einem Satz um, der sagt, was du machst, und setze ihn in Inter in der Display-Größe aus dem Briefing. Ersetze rot #E1836B durch deinen eigenen Akzent und prüfe ihn gegen schwarz #292926, bevor du etwas anderes anfasst. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
Die Zahlen hinter dem Eintrag Hero-Bereich
Zerleg den Eintrag Hero-Bereich, und die Werte beschreiben ihn weiterhin: Abstände in 20px-Schritten und 300ms Übergänge geben Rahmen und Rhythmus darunter vor. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Portal kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x609, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Portal 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.
Kann ich eine aus Portal nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
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 800x609 erfasst.
