Über diese Vorlage
Immersive Ocean wurde bei 640x478 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Die Zeile lautet „Shaping visual narratives, one pixel at a time“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Das Farbschema ist tiefes blau #000410 darunter, grau #C2CFCA für die Schrift und petrol #0E4154 für die Akzente, und die Seite ist in Geist gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 640x478, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für cubic-bezier(0.16,1,0.3,1) aus. Lass es beim Schreiben offen: Die 4.030 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Dieses Hero-Bereich-Design beantwortet die Frage, was 100vh hohe Sektionen und Abstände in 80px-Schritten im Layout tatsächlich bewirken.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Immersive Ocean.
- Setze #000410 und #0E4154 als die zwei Markenfarben fest und baue das Hero-Bereich-Design dann innerhalb dieser Grenze neu.
Was enthalten ist
- Leiste im Raster der Seite. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #0E4154 und kommt über 100vh hohe Sektionen und Abstände in 80px-Schritten nicht hinaus, damit aus ihr kein zweiter Header wird. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #0E4154 ist das einzige Element in der Leiste mit Gewicht. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen.
- Schriften mit je einer Aufgabe. Die Schriften sind Rollen zugewiesen und nicht gemischt: Geist trägt Display und Oberfläche zusammen. Ein Schrifttausch ist möglich, die Proportionen müssen ihn aber überstehen.
- Der Aufbau passt in einen Screen. Die Komposition ist bei 640x478 vollständig: Text, Medien und Bedienelemente sind im Briefing benannt. Die Seite ist eine Komposition bei 640x478, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Ein Breakpoint für die Links. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x478, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Eine Dauer für die Bedienelemente
Eine Dauer deckt alle Interaktionen ab (0 auf cubic-bezier(0.16,1,0.3,1)); so wirken Hover und Druck als ein System. Kurze Zeiten lassen die Seite gesetzt wirken; ein langsamer Standard würde die Komposition zunichtemachen.
Eine kleine interaktive Fläche
Interaktion spielt sich hier an jedem Bedienelement ab (Hover-Zustände auf Buttons und Links statt auf jeder Karte), nichts auf der Seite bewegt sich als Nebeneffekt. Die interaktiven Zustände verschieben kein Layout, unter dem Zeiger springt also nichts. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Wie der Eintrag Hero-Bereich umbricht
Responsiv heißt hier: Die Skala ändert sich, die Abfolge nicht. der Bereich wird auf 100vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen, und die Leserichtung bleibt, wo das Briefing sie hingesetzt hat. Die Hierarchie ist das, was den Umbruch übersteht.
So wird der Eintrag Hero-Bereich deiner
Angenommen, du hast nur einen Nachmittag. Ändere die Zeile und das Label der Handlung; 100vh hohe Sektionen und Abstände in 80px-Schritten bleiben unangetastet, und du hast eine Seite, die beabsichtigt aussieht. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Wie Immersive Ocean den ersten Blick ordnet
Ein Screen, eine Handlung, und dazwischen die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, 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 Agentur bekommt das Angebot vor den Optionen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Immersive Ocean?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 640x478, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Hero-Bereich von Immersive Ocean in einem anderen Stack nachbauen?
Immersive Ocean 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 Immersive Ocean 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 640x478 erfasst.
