Über diese Vorlage
Das hier ist der Eintrag Landingpage von Synth Mode, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Zeile lautet „LGPSM — Future Forward Fashion“, und der Rest des Eintrags Landingpage ordnet sich darum. Das Farbschema ist weiß #EBEBED darunter und gedämpftes blau #64748B für die Akzente, und die Seite ist in Plus Jakarta Sans gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 1920x1396, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 3s und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Es ist die richtige Referenz für eine Landingpage, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an eine E-Commerce-Marke.
Gemacht für
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 10.533 Zeichen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Synth Mode.
- Gemacht für Gründer, die #64748B schon gewählt haben und sonst nichts am Landingpage-Design entschieden haben.
Was enthalten ist
- Navigation in einer Zeile. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #64748B und kommt über 3s Übergänge nicht hinaus, damit aus ihr kein zweiter Header wird. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #64748B ist das einzige Element in der Leiste mit Gewicht.
- Inhalte in Panels aufgeteilt. Das Raster ist die Struktur: gleich große Panels, in Plus Jakarta Sans gesetzt, so angeordnet, dass das Auge quer statt nach unten wandert. Der Abstand zwischen den Panels ist ein einziger Wert, das hält ein dichtes Raster davon ab, gedrängt zu wirken. Lass die Panel-Anzahl aus dem Text folgen.
- Obere Zeile, eine Aktion. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1396, damit die Medien darunter bis an den Rand durchlaufen.
- Abstände als Werte genannt. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: 3s Übergänge. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung ist ein Clip von 7,3s in 1920x1396, 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. Dreh oder exportiere in 1920x1396 oder breiter.
Zustandswechsel mit Zeitwert
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 3s bei jedem Zustandswechsel. Das Easing steht zusammen mit der Dauer im Briefing (3s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Wie Synth Mode den ersten Blick ordnet
Wenn deine Seite heute mit Features beginnt, ist das die Reihenfolge zum Übernehmen: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster vorn, das Stützdetail danach, und 3s Übergänge bestimmen den Abstand. Ein Leser im Bereich E-Commerce bekommt das Angebot vor den Optionen.
Synth Mode als Spezifikation lesen
Genau das macht die Referenz wiederverwendbar: 3s Übergänge. Nichts bleibt einem Standard überlassen, ein Ersatz mit denselben Zahlen behält also die Komposition. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Die Zeitwerte hinter dem Eintrag Landingpage
Wo ein Template jede Sektion beim Eintritt animiert, ist die Liste hier kurz: Übergänge von 3s, eine Medienschleife von 7,3s und Parallax-Ebenen, und dann Ruhe. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Synth Mode kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1396, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Synth Mode hängt von React und Tailwind CSS ab?
Synth Mode 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 gehe ich mit den Medien von Synth Mode in einem Kundenprojekt um?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 1920x1396 erfasst.
