Über diese Vorlage
TrueEarth ist eine brauchbare Referenz für dieses Publikum: die Komposition (Landingpage), ausgelegt für eine Bildungs- oder Community-Marke, vermessen und bereit zum Nachbauen. Das Farbschema ist #FFFFFF darunter, #111417 für die Schrift und tiefes blau #0B2A3A für die Akzente, und die Seite ist in Plus Jakarta Sans gesetzt. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1422, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 72ms, cubic-bezier(.16,1.3,1) und eine Videospur in Schleife aus. Es ist die richtige Referenz für eine Landingpage, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an eine Bildungs- oder Community-Marke.
Gemacht für
- Wenn der Build auf eine eigenständige HTML-Datei aufsetzt, übernimm zuerst Schrift von 12px bis 16px und 100vh hohe Sektionen und lass die Palette in Ruhe, bis das Raster steht.
- Die Seite richtet sich an Frontend-Entwickler, die ein Landingpage-Design für eine Bildungs- oder Community-Marke in eine eigenständige HTML-Datei nachbauen und die Zahlen hinter der Optik suchen.
- Teams, die den Auftritt eines Wettbewerbers als Landingpage im Bereich Bildung nachbauen und eine eigenständige HTML-Datei festlegen wollen, bevor sich jemand auf ein Framework festlegt.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #0B2A3A, knapp genug, um neben dem Rest der Seite leise zu bleiben. Unter 360px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Unter 360px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Video in der untersten Ebene. Das Briefing legt das Video auf 1920x1422 mit einer Schleife von 6,9s fest, und jedes Textelement ist gegen diesen Rahmen gesetzt. Exportiere in 1920x1422 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Navigation ohne Hintergrund. Eine Aktion pro Leiste. Die Referenz wurde mit 1920x1422 erfasst.
- Das Briefing nennt die Stufen. Schrift und Abstände stammen hier aus einer einzigen Liste: Schrift von 12px bis 16px, 100vh hohe Sektionen, ein 2-Spalten-Raster und Radius 2px. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
Bewegung & Interaktion
Rückmeldung an den Bedienelementen
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. Jeder Zustand ändert eine Eigenschaft, das hält die Rückmeldung lesbar. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Eine Schleife, keine Timeline
Der Hintergrundclip läuft 6,9s in 1920x1422 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
TrueEarth als Spezifikation lesen
Die Schrift ist die erste Zahl: Schrift von 12px bis 16px und 100vh hohe Sektionen. Die Abstände folgen daraus, und alles andere auf der Seite ist gegen diese beiden Werte positioniert. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Was sich in TrueEarth bewegt
Bewegung ist eine kurze Liste und kein System: Übergänge von 72ms, eine Medienschleife von 6,9s und ein maskierter Zeilen-Reveal, und der Rest der Seite bleibt still. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Wie TrueEarth den ersten Blick ordnet
Eine strenge Reihenfolge kostet später Flexibilität. Kommt eine Sektion über den Fold, müssen Schrift von 12px bis 16px und 100vh hohe Sektionen neu geschnitten werden, weil die Abfolge tragend ist und nicht dekorativ. Ein Leser im Bereich Bildung bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie lang ist der Prompt hinter TrueEarth?
Das erfasste Briefing umfasst 23.498 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.
Warum nennt der Eintrag eine eigenständige HTML-Datei überhaupt?
TrueEarth 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.
Was kann ich mit dem Briefing zu TrueEarth machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 23.498 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
