Über diese Vorlage
Lies Prisma Creative Studio als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Die Überschrift der Seite lautet „I have skills in color grading, visual effects, and narrative design“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf schwarz #101010 darunter und weiß #E1E0CC für die Schrift begrenzt, gesetzt in Instrument Serif. Der Bau ist React und Tailwind CSS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Das Briefing gibt sein Bewegungsbudget für Übergänge von 0.08s 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 Agentur oder ein Studio.
Gemacht für
- Dieses Landingpage-Design ist für Agenturen gebaut, die den 455x800-Rahmen durch drei Runden Kundenkorrekturen bringen müssen.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 8.432 Zeichen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Prisma Creative Studio.
Was enthalten ist
- Obere Zeile, eine Aktion. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Instrument Serif gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 455x800, damit die Medien darunter bis an den Rand durchlaufen.
- Am Viewport gemessen. Das Layout ist gegen feste Werte gelöst (Abstände in 10px-Schritten und 0.08s Übergänge), und das hält den ersten Screen bei jeder Breite komponiert. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird.
- Eine Zeile, keine Schubladen. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt. Die Referenz wurde mit 455x800 erfasst.
- Gemessen statt geschätzt. Die Abstände sind genauso zitiert (Abstände in 10px-Schritten und 0.08s Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Das ganze Animationsbudget
Die Zeiten sind kurz und einheitlich: Übergänge laufen 0.08s, deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Das Easing steht zusammen mit der Dauer im Briefing (0.08s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Scroll treibt die Komposition
Parallax ist das einzige Scroll-Verhalten im Briefing, deshalb wirkt die Seite nicht wie eine Abfolge einzelner Effekte. Der Effekt beschränkt sich auf die im Briefing genannten Elemente und nicht auf die ganze Seite. Stapel keinen zweiten Scroll-Effekt.
Wie der Eintrag Landingpage umbricht
Wenn der Text lang ist, bricht zuerst das schmale Layout. Hier greift die Klemmung: eine Größe zwischen 100px und 10px fängt die Änderung auf, und die Skala ist fließend statt gestuft. Die Hierarchie ist das, was den Umbruch übersteht.
Warum diese Komposition für Agentur 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; Abstände in 10px-Schritten und 0.08s Übergänge stehen fest, damit eine Beleg-Sektion darunter ohne Umbau passt. Es gibt einem Leser im Bereich Agentur den kürzesten ehrlichen Weg zum Angebot.
So wird der Eintrag Landingpage deiner
Du musst den Eintrag Landingpage nicht neu bauen, um ihn zu deinem zu machen. Ersetz die Zeile und die Medien, behalt die Skala (Abstände in 10px-Schritten und 0.08s Übergänge), und das Layout liest weiterhin wie entworfen. Substitution ist billiger als Komposition, und darum geht es.
Häufige Fragen
Ist der Prompt zu Prisma Creative Studio eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 455x800, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Prisma Creative Studio hängt von React und Tailwind CSS ab?
Prisma Creative Studio 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 viel von Prisma Creative Studio ist animiert?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 0.08s angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
