Über diese Vorlage
Price Calculator liefert für ein Fintech-Produkt einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Die Zeile lautet „Get premium website within your budget“, und der Rest des Eintrags Preissektion ordnet sich darum. Die Palette ist schwarz #000000 darunter und rot #FF5656 für die Akzente. Die Referenz ist mit eine einzelne Komponente gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Am nützlichsten ist es, wenn beim Eintrag Preissektion für Fintech ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Wer mit einem KI-Builder arbeitet und ein Briefing will, das ein 800x648 Rahmen schon enthält, statt sie dem Modell zu überlassen.
- Produktteams, die die Preissektion-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
- Wenn der Build auf eine einzelne Komponente aufsetzt, übernimm zuerst Abstände in 98px-Schritten und lass die Palette in Ruhe, bis das Raster steht.
Was enthalten ist
- Größen im Briefing fixiert. Die Liste bleibt kurz (Abstände in 98px-Schritten), deshalb lässt sich das ganze System von Hand prüfen. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern. Behalte die Werte, die willkürlich wirken.
- Ein Akzent, sparsam gesetzt. Rot #FF5656 ist der einzige gesättigte Wert der Komposition; alles andere liegt auf schwarz #000000. Buttons, Links und kleine Hervorhebungen leihen ihn sich, und das hält einen vollen ersten Screen lesbar. Alles andere liegt auf schwarz #000000, und das hält eine gesättigte Palette lesbar.
- Der Aufbau passt in einen Screen. Die ganze Komposition passt auf einen Screen und kommt als eine einzelne Komponente, mit Text, Medien und Bedienelementen, die das Briefing benennt. Die Seite ist eine Komposition bei 800x648, und deshalb hält sie zusammen, wenn sich der Text ändert. Über dem Falz hat nichts Dekoratives etwas zu suchen.
- Das Briefing nennt die Stufen. Die Abstände sind genauso zitiert (Abstände in 98px-Schritten) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Fast keine Bewegung
Das Briefing lässt Animation weg und überlässt die Seite dem 800x648-Layout, nur Hover- und Druckzustände ändern sich. Die Komposition steht still, die Hierarchie muss die Seite also tragen, und sie tut es.
Statisch mit Absicht
Diese Seite kommt als stehende Komposition in 800x648, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es.
Die Reihenfolge im Eintrag Preissektion
Lies den ersten Screen in einem Zug, und das Angebot ist bereits klar. die Überschrift und das Kartenraster kommen der Reihe nach, und Abstände in 98px-Schritten halten den Abstand statt dekorativer Trennlinien. Ein Leser im Bereich Fintech bekommt das Angebot vor den Optionen.
Price Calculator als Spezifikation lesen
Ein Nachbau beginnt meist mit einem Screenshot und einer Vermutung. Hier beginnt er mit 3.168 Zeichen Spezifikation: Rahmen, Abstände und Bewegung stehen fest, bevor die erste Codezeile entsteht. Nichts in diesem Eintrag Preissektion hängt an einer Voreinstellung.
Was du in Price Calculator zuerst änderst
Wenn deine Marke eine schwerere Palette fährt, prüf sie vor der Entscheidung gegen den Rahmen. schwarz #000000 trägt die Seite, ein dunklerer Akzent braucht also mehr Kontrast als die Referenz. Substitution ist billiger als Komposition, und darum geht es.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Price Calculator kopiere?
Das erfasste Briefing umfasst 3.168 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.
Warum nennt der Eintrag eine einzelne Komponente überhaupt?
Die Referenz ist zufällig in eine einzelne Komponente gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
Wie gehe ich mit den Medien von Price Calculator in einem Kundenprojekt um?
Die Referenz stammt von motionsites.ai, und die Medien gehören dem ursprünglichen Anbieter. Baue die Komposition mit eigenen Texten, eigenen Bildern und eigener Palette nach und prüfe die Nutzungsbedingungen der Quellseite, bevor du etwas davon veröffentlichst.
