Abschnittskompositionssystem

Was macht Abschnittskompositionssystem?

Zweck

Das Abschnittskompositionssystem bietet eine Methodik zur Gestaltung des "Mittelteils" der Seite – der Abfolge von Abschnitten zwischen globalem Header und Footer. Während atomare Komponenten (Karten, Schaltflächen) innerhalb von Abschnitten leben, konzentriert sich dieses System auf den räumlichen Rhythmus, die Layoutmuster und die Übergänge zwischen diesen Abschnitten. Es stellt sicher, dass Inhalte logisch gruppiert werden, visuelle Ermüdung durch Layoutvariation minimiert wird und der Benutzer durch eine kohärente Erzählung oder Aufgabenführung geleitet wird.

Anwendungsfälle

• Gestaltung umfangreicher Landingpages mit mehreren Feature- und Nutzenabschnitten.
• Strukturierung von Produktdetailseiten (PDPs), die technische Spezifikationen, soziale Beweise und Anleitungen erfordern.
• Organisation von "Über uns"- oder "So funktioniert's"-Seiten in verdauliche Inhaltsblöcke.
• Etablierung eines konsistenten "Seitenkörper"-Rhythmus über eine mehrseitige Website hinweg.
• Verwaltung von vertikalen Abständen und Hintergrundverschiebungen, um Themen- oder Prioritätswechsel anzuzeigen.

Wann NICHT verwenden

• Einzelansichtige Abschnitte: Wenn die gesamte Erfahrung in den Heldenbereich oder eine einzelne Ansicht passt (z. B. eine einfache Anmeldeseite oder ein Splashscreen).
• Globale Navigation/Footer: Verwende site-navigation-system oder site-footer-system für den persistenten Seitenrahmen.
• Mikrointeraktionen: Für Verhalten einzelner Elemente innerhalb eines Abschnitts verwende interactive-state-system.
• Reine Datenanzeigen: Wenn der Inhalt ein kontinuierlicher Strom einheitlicher Elemente ist (z. B. eine große Datentabelle oder ein unendlicher Feed).

Eingaben

1. Inhaltssequenz: Die priorisierte Liste der Seitenabschnitte (aus der Informationsarchitektur).
2. Abschnittspriorität: Welche Abschnitte "High-Impact" (nutzenorientiert) vs. "Unterstützend" (technische Spezifikationen/soziale Beweise) sind.
3. Farbpalette: Zur Definition von Hintergrundwechselmustern.
4. Fluides Abstandssystem: Für konsistente vertikale Ränder und Abschnittspadding.
5. Responsives Rastersystem: Zur Definition der maximalen Inhaltsbreite und des Spaltenverhaltens.

Ausgaben

1. Abschnittssequenzkarte: Ein Bauplan, der die Reihenfolge und das Layoutmuster jedes Abschnitts zeigt.
2. Übergangsstrategie: Definierte Regeln für Hintergrundwechsel (z. B. Hell -> Dunkel -> Hell) und vertikale Abstände.
3. Layoutbaupläne: Annotierte Drahtmodelle für gängige Abschnittsmuster (Zickzack, Raster, 50/50-Aufteilungen).
4. Responsive Stapelregeln: Wie komplexe Abschnittslayouts auf mobilen Geräten zusammenbrechen.

Arbeitsablauf

1. Den narrativen Fluss kartieren

Ordne Inhalte basierend auf der Benutzerabsicht in eine logische Sequenz. Ein typischer Landingpage-Fluss umfasst:

• Bewusstsein: Heldenbereich / Problemdarstellung.
• Bildung: So funktioniert's / Kernfunktionen.
• Validierung: Soziale Beweise / Fallstudien.
• Detail: Sekundäre Funktionen / Preise / FAQ.
• Konversion: Finaler CTA.

2. Abschnittslayoutmuster auswählen

Vermeide Wiederholungen, indem zwischen Layoutmustern gewechselt wird:

• Der Split (50/50): Inhalt auf einer Seite, visuelles Element auf der anderen. Am besten für starke Nutzenargumente.
• Der Zickzack: Abwechseln des "Split"-Musters (z. B. Visuell links, dann Visuell rechts). Am besten für Storytelling und zur Reduzierung von Scan-Ermüdung.
• Das Feature-Raster: 3 oder 4 Spalten mit Karten/Symbolen. Am besten für sekundäre Funktionen oder Dienstleistungen.
• Der zentrierte Stack: Alle Inhalte vertikal und horizontal zentriert. Am besten für prägnante Aussagen oder finale CTAs.

3. Das Übergangssystem entwerfen

Verwende visuelle Hinweise, um einen Themenwechsel zu signalisieren:

