Über diese Vorlage
Transform Data wurde bei 800x592 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. „Transform Data Quickly“ ist die Zeile, auf die das Layout gebaut ist. Die Palette umfasst grau #505050 darunter und weiß #F8F8F8 für die Schrift, die Schrift ist Inter. Geliefert wird eine einzelne Komponente, erfasst bei 800x592, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 250ms. Lass es beim Schreiben offen: Die 3.605 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Teams, die Hero-Bereich-Designs für ein KI- oder SaaS-Produkt bauen und eine einzelne Komponente schriftlich festhalten wollen, bevor ein Angebot rausgeht.
- Teams, die den Auftritt eines Wettbewerbers als Hero-Bereich im Bereich SaaS nachbauen und eine einzelne Komponente festlegen wollen, bevor sich jemand auf ein Framework festlegt.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Transform Data.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Abstände in 16px-Schritten und 250ms Übergänge bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x592, damit die Medien darunter bis an den Rand durchlaufen. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Leiste im Raster der Seite. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern. Die Referenz wurde mit 800x592 erfasst.
- Eine Skala für Schrift und Rahmen. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Abstände in 16px-Schritten und 250ms Übergänge. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft. Ändere das Thema, nicht die Stufen.
- Die Display-Größe trägt die Aussage. Inter erledigt die Arbeit, die Größen fallen von der Headline zum Begleittext deutlich ab, und die Laufweite wird enger, je größer die Schrift wird, damit die Hierarchie über Schrift trägt und nicht über Farbe. Die Display-Schrift kommt nur in einer Größe vor, deshalb konkurriert sie nie mit sich selbst. Behalte die Größenstufen, auch wenn du die Schrift tauschst.
Bewegung & Interaktion
Eine Dauer für die Bedienelemente
Das Animationsbudget ist klein und ausdrücklich benannt: 250ms, eingesetzt für Zustandswechsel und nicht für Auftritte. Kurze Zeiten lassen die Seite gesetzt wirken; ein langsamer Standard würde die Komposition zunichtemachen. Bemiss die Rückmeldung exakt.
Statisch mit Absicht
Diese Seite kommt als stehende Komposition in 800x592, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Die Komposition steht still, die Hierarchie muss die Seite also tragen, und sie tut es.
Wie der Eintrag Hero-Bereich umbricht
Die Desktop-Komposition ist gegen 800x592 gelöst, und das schmale Layout ist entworfen statt geerbt: die Skala ist fließend statt gestuft. Bewegung hat eine Variante für reduzierte Bewegung, und die Medien tragen ein Posterbild, damit die Seite auch ohne Autoplay kommuniziert. Der Umbruch hält die Handlung in jeder Breite erreichbar.
Warum das Briefing für SaaS trägt
Ein Screen bedeutet eine Entscheidung für den Leser, und das ist der Preis dieses Layouts: Alles andere rutscht unter den Fold. Im Briefing stehen Abstände in 16px-Schritten und 250ms Übergänge, damit die unteren Sektionen denselben Rhythmus behalten. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Die Zahlen hinter dem Eintrag Hero-Bereich
Jede Beziehung auf dieser Seite ist ein Wert, den du prüfen kannst: Abstände in 16px-Schritten und 250ms Übergänge. Genau das macht Transform Data nachbaubar statt nur reproduzierbar. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Kann ich Hero-Bereich von Transform Data in einem anderen Stack nachbauen?
Transform Data wurde in eine einzelne Komponente 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 lang ist der Prompt hinter Transform Data?
Das erfasste Briefing umfasst 3.605 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 Transform Data ist animiert?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 250ms abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
