Über diese Vorlage
Sparkform: Landingpage für Agentur, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die Palette umfasst helles orange #EC612C darunter, weiß #FFFFFF für die Schrift und petrol #89CFF0 für die Akzente, die Schrift ist Inter. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Die Bewegung ist Übergänge von 0.05s und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 6.724 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Product Manager, die den Aufwand schätzen müssen, lesen ein 1460x1080 Rahmen als Umfang der Arbeit.
- Designer, die zuerst die Zahlen brauchen: 120vh hohe Sektionen und Abstände in 12px-Schritten, alle aus dem Briefing zitiert.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Agentur 7,6s Video in Schleife tragen kann.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #89CFF0 und kommt über 120vh hohe Sektionen und Abstände in 12px-Schritten nicht hinaus, damit aus ihr kein zweiter Header wird. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #89CFF0 ist das einzige Element in der Leiste mit Gewicht. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Ein Clip trägt alles. Das Video über 1460x1080 läuft 7,6s in Schleife hinter dem Text, stumm und inline, ohne Tönungsebene dazwischen. Exportiere in 1460x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Ein Breakpoint für die Links. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht. Die Referenz wurde mit 1460x1080 erfasst.
- Am Viewport gemessen. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: 120vh hohe Sektionen, Abstände in 12px-Schritten und 0.05s Übergänge. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Der Hintergrundclip läuft 7,6s in 1460x1080 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. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Die Bedienelemente sind die interaktive Schicht
Interaktion spielt sich hier an jedem Bedienelement ab (ein Sticky-Element, das seine Position hält, während der Inhalt darunter durchläuft), nichts auf der Seite bewegt sich als Nebeneffekt. Die Zustände sind im Briefing benannt, die Seite hängt also nicht an einer Hover-Effekt-Bibliothek.
Was du in Sparkform zuerst änderst
Wenn deine Marke eine schwerere Palette fährt, prüf sie vor der Entscheidung gegen den Rahmen. helles orange #EC612C trägt die Seite, ein dunklerer Akzent braucht also mehr Kontrast als die Referenz. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
Wie Sparkform den ersten Blick ordnet
In dieser Reihenfolge: die Navigation, die Kennzahlen-Zeile und die Feature-Liste. Jedes Element hat eine Aufgabe, und petrol #89CFF0 ist ausschließlich dem Element vorbehalten, das gedrückt werden soll. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Warum diese Komposition für Agentur trägt
Auf dieser Seite steht ein einziges Versprechen, und 120vh hohe Sektionen und Abstände in 12px-Schritten halten es an seinem Platz. Nichts unterhalb des Folds muss das Angebot ebenfalls tragen. Sparkform nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Wie lang ist der Prompt hinter Sparkform?
Das erfasste Briefing umfasst 6.724 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 React und Tailwind CSS überhaupt?
Sparkform 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 Sparkform ist animiert?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 0.05s angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