• Hintergrundwechsel: Wechsel zwischen Weiß, Hellgrau oder Markenfarben, um Abschnitte zu "bündeln". Leite getönte Hintergründe von einem einzigen Markentoken mit color-mix() ab (z. B. color-mix(in oklch, var(--brand) 6%, white)) anstatt pro Abschnitt eine separate Grau-/Tönungsfarbe zu wählen, damit die Palette konsistent bleibt, wenn sich die Markenfarbe ändert.
• Vertikale Abstände: Verwende konsistentes oberes/unteres Padding (aus dem fluid-spacing-system), idealerweise mit clamp(), sodass Abschnittspadding nahtlos zwischen Mobilgerät und Desktop skaliert, anstatt an Breakpoints zu springen.
• Trennlinien: Verwende subtile Linien oder geneigte SVG-Übergänge für ein moderneres oder dynamischeres Gefühl.

4. Inhalts"unterbrechungen" einrichten

Füge "Unterbrecher-Abschnitte" ein, um den Benutzer daran zu hindern, zu schnell zu scrollen:

• Zitate/Testimonials: Zentrierte Abschnitte mit großem Text.
• Vollbreite Bilder: Immersive visuelle Elemente, die einen mentalen Neustart ermöglichen.
• Statistiken/Impact: Hochkontrast-Blöcke mit großen Zahlen.

5. Responsives Stapeln definieren

Plane, wie Abschnitte zusammenbrechen:

• Natürlicher Stapel: Split-Layouts stapeln in der Regel mit dem visuellen Element oben oder unten (normalerweise oben für den Kontext).
• Zickzack-Umkehrung: Stelle sicher, dass in einem Zickzack-Layout die "Medien" auf Mobilgeräten nicht nacheinander gestapelt werden (z. B. Text-Medien-Medien-Text). Passe die Reihenfolge an, sodass sie konsistent bleibt (z. B. Medien-Text-Medien-Text).

Entscheidungsregeln

• Die "Ermüdungs"-Regel: Verwende niemals dasselbe Layoutmuster für drei Abschnitte hintereinander. Wechsle zwischen Split-, Raster- und zentrierten Layouts.
• Die "Visuelle Anker"-Regel: Jeder abschnitt mit hoher Wirkung sollte einen visuellen Anker (Bild, Video oder Symbol) haben, um den Text zu unterstützen.
• Kontrast für Fokus: Verwende einen dunklen Hintergrundabschnitt für die wichtigste Botschaft oder den finalen CTA, um einen hohen Kontrast zum Rest der Seite zu schaffen.
• Textbreitenbeschränkung: Begrenze die Breite von Textblöcken (normalerweise max-width: 60ch), um die Lesbarkeit zu gewährleisten, selbst wenn der Abschnittscontainer breiter ist.

Einschränkungen

• Barrierefreiheit: Hintergrundfarbwechsel müssen die WCAG-AA-Kontrastverhältnisse für den gesamten Text innerhalb dieses Abschnitts einhalten.
• Überschriftenhierarchie: Jeder Hauptabschnitt sollte mit einem <h2-h6> beginnen, das der logischen Dokumentgliederung folgt.
• Reaktionsfähigkeit: Das Abschnittspadding sollte auf Mobilgeräten verkleinert werden (z. B. --space-3xl auf Desktop wird zu --space-xl auf Mobilgeräten); bevorzuge einen clamp()-Ausdruck gegenüber diskreten Breakpoint-Überschreibungen.
• Abstandskonsistenz: Der Abstand zwischen Abschnitten sollte konsistent sein, es sei denn, ein Themenwechsel erfordert eine größere "Unterbrechung".

Häufige Fehlermuster

• Die "Textwand": Abschnitte mit zu viel Text und keinen visuellen Unterbrechungen oder Unterüberschriften.
• Musterwiederholung: Verwende dasselbe 50/50-Split-Layout für 5 Abschnitte hintereinander, wodurch die Seite eintönig wirkt.
• Der "Mobile Sandwich": In einem Zickzack-Layout wird die Stapelreihenfolge auf Mobilgeräten nicht angepasst, was dazu führt, dass zwei Bilder oder zwei Textblöcke direkt übereinander sitzen.
• Mangel an Weißraum: Abschnitte werden ohne ausreichendes vertikales Padding zusammengequetscht, wodurch der Inhalt erdrückend wirkt.
• Inkonsistente Ausrichtung: Mischen von zentrierten Überschriften mit linksbündigen Überschriften in derselben Sequenz ohne klare Logik.

Validierungskriterien

• Das Seitenlayout wechselt zwischen mindestens zwei verschiedenen Mustern (z. B. Split und Raster).
• Abschnittsübergänge (Hintergrundwechsel) werden verwendet, um verwandte Inhalte zu gruppieren.
• Vertikale Abstände (Padding) sind über ähnliche Abschnittstypen hinweg konsistent.
• Alle Abschnitte folgen der korrekten Überschriftenhierarchie (h2 für Hauptabschnitte).
• Die mobile Stapelreihenfolge für Zickzack-Layouts ist logisch definiert.
• Textlastige Abschnitte behalten eine lesbare Zeilenlänge bei (max-width: 60-80ch).
• Kontrastverhältnisse für hintergrundfarbige Abschnitte erfüllen WCAG AA.