Über diese Vorlage

VEX Ventures wurde bei 800x603 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Sie beginnt mit „We back visionaries and craft ventures that define what comes next“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Seite ist in Inter gesetzt, die Größen stehen im Briefing fest. Geliefert wird React und Tailwind CSS, erfasst bei 800x603, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 1000ms und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 5.051 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.

Gemacht für

  • Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von VEX Ventures.
  • Das Hero-Bereich-Layout passt zu Growth-Teams, die die Headline im A/B-Test tauschen, ohne Inter anzufassen.
  • Behalte Inter und baue das Hero-Bereich-Design darum herum neu, statt für deine Marke eine neue Schriftgrößen-Skala aufzumachen.

Was enthalten ist

  • Obere Zeile, eine 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 Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x603, damit die Medien darunter bis an den Rand durchlaufen.
  • Schmale Navigationsleiste. Die Aktion ist das einzige Element der Zeile mit Füllung, dadurch bleiben die Links als Text lesbar. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
  • Größen stehen im Briefing. Die Werte sind die Spezifikation: Abstände in 18px-Schritten und 1000ms Übergänge, aufgenommen bei 800x603 und nicht aus einem Screenshot abgeleitet. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
  • Zahlen als Typografie. Die Zahlenzeile ist der Beleg: drei oder vier Ziffern in einer Zeile, kleine Labels darunter, in derselben Inter wie die Oberfläche, damit sie als Daten und nicht als Dekoration gelesen wird. Die Zahlen haben ein einziges Gewicht, die Reihe rankt ihre eigenen Statistiken also nicht.

Bewegung & Interaktion

Interaktion bleibt lokal

Die interaktive Ebene ist bewusst klein: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Druck-Zustände sind ebenso festgelegt wie Hover, ein Tippen bestätigt also genauso wie ein Klick. Wenn ein Zustand keine Aktion bestätigt, lass ihn weg.

Zeiten in Millisekunden

Hover-, Druck- und Fokuszustände lösen sich alle in 1000ms auf, deshalb wirkt die Oberfläche unmittelbar. Weil die Werte kurz sind, fällt ein Nachbau mit langsameren Zeiten sofort auf.

Wie der Eintrag Hero-Bereich umbricht

Wenn deine Breakpoints gewählt wurden, damit etwas passt, statt das Layout zu ändern, lies diesen Eintrag. die Skala ist fließend statt gestuft statt einer Liste ausgeblendeter Elemente. Die Hierarchie ist das, was den Umbruch übersteht.

Die Zahlen hinter dem Eintrag Hero-Bereich

Eine Komposition lässt sich nicht nach Augenmaß fixieren, wenn zwei Leute sie nachbauen. Das Briefing nimmt die Diskussion heraus: Abstände in 18px-Schritten und 1000ms Übergänge, einmal genannt. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.

Was du in VEX Ventures zuerst änderst

Wenn du eigene Medien einsetzt, behalt Zuschnitt und Ebenenreihenfolge. Das Medium ist ein Standbild in 800x603. Genau diese Platzierung hält den Text lesbar. Eine andere Marke kann den ganzen Rahmen wiederverwenden.

Häufige Fragen

Was bekomme ich, wenn ich das Briefing zu VEX Ventures kopiere?

Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x603, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.

Kann ich Hero-Bereich von VEX Ventures in einem anderen Stack nachbauen?

VEX Ventures 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.

Kann ich eine aus VEX Ventures nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?

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 800x603 erfasst.

In Studio nachbauen

Starte mit der Referenz und passe Inhalte und visuelle Details in Studio an.