Über diese Vorlage
Zyphor ist eine brauchbare Referenz für dieses Publikum: die Komposition (Hero-Bereich), ausgelegt für ein KI- oder SaaS-Produkt, vermessen und bereit zum Nachbauen. Die Überschrift der Seite lautet „Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive“, und die Komposition ist um genau diese Worte gebaut. Die Palette umfasst tiefes blau #0B0C10 darunter, die Schrift ist Inter. Geliefert wird React und Tailwind CSS, erfasst bei 1930x1400, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf eine Videospur in Schleife. Starte beim erfassten Briefing und bearbeite dann den Eintrag Hero-Bereich, statt von Grund auf neu zu bauen.
Gemacht für
- Marketingverantwortliche, die ein Hero-Bereich-Design übernehmen, ziehen Abstände in 20px-Schritten heran, um zu prüfen, ob eine Neufassung die Größenverhältnisse gehalten hat.
- Dieses Hero-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 7,2s Video in Schleife tragen kann.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 3.562 Zeichen.
Was enthalten ist
- Schmale Navigationsleiste. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Abstände in 20px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1930x1400, damit die Medien darunter bis an den Rand durchlaufen. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern.
- Eine Zeile, keine Schubladen. Hover- und Fokuszustände sind für jeden Link festgelegt, und genau das verhindert, dass eine dünne Leiste leblos wirkt. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Am Viewport gemessen. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: Abstände in 20px-Schritten. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern.
- Ein Medien-Element trägt die Stimmung. Das Briefing legt das Video auf 1930x1400 mit einer Schleife von 7,2s fest, und jedes Textelement ist gegen diesen Rahmen gesetzt. Exportiere in 1930x1400 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
Bewegung & Interaktion
Zeiger nur, wo sie helfen
Die Seite reagiert nur dort, wo man handeln kann: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Die Rückmeldung bleibt auf die Bedienelemente beschränkt, die Komposition um sie herum bleibt also still. Halte die interaktive Ebene klein.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung ist ein Clip von 7,2s in 1930x1400, 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.
Zyphor als Spezifikation lesen
Ein Screenshot sagt, wie die Seite aussieht; das Briefing sagt, warum. Abstände in 20px-Schritten schließen die Lücke zwischen beiden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Wie der Eintrag Hero-Bereich umbricht
Es gibt kein separates Mobil-Design zu pflegen. die Navigation klappt zu einem mobilen Menü zusammen, und dieselbe Hierarchie trägt über alle Breiten. Eine Quetschung wäre billiger gewesen und würde nicht halten.
Die Reihenfolge im Eintrag Hero-Bereich
Der Preis ist Geduld: Die Seite hält das Detail zurück, das ein scanbares Raster sofort liefern würde. Was sie dafür kauft, ist ein erster Screen, auf dem die Navigation und der Hintergrund-Clip nicht falsch gelesen werden können. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Zyphor?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1930x1400, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Zyphor hängt von React und Tailwind CSS ab?
Zyphor 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.
Darf ich Zyphor in einem Kundenprojekt verwenden?
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 1930x1400 erfasst.
