Über diese Vorlage
Bevor du beim Thema Landingpage für eine Bildungs- oder Community-Marke nachbaust, lies Neo Museum: Komposition und Spezifikation stehen beide hier. Sie beginnt mit „Step into the natural world and discover the stories written millions of years ago“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Das Farbschema ist weiß #FCFCFC darunter und schwarz #0A0A0A für die Schrift, und die Seite ist in Inter gesetzt. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung beschränkt sich auf Übergänge von 2800ms und cubic-bezier(0.16,1,0.3,1). Nimm es als Briefing für eine Bildungs- oder Community-Marke: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Designer, die zuerst die Zahlen brauchen: Schrift von 12px bis 15px und 75vh hohe Sektionen, alle aus dem Briefing zitiert.
- Dieses Landingpage-Design ist für Agenturen gebaut, die den 640x468-Rahmen durch drei Runden Kundenkorrekturen bringen müssen.
- Gemacht für einen Solo-Gründer, der ein Landingpage-Design für eine Bildungs- oder Community-Marke ausliefert und kein Designsystem im Rücken hat.
Was enthalten ist
- Schmale Navigationsleiste. Die Leiste überlagert Landingpage, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x468, damit die Medien darunter bis an den Rand durchlaufen.
- Das Briefing nennt die Stufen. Schrift und Abstände stammen hier aus einer einzigen Liste: Schrift von 12px bis 15px, 75vh hohe Sektionen, Abstände in 10px-Schritten und 2800ms Übergänge. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang.
- Leiste im Raster der Seite. Halte die Zeile einzeilig. Die Referenz wurde mit 640x468 erfasst.
- Werte zum Nachmessen. Die Abstände sind genauso zitiert (Schrift von 12px bis 15px, 75vh hohe Sektionen, Abstände in 10px-Schritten und 2800ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Dauern aus dem Briefing
Das Animationsbudget ist klein und ausdrücklich benannt: 2800ms auf cubic-bezier(0.16,1,0.3,1), eingesetzt für Zustandswechsel und nicht für Auftritte. Weil die Werte kurz sind, fällt ein Nachbau mit langsameren Zeiten sofort auf.
Die Kennzahl zählt beim Eintritt hoch
Zahlen zählen hoch, sobald sie in den Viewport kommen, gesetzt in Inter in der Display-Größe. Das Hochzählen ist kurz genug, um als Reveal zu lesen und nicht als Ladezustand.
Wie der Eintrag Landingpage umbricht
Das schmale Layout ist entworfen und nicht geerbt. der Bereich wird auf 75vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen, damit die Hierarchie bei jeder Breite den Umbruch übersteht. Autoplay und Bewegung sind ehrlich behandelt, die Seite kommuniziert also auch ohne sie.
Warum das Briefing für Bildung trägt
Das Design argumentiert auf einem einzigen Screen. Das Medium ist ein Standbild in 640x468. Die Medien tragen die Atmosphäre, der Text trägt das Angebot, und Schrift von 12px bis 15px und 75vh hohe Sektionen halten beides auseinander. Es gibt einem Leser im Bereich Bildung den kürzesten ehrlichen Weg zum Angebot.
Die Reihenfolge im Eintrag Landingpage
Das Briefing umfasst 15.036 Zeichen und benennt die Leserichtung ausdrücklich: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip, dazwischen Schrift von 12px bis 15px und 75vh hohe Sektionen. Ein Leser im Bereich Bildung bekommt das Angebot vor den Optionen.
Häufige Fragen
Ist der Prompt zu Neo Museum eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 15.036 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.
Was kann ich mit dem Briefing zu Neo Museum machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 15.036 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Neo Museum 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.
