Über diese Vorlage
Portiva Hero zeigt einen Weg, die Komposition (Hero-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für eine Agentur oder ein Studio, und die Anweisungen dazu sind veröffentlicht. Sie beginnt mit „Less complexity, more impact in every project“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette ist petrol #087573 darunter, weiß #D1E5E7 für die Schrift und orange #C25E2E für die Akzente, gesetzt in Inter. Es kommt als eine eigenständige HTML-Datei, damit sich der ganze Hero-Bereich ohne Design-Übergabe in ein Projekt heben lässt. Die Bewegung bleibt auf Übergänge von 120ms und eine Videospur in Schleife beschränkt. Nutze es als Referenz, wenn du eine Hero-Bereich für dieses Publikum baust, also für eine Agentur oder ein Studio, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Growth-Teams, die ein Hero-Bereich-Design für eine Agentur oder ein Studio neu einfärben und den 1466x1080-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Gemacht für Designer, die in ein Projekt kommen, das schon auf eine eigenständige HTML-Datei läuft und nur noch neue Texte braucht.
- Frontend-Entwickler, die das in eine eigenständige HTML-Datei nachbauen und die Übergänge spezifiziert statt geraten haben wollen.
Was enthalten ist
- Leiste im Raster der Seite. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #C25E2E und kommt über Abstände in 62px-Schritten und 120ms Übergänge nicht hinaus, damit aus ihr kein zweiter Header wird. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #C25E2E ist das einzige Element in der Leiste mit Gewicht.
- Vollflächiges Video, keine Kachel. Der Rahmen 1466x1080 wird von einer einzigen Schleife gefüllt, die hinter dem Text läuft und keine Bedienelemente verlangt. Exportiere in 1466x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter. Exportiere bei 1466x1080 oder breiter, damit der Zuschnitt ehrlich bleibt.
- Schmale Navigationsleiste. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1466x1080, damit die Medien darunter bis an den Rand durchlaufen. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen.
- Abstände als Werte genannt. Das Layout ist gegen feste Werte gelöst (Abstände in 62px-Schritten und 120ms Übergänge), und das hält den ersten Screen bei jeder Breite komponiert. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen.
Bewegung & Interaktion
Zeiten in Millisekunden
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 120ms bei jedem Zustandswechsel. Fokus-Zustände laufen mit demselben Wert wie Hover, Tastatur- und Zeiger-Rückmeldung passen dadurch zusammen. Schnelle Zustandswechsel, keine Scroll-Timelines.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung ist ein Clip von 4,5s in 1466x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Wie Portiva Hero den ersten Blick ordnet
Aufmerksamkeit wird gelenkt und nicht dem Zufall überlassen. „Less complexity, more impact in every project“ leistet diese Arbeit ab dem ersten Frame. Die Abfolge steht fest: die Navigation, das Ankündigungs-Badge, das Kartenraster und der Hintergrund-Clip, und Abstände in 62px-Schritten und 120ms Übergänge bestimmen die Größe jeder Station, damit nichts in falscher Reihenfolge ankommt. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Die Schrift ist die erste Zahl: Abstände in 62px-Schritten und 120ms Übergänge. Die Abstände folgen daraus, und alles andere auf der Seite ist gegen diese beiden Werte positioniert. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Wie der Eintrag Hero-Bereich umbricht
Responsiv heißt hier, dass sich die Skala ändert, nicht die Hierarchie: die Navigation klappt zu einem mobilen Menü zusammen. Text bleibt über dem Fold, Bedienelemente bleiben groß genug zum Tippen, und reduzierte Bewegung wird berücksichtigt. Die Breite ändert die Maße, nicht den Lesepfad.
Häufige Fragen
Wie lang ist der Prompt hinter Portiva Hero?
Das erfasste Briefing umfasst 2.639 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.
Brauche ich eine eigenständige HTML-Datei, um Portiva Hero nachzubauen?
Portiva Hero 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.
Warum steht der Prompt von Portiva Hero hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 2.639 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
