Über diese Vorlage
Veyra Electric hält den Entscheidungsweg fest: Hinter dem Eintrag Landingpage stehen 12.080 Zeichen Briefing. Das Farbschema ist gedämpftes blau #6B879D darunter und weiß #FFFFFF für die Schrift, und die Seite ist in Space Grotesk gesetzt. Der Bau ist React und Vite; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Die Bewegung beschränkt sich auf eine Videospur in Schleife. Starte beim erfassten Briefing und bearbeite dann den Eintrag Landingpage, statt von Grund auf neu zu bauen.
Gemacht für
- Dieses Landingpage-Design richtet sich an Teams, die ein 1920x1412 Rahmen gegenüber jemandem rechtfertigen müssen, der nicht im Kickoff saß.
- Designer, die zuerst die Zahlen brauchen: 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 Industrie 6,3s Video in Schleife tragen kann.
Was enthalten ist
- Obere Zeile, eine Aktion. 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 1920x1412, damit die Medien darunter bis an den Rand durchlaufen. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Gemessen statt geschätzt. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Abstände in 12px-Schritten. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Ein Feld, eine Aktion. Hier ist eine Entscheidung zu treffen: das Formular ausfüllen oder gehen. Alles andere auf dem Screen stützt diese Entscheidung. Die Labels stehen über ihren Eingabefeldern, und der Begleittext bleibt über dem ersten Feld.
- Spalten, keine Linkhalde. Die Links sind zu Spalten gruppiert, die Wortmarke hat ihren eigenen Block, und das hält einen langen Footer lesbar, statt ihn zu einer Liste zu machen. Die Wortmarke bekommt ihren eigenen Block, was eine lange Linkliste lesbar hält. Behalte den Akzent für eine einzelne Aktion.
Bewegung & Interaktion
Szene statt Standbild
Das Herzstück wird live gerendert (ein WebGL-Canvas) und nicht als Bild ausgeliefert, die 1920x1412-Komposition reagiert also auf den Viewport, statt dahinter zu liegen. Im Briefing ist kein Bildwechsel vorgesehen, die Szene gehört also zum ersten Seitenaufbau.
Die Bedienelemente sind die interaktive Schicht
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. Hover und Fokus sind gemeinsam festgelegt, Zeiger und Tastatur bekommen dadurch dieselbe Information. Weniger Zustände, vollständig festgelegt.
Die Zahlen hinter dem Eintrag Landingpage
Der Preis für Wiederholbarkeit sind feste Zahlen: Abstände in 12px-Schritten. Genau darum geht es bei dieser Referenz: dieselbe Seite in einer anderen Marke, ohne einen neuen Satz Vermutungen. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Wie Veyra Electric den ersten Blick ordnet
Das Briefing umfasst 12.080 Zeichen und benennt die Leserichtung ausdrücklich: die Navigation, die Kennzahlen-Zeile, das Formular, der Countdown und der Hintergrund-Clip, dazwischen Abstände in 12px-Schritten. Ein Leser im Bereich Industrie bekommt das Angebot vor den Optionen.
Warum das Briefing für Industrie trägt
Du könntest das als Stapel einzelner Karten nachbauen und würdest nur das Argument verlieren. Der Eintrag Landingpage liest sich als eine Entscheidung: die Navigation, die Kennzahlen-Zeile, das Formular, der Countdown und der Hintergrund-Clip in einer einzigen Abfolge. Es gibt einem Leser im Bereich Industrie den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter Veyra Electric?
Das erfasste Briefing umfasst 12.080 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 Veyra Electric hängt von React und Vite ab?
Nein. Das Briefing ist eine Spezifikation, keine Liste von Abhängigkeiten. Es wurde für React und Vite geschrieben, dieselbe Komposition lässt sich aber in allem nachbauen, was du ohnehin nutzt. Der Stack ist genannt, damit du weißt, wie die Referenz entstanden ist.
Woher stammt das Design von Veyra Electric?
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 1920x1412 erfasst.
