Über diese Vorlage
Das hier ist der Eintrag Landingpage von JungleMind, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Palette umfasst #5C5C5C darunter und #111111 für die Schrift, die Schrift ist Poppins. Der Bau ist vanilla JS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Die Bewegung kommt über Übergänge von 70ms, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 36.531 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gemacht für Studios, die einem Kunden das Verhalten bei 340px erklären müssen, ohne vorher einen Prototyp zu bauen.
- Gründer, die eine Agentur briefen, nehmen den 1920x1422-Rahmen als Abnahmekriterium für die erste Runde.
- Produktmarketer, die brauchen, dass die Komposition (Landingpage) auch mit 6,9s Video in Schleife hinter dem Text lesbar bleibt.
Was enthalten ist
- Schmale Navigationsleiste. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Poppins gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Unter 340px klappen die Links ein, statt in eine zweite Zeile umzubrechen. Eine Aktion pro Leiste.
- Das Video ist Hintergrund, keine Fläche. Die Medien sind ein Clip von 6,9s, auf volle Abdeckung des Rahmens 1920x1422 zugeschnitten, damit bei keiner Breite schwarze Ränder entstehen. Die Schleife ist kurz genug (6,9s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Eine Zeile, keine Schubladen. Halte die Zeile einzeilig. Die Referenz wurde mit 1920x1422 erfasst.
- Größen im Briefing fixiert. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Schrift von 12px bis 25px, 100vh hohe Sektionen, Radius 9px und Abstände in 16px-Schritten. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
Bewegung & Interaktion
Interaktion sitzt auf den Bedienelementen
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. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Kurze, benannte Zeiten
Die Zeiten sind kurz und einheitlich: Übergänge laufen 70ms mit cubic-bezier(0.16, 1, 0.3, 1), deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Die angegebene Zeit betrifft Zustandswechsel, die Rückmeldung ist damit der spezifizierte Teil der Bewegung. Eine Dauer pro Verhalten.
Warum diese Komposition für SaaS trägt
Zurückhaltung kostet Platz für Belege über dem Fold. Dieses Briefing akzeptiert den Preis und gibt den ersten Screen für das Angebot aus; Schrift von 12px bis 25px und 100vh hohe Sektionen stehen fest, damit eine Beleg-Sektion darunter ohne Umbau passt. JungleMind nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Die Zahlen hinter dem Eintrag Landingpage
36.531 Zeichen Briefing ergeben eine vollständige Spezifikation. Der tragende Teil ist kurz: Schrift von 12px bis 25px, 100vh hohe Sektionen, Radius 9px und Abstände in 16px-Schritten. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Wie der Eintrag Landingpage umbricht
Wenn der Text lang ist, bricht zuerst das schmale Layout. Hier greift die Klemmung: eine Größe zwischen 12px und 25px fängt die Änderung auf, und die Schrift ist zwischen 12px und 25px begrenzt, das Layout wechselt bei 340px und der Bereich wird auf 100vh gehalten. Die Mobil-Version ist eine Entscheidung und kein Notfallplan.
Häufige Fragen
Was steht eigentlich im Briefing hinter JungleMind?
Das erfasste Briefing umfasst 36.531 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 Landingpage von JungleMind in einem anderen Stack nachbauen?
JungleMind wurde in vanilla JS 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 verhalten sich die 70ms Übergänge in JungleMind?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 70ms mit cubic-bezier(0.16, 1, 0.3, 1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
