Über diese Vorlage
Das hier ist der Eintrag Landingpage von Data Signal, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Sie beginnt mit „Abstract red and blue smoke“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette umfasst tiefes petrol #050606 darunter und weiß #EDEDED für die Schrift, die Schrift ist Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1482x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 520ms, cubic-bezier(.16,1.3,1) und eine Videospur in Schleife. Lass es beim Schreiben offen: Die 12.007 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gemacht für Agenturen, die nach Runden abrechnen und eine feste Display-Größe von 16px und 19vh hohe Sektionen vor der ersten Runde verbindlich haben wollen.
- Teams, die Landingpage-Designs für ein KI- oder SaaS-Produkt bauen und eine eigenständige HTML-Datei schriftlich festhalten wollen, bevor ein Angebot rausgeht.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 5,9s Video in Schleife tragen kann.
Was enthalten ist
- Links vor der Aktion. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Inter gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Labels passen bei 619px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Eine Zahlenzeile statt einer Behauptung. Ein kompakter Zahlenstreifen trägt die Aussagen, die sonst einen Absatz bräuchten, und hält damit die Komposition (Landingpage) davon ab, zur Feature-Liste zu werden. Die Reihe ist an derselben Kante ausgerichtet wie die Headline darüber. Braucht eine Ziffer einen Absatz, ist sie keine Statistik. Die Referenz wurde mit 1482x1080 erfasst.
- Obere Zeile, eine Aktion. Unter 619px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Größen stehen im Briefing. Das Layout ist gegen feste Werte gelöst (eine feste Display-Größe von 16px, 19vh hohe Sektionen, Radius 7px und Abstände in 36px-Schritten), und das hält den ersten Screen bei jeder Breite komponiert. Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird. Die Zahlen sind das Design, der Rest ist Anordnung.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung ist ein Clip von 5,9s in 1482x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung.
Hover nur, wo er etwas bedeutet
Die Zeiger-Arbeit ist klein und festgelegt: Hover-Zustände auf Buttons und Links statt auf jeder Karte, angewendet auf die Elemente, die schon interaktiv aussehen. Die Zustände sind im Briefing benannt, die Seite hängt also nicht an einer Hover-Effekt-Bibliothek. Animiere im Hover kein Layout.
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 (eine feste Display-Größe von 16px und 19vh hohe Sektionen), und das Layout liest weiterhin wie entworfen. Dein Akzent muss denselben Kontrasttest bestehen wie der der Referenz.
Warum diese Komposition für SaaS trägt
Zähl die Entscheidungen im Eintrag Landingpage, und sie führen auf ein einziges Dokument zurück: 12.007 Zeichen, die den Rahmen bei 1482x1080, die Schrift und den Rhythmus benennen. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Die Zeitwerte hinter dem Eintrag Landingpage
So wenig Bewegung heißt, dass die Seite von Schrift und Rahmen lebt. Die Komposition steht auch dann noch, wenn die Bewegung entfällt; es bliebe nur Übergänge von 520ms, eine Medienschleife von 5,9s und Hover- und Druckzustände. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Wie viel von Data Signal hängt von eine eigenständige HTML-Datei ab?
Data Signal 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 bekomme ich, wenn ich das Briefing zu Data Signal kopiere?
Das erfasste Briefing umfasst 12.007 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.
Wie viel von Data Signal ist animiert?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 520ms mit cubic-bezier(.16,1.3,1) abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
