Design System
Playground Zur Vorlage

LayoutsÜbersicht

Schicht 04

Layouts sind immer unique.

Ein Layout ist eine feste Folge von Sektionen. Keine Varianten. Ein Page Type darf mehrere Layouts wählen — nie mischen.

Page Types

Page Type Mögliche Layouts
Startseite Startseite
Referenzen Referenz · Case Study
Echos Artikel
Manifest Manifest
Infoseite Infoseite
System Deckblatt · Docs-Rahmen

Zwei Page Types mit zwei Layouts: Referenzen (kleine Referenz und Case Study) und System ( Deckblatt und Docs-Rahmen). Die Frontpage ist das Deckblatt.

System

Deckblatt

Frontpage. Eine Fläche, ein Ausgang ins System.

System

Docs-Rahmen

Nur diese Dokumentationssite.

Startseite

Startseite

Die eine Homepage. Kein zweites Start-Layout.

Echos · Meinung

Artikel

Lange Texte. H1 in der Schale, danach Base.

Referenzen

Referenz

Kleine Referenz: Claim, ein Absatz, Schluss.

Referenzen

Case Study

Groß ausgeführte Referenz: Meta, Screenshot, langer Bericht.

Impressum · Datenschutz · AGB

Infoseite

Utility und Rechtliches. Kein ASCII, kein CTA.

Manifest

Manifest

Ein Wort trägt die Fläche, dann der Text.

Seite

Rechtliches

Seiten-Layout für Rechtliches (Impressum): BasisFunnel als Narrow-Hülle ohne Formular, kompakter Text-Hero und Prose mit drei Platzhalter-Absätzen (Anbieter, Kontakt, Haftung); trust-Slot bleibt leer.

Seite

Landingpage

Seiten-Layout für die Landingpage: BasisLanding-Hülle mit CtaFormular-Hero (Formular statt Slot-Pille), fünf Sektionen mit einem Nacht-Wechsel bei StatsBand — FinalCta band und StickyCta leiste hängt die Hülle selbst nach main an.

Seite

Kontakt

Seiten-Layout für Kontakt: BasisStandard-Hülle mit kompaktem Text-Hero, KontaktSection split-daten, CtaKalender split und Faq eins — kein zusätzliches Final-CTA, der cta-Slot bleibt leer.

Seite

Blog-Übersicht

Seiten-Layout für die Echos-Übersicht: BasisArchiv-Hülle mit kompaktem Text-Hero, BlogUebersicht featured-raster (bringt Filter, Grid, Pagination selbst mit) und Newsletter band als Schluss — kein Final-CTA-Slot.

Seite

Artikel

Seiten-Layout für einen einzelnen Artikel: BasisContent-Hülle mit festem Artikel-Hero, ArtikelBody toc-links (bringt eigenes Inhaltsverzeichnis mit) und BlogTeaser liste plus Newsletter zeile im related-Slot.

Seite

Über uns

Seiten-Layout für Über uns: BasisStandard-Hülle mit festem Bild-Hero, sechs Sektionen, ein Nacht-Wechsel bei StatsBand, zwei CTA-Stufen.

Seite

Pricing

Seiten-Layout für Preise: BasisStandard-Hülle mit Text-Hero, sechs Sektionen, ein Nacht-Wechsel bei TestimonialsGrid, FinalCta und StickyCta zusammen im cta-Slot.

Seite

Case-Übersicht

Seiten-Layout für die Referenzen-Liste: BasisArchiv-Hülle mit kompaktem Text-Hero, sticky Filter-Zeile, Case-Grid, Blättern und Final-CTA — kein Nacht-Wechsel im Hauptteil.

Seite

Case Study

Seiten-Layout für eine einzelne Referenz: BasisDetail-Hülle mit Breadcrumb, festem CaseStudy-Hero (ASCII Planet), acht Sektionen, zwei Nacht-Wechseln, Weitere-Cases im related-Slot.

Seite

Leistungsübersicht

Seiten-Layout für die Leistungsübersicht: BasisStandard-Hülle mit TextOnly-Hero, drei Sektionen, kein Nacht-Wechsel außer Hero und Fuß.

Seite

Leistung-Detail

Seiten-Layout für eine einzelne Leistung: BasisDetail-Hülle mit Breadcrumb, TextOnly-Hero, sechs Sektionen, ein Nacht-Wechsel bei CaseHighlight, drei CTA-Stufen.

Seite

Startseite

Seiten-Layout für die Startseite: BasisStandard-Hülle mit 15 Sektionen, ein Nacht-Wechsel bei StatsBand, drei CTA-Stufen.

Basis-Hülle

Basis Standard

Hülle für Marketing-Seiten mit Hero: Scroll-Header, Pflicht-Hero, freier Inhalt, Final-CTA im Slot, großer Fuß.

Basis-Hülle

Basis Landing

Hülle für Kampagnen-Seiten: reduzierter Header ohne Nav, Formular-Hero, Band-CTA, Sticky-CTA unter lg, minimaler Fuß.

Basis-Hülle

Basis Content

Hülle für Lesestrecken: solider Header, Artikel-Hero, Wide-Grid mit sticky Aside auf drei und Inhalt auf acht Spalten, Verwandtes am Schluss.

Basis-Hülle

Basis Archiv

Hülle für Listen: solider Header, knapper Text-Hero, sticky Filter-Zeile, Grid, Blättern, Final-CTA im Slot.

Basis-Hülle

Basis Detail

Hülle für Einzelseiten: solider Header, Breadcrumb-Zeile im Container, Hero, Inhalt, Verwandtes, Final-CTA mit Proof.

Basis-Hülle

Basis Funnel

Schmale Hülle ohne Hero: kompakter Header ohne Nav, Narrow-Spalte für Formular, Danke und Rechtliches, Vertrauens-Zeile, minimaler Fuß.

Basis-Hülle

Basis System

Hülle für Systemseiten: kompakter Header ohne Nav, zentrierte Fläche über 70 vh, minimaler Fuß. Für 404, Wartung und Statusmeldungen.