Über diese Vorlage
Bevor du beim Thema Preissektion für ein KI- oder SaaS-Produkt nachbaust, lies Rocket Pricing: Komposition und Spezifikation stehen beide hier. „Clear pricing plans that scale with you“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist schwarz #0E0D0E darunter, gesetzt in Inter. Es kommt als React und Tailwind CSS, damit sich der ganze Preissektion ohne Design-Übergabe in ein Projekt heben lässt. Lass es beim Schreiben offen: Die 8.841 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Designer, die zuerst die Zahlen brauchen: Abstände in 11px-Schritten, alle aus dem Briefing zitiert.
- Dieses Preissektion-Design ist für Agenturen gebaut, die den 640x472-Rahmen durch drei Runden Kundenkorrekturen bringen müssen.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Preissektion-Design als Muster, das jede weitere Seite kopiert.
Was enthalten ist
- Feste Stufen statt einer Skala. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Abstände in 11px-Schritten. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet. Wo das Briefing schweigt, schweigt es mit Absicht.
- Eine Pille für das eine Neue. Ein Badge, eine Botschaft: die Pille sitzt in Inter auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Es ist so positioniert, dass die Headline die Mitte der Komposition behält.
- Die Komposition ist der Inhalt. Die ganze Komposition passt auf einen Screen und kommt als React und Tailwind CSS, mit Text, Medien und Bedienelementen, die das Briefing benennt. Die Seite ist eine Komposition bei 640x472, und deshalb hält sie zusammen, wenn sich der Text ändert. Das Briefing ist die Spezifikation.
- Werte zum Nachmessen. Die Abstände sind genauso zitiert (Abstände in 11px-Schritten) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Zeiger-Zustände, mehr nicht
Die interaktive Ebene ist klein und vorhersehbar: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Alles andere bleibt still, der Schwerpunkt liegt also auf der Komposition. Die Zustände sind im Briefing benannt, die Seite hängt also nicht an einer Hover-Effekt-Bibliothek.
Bewegung, die nicht stört
Eine Scroll-Bibliothek gibt es hier nicht: Die 640x472-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Nur die Elemente bewegen sich, die auf den Zeiger reagieren.
Was du in Rocket Pricing zuerst änderst
Angenommen, du hast nur einen Nachmittag. Ändere die Zeile und das Label der Handlung; Abstände in 11px-Schritten bleiben unangetastet, und du hast eine Seite, die beabsichtigt aussieht. Dein Akzent muss denselben Kontrasttest bestehen wie der der Referenz.
Warum diese Komposition für SaaS trägt
Ein Standard-Hero und dieser Eintrag Preissektion benutzen dieselben Teile. Hier geben das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und die Feature-Liste die Reihenfolge vor, und Abstände in 11px-Schritten liefern die Maße, sodass der Screen als Abfolge liest und nicht als Container. Rocket Pricing nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie Rocket Pricing den ersten Blick ordnet
Setz deinen eigenen Text in diesen Eintrag Preissektion, und die Abfolge hält, weil die Elemente nicht austauschbar sind: das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und die Feature-Liste tragen jeweils eine Aufgabe. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Rocket Pricing?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 640x472, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Rocket Pricing nachzubauen?
Rocket Pricing 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 Rocket Pricing 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 640x472 erfasst.
