Website
SaaS-Preisseite: Website-Design
Dieses SaaS-Preisseiten-Design macht die Tarifwahl zu einem gut lesbaren Kaufpfad und verbindet Abrechnungsoptionen, Tarifdetails, Vergleichszeilen und gezielte Fragen.
Einsatzbereiche für Preisseiten
- Preisseiten-DesignTarife präsentieren, ohne wichtige Kaufdetails zu verstecken
- SaaS-ProduktmarketingLeistungsunterschiede in gut überfliegbare Website-Abschnitte übersetzen
- KaufentscheidungsabläufeBesuchern helfen, Kosten, Limits und Support zu vergleichen
- Design von FunktionsvergleichenGemeinsame und tarifspezifische Funktionen ordnen
Highlights des Tarifvergleichs
- AbrechnungsumschalterMonatliche und jährliche Optionen erscheinen vor der Tarifauswahl
- Layout mit drei TarifenSolo, Team und Enterprise nutzen einheitliche Tarifstrukturen
- VergleichstabelleZeilen zeigen Unterschiede, die Karten nicht darstellen können
- Gezielte FragenPreisbedenken werden zu aufklappbaren, nativen Disclosures
Von Abrechnungsbezeichnungen zu häufigen Fragen
1 / 3
SaaS-Preisseite: Website-Design
Dieses offizielle, mitgelieferte OpenDesign-Beispiel zeigt eine Preis- und Kaufentscheidungsseite für das SaaS-Produkt Filebase. Die Hauptüberschrift „One flat rate. No throttling.“ formuliert eine direkte Preisaussage, bevor Besucher auf die Tarifdetails stoßen.
Der unterstützende Satz „Start free. Pick a paid tier the day you outgrow it. Switch yearly billing for two months off.“ gibt der Seite einen Verlauf: beginnen, bei Bedarf upgraden und die jährliche Abrechnung erwägen. So wirkt die Seite wie ein Entscheidungspfad statt wie ein Katalog isolierter Funktionen.
Das Design nutzt einen zentrierten Inhaltsbereich mit einer festgelegten Maximalbreite von 1080px. Diese Vorgabe hält Überschrift, Abrechnungsumschalter, Tarifkarten, Vergleichstabelle und Fragen in einem gut lesbaren horizontalen System, begrenzt aber, wie viele Zusatzdetails neben jedem Tarif Platz finden.
Entscheidung zuerst
Überschrift und statischer Abrechnungsumschalter erscheinen vor den Tarifinformationen. „Monthly“ ist als Anfangsauswahl gestaltet, „Yearly“ als Alternative; die Quelle implementiert keine Preisänderung.
Rollen der Tarife
Solo ist für Einzelpersonen gedacht, Team für Gruppen bis zu 50 Personen, Enterprise mit SSO, On-Prem-Schlüsseln und einem SLA von 99,99 %.
Zwischen SaaS-Tarifen wählen
Die Tarifkarten sind für Besucher gedacht, die ihren Arbeitskontext einer Kaufstufe zuordnen müssen. Solo nennt „$8 / month“, 1 TB Speicher, zwei Geräte und E-Mail-Support. Team ändert die Preiseinheit auf „$14 / seat / month“ und ergänzt gemeinsamen Speicher, Rollen, Audit-Informationen und Prioritäts-Support.
Die Karten wiederholen ein nützliches Muster: Zielgruppenbeschreibung, Preis oder individueller Status, Leistungsliste und Aktion. Diese Konsistenz erleichtert das Überfliegen der Unterschiede, bringt aber einen Zielkonflikt mit sich: Lange Funktionsbezeichnungen konkurrieren mit dem Aktionsbereich, besonders in der Team-Karte.
Team ist mit „RECOMMENDED“, einer orangefarbenen Umrandung und einem gefüllten Button „Choose Team“ markiert. Die Hervorhebung schlägt innerhalb des Designs einen bevorzugten Weg vor, während die neutralen Aktionen bei Solo und Enterprise Alternativen erhalten. Das Label ist eine visuelle Empfehlung, kein Beleg dafür, dass der Tarif besser abschneidet.
Speicher für Einzelpersonen
Solo stellt einen festen Monatspreis, die Speichermenge, das Gerätelimit und E-Mail-Support in den Vordergrund.
Team-Betrieb
Team verbindet Abrechnung pro Nutzerplatz mit gemeinsamem Speicher, geteilten Ordnern, Rollen, Audit-Log und Nutzungsanalysen.
Enterprise-Anforderungen
Enterprise ersetzt einen angegebenen Preis durch „Custom“ und stellt SSO, Provisioning, Verschlüsselungsschlüssel und dedizierten Support voran.
Tarifvergleich und Seitenstruktur
Die Seitenabfolge ist eindeutig: Solo, Team, Enterprise, Plan comparison, dann Common questions. Der Vergleichsbereich wiederholt die Tarifnamen als Spalten, statt Besucher beim Durchsehen der Zeilen auf ihr Gedächtnis an die Karten zu verweisen.
Die Tabelle zeigt zuerst die gemeinsamen Funktionen. Block-level sync und End-to-end encryption haben in allen drei Tarifen Häkchen, Shared folders beginnt bei Team, SAML / SCIM erscheint nur bei Enterprise und Audit log beginnt bei Team. Diese Reihenfolge trennt Basisfunktionen von upgradespezifischen Unterschieden.
Die SLA-Zeile nennt für Team und Enterprise unterschiedliche Werte, während die Support-Zeile von Email über Priority zu Dedicated CSM wechselt. Diese Zeilen zeigen, warum die Tabelle existiert: Preiskarten fassen einen Tarif zusammen, eine Tabelle legt dagegen offen, entlang welcher Dimension sich die Tarife unterscheiden.
| Feature | Solo | Team | Enterprise |
|---|---|---|---|
| Synchronisierung auf Blockebene | Ja | Ja | Ja |
| Ende-zu-Ende-Verschlüsselung | Ja | Ja | Ja |
| Geteilte Ordner | Nein | Ja | Ja |
| SAML / SCIM | Nein | Nein | Ja |
| Audit-Protokoll | Nein | Ja | Ja |
| SLA | Nein | 99,9 % | 99,99 % |
| Support | Priorität | Dedizierter CSM |
Häufige Fragen und Funktionsgrenzen
Der letzte Abschnitt trägt den Titel „Common questions“ und enthält drei sichtbare Fragen: „Can I change tiers mid-month?“, „Is there a free tier?“ und „How does seat-based billing work for Team?“. Ihre Reihenfolge folgt der wahrscheinlichen Kaufunsicherheit: Tarifwechsel, Einstiegskosten, dann das Abrechnungsmodell hinter der Team-Option.
Jede Frage nutzt das native details/summary-Muster des Browsers und kann lokal aufgeklappt werden. Die Buttons Monthly, Yearly, Choose Solo, Choose Team und Talk to sales haben in dieser Quelle keine Event-Handler: Sie ändern weder Preise noch öffnen sie Kauf- oder Vertriebsabläufe. Die Seite stellt keine angebundene Abrechnung und keine verbundenen Konto-, Vertriebs- oder Support-Dienste her.
Namen, Zahlen, Produktaussagen und Vergleichsinhalte sind illustrativ, sofern nicht separat verifiziert. Die Aufnahmen zeigen das gestaltete visuelle Design und die genannten Beispieldaten; sie belegen weder Live-Preise, Betriebslimits, Antworten externer Dienste noch den ursprünglichen Generierungsprozess.
So erstellen Sie ein SaaS-Preisseiten-Design in OpenDesign
Die Kaufabfolge festlegen
Beginnen Sie mit einer kurzen Preisaussage, einem unterstützenden Satz und einer Auswahl der Abrechnungsart. Platzieren Sie die Abrechnungsart vor den Tarifkarten, damit Besucher alle Preise im selben Kontext lesen.
Vorgeschlagener PromptErstelle ein SaaS-Preisseiten-Design für ein Dateispeicher-Produkt mit einem zentrierten Inhaltsbereich von 1080px. Verwende die Überschrift „One flat rate. No throttling.“, ein statisches Umschaltelement mit „Monthly“ und „Yearly · save 17%“ sowie drei Tarife namens Solo, Team und Enterprise. Kennzeichne Preise und Produktversprechen als illustrativ. Halte die Kauf-Buttons als nicht verbundene Beispiele und nutze für die Erweiterung der FAQ das native details/summary; suggeriere weder eine umgesetzte Preisumschaltung noch Live-Abrechnung oder verifizierte Betriebsdaten.
Vergleichbare Tarifkarten aufbauen
Geben Sie jedem Tarif denselben Informationsrhythmus: Zielgruppe, Preisstatus, Leistungsumfang und Aktion. Heben Sie die Team-Empfehlung visuell hervor, behalten Sie aber neutrale Wege zu Solo und Enterprise bei. Prüfen Sie, dass die längsten Funktionsbezeichnungen im Team-Tarif die Aktion nicht verdrängen.
Entscheidungshilfen ergänzen
Lassen Sie auf die Karten eine Vergleichstabelle folgen, die gemeinsame Funktionen von reinen Upgrade-Funktionen unterscheidet. Schließen Sie mit drei knappen Fragen zu Tarifwechsel, kostenlosem Zugang und Abrechnung pro Nutzerplatz. Halten Sie vorgeschlagene Interaktionen lokal im Design und prüfen Sie alle Produktaussagen separat.
Exportieren und Share-Link erhalten
Das fertige Design exportieren und anschließend über „Teilen" in OpenDesign einen Share-Link abrufen. Den Link in einem separaten Browserfenster öffnen und prüfen, ob die gewünschte Version sowie alle Assets vorhanden sind, bevor er weitergegeben wird.
Website-Design für ein KI-Designstudio
OpenDesigns Website-Design für ein KI-Designstudio übersetzt das Konzept eines Local-first-Studios in eine redaktionelle Landingpage, auf der sich Skills, Experimente und Methoden schnell erfassen lassen.
Website
Webdesign für KI-Infrastruktur
Ein sanftes Landingpage-Konzept für KI-Infrastruktur mit beispielhaften Laufzeitmetriken, verschachtelten Feature-Karten, subtiler Bewegung und einer einzelnen Vertriebseinladung.
Website
Website-Design für eine Bianjing-Nachttour
Eine interaktive Nachtreise durch ein imaginiertes Bianjing der Song-Zeit, die eine fortbestehende Flussstadt, Poesie, Laternen und einen mehrsprachigen Kapitelrhythmus verbindet.
Website
Brutalistisches Journal-Website-Design
Brutalistisches Journal-Website-Design verwandelt eine magazinartig gestaltete Ausgabe in ein lesbares Web-Lesesystem und verbindet markante Schrift mit einer präzisen redaktionellen Struktur.
Website