Hero Design System

Hero-Design-System

Zweck

Das Hero-Design-System bietet eine Methodik zur Gestaltung des kritischsten räumlichen Bereichs einer Webseite: dem einleitenden Abschnitt. Während sich hero-section-optimization in der Kategorie Wachstum auf Botschaft und Conversion konzentriert, legt dieses Design-System den Fokus auf die visuelle Anatomie, räumliche Komposition und Schichtung des Hero. Es stellt sicher, dass Inhalt und visuelle Elemente harmonieren, um Markenautorität aufzubauen, die visuelle Hierarchie aufrechtzuerhalten und den Blick auf die primäre Aktion über alle Gerätetypen hinweg zu lenken.

Anwendungsfälle

• Gestaltung des primären Einstiegspunkts für Homepages und Landing Pages.
• Erstellung von „Sub-Hero“-Einführungen für tiefe Produkt- oder Dienstleistungsseiten.
• Einrichtung eines konsistenten Einführungsmusters über eine mehrseitige Website hinweg.
• Verwaltung komplexer Schichtungen von Text, Bildern und interaktiven Elementen.
• Entwerfen von responsiven Anpassungen für immersive, medienlastige Einführungen.

Wann NICHT verwenden

• Globale Seitennavigation: Verwenden Sie site-navigation-system für die dauerhafte Kopfzeile.
• Seitenweite Wegfindung: Verwenden Sie page-header-system für utility-lastige Einführungen (z. B. Dashboards oder Einstellungen), die Metadaten über Wirkung priorisieren.
• Inhaltsartikel: Wenn der Fokus auf einer einfachen Überschrift und Autorenzeile liegt; verwenden Sie Standardtypografie oder page-header-system.
• Modale oder Overlays: Verwenden Sie overlay-and-dialog-system für temporäre Interface-Ebenen.

Eingaben

1. Inhaltspriorität: Die Überschrift (H1), Unterüberschrift und primäre CTA.
2. Visuelle Assets: Fotografie, Illustrationen, Video oder abstrakte Muster.
3. Layout-Modus: Handelt es sich um eine Split-, Centered- oder Full-Bleed-Komposition?
4. Flüssiges Abstandssystem: Für konsistente Ränder, Abstände und vertikalen Rhythmus.
5. Markenfarbpalette: Für Hintergrundbehandlungen und Lesbarkeit von Overlays.

Ausgaben

1. Hero-Anatomie-Spezifikation: Definition der Inhaltszonen (Intro, Kern, Aktion, Visuell).
2. Kompositions-Blueprint: Regeln für Ausrichtung (Links vs. Zentriert) und Medienbeziehung.
3. Strategie zur visuellen Schichtung: Regeln für Text-Overlays, Scrims und Tiefe.
4. Responsive Transformationskarte: Wie der Hero von Querformat- zu Hochformat-Viewports wechselt.

Workflow

1. Auswählen eines Kompositionsmusters

Wählen Sie ein Muster basierend auf der Beziehung zwischen Inhalt und Medien:

• Der Split (50/50): Text auf einer Seite, visuelles Element auf der anderen. Am besten für Klarheit und technische Produkte geeignet.
• Der Zentrierte Stack: Alle Inhalte zentriert, oft mit einem Hintergrundbild oder -video. Am besten für prägnante, wirkungsstarke Aussagen geeignet.
• Der Inset-Content: Inhalt sitzt in einer enthaltenen Box über einem Full-Bleed-Hintergrund. Am besten für ein hochwertiges oder editoriales Gefühl geeignet.
• Das Offset-Overlay: Text überlappt teilweise ein visuelles Element, um Tiefe zu erzeugen.

2. Definieren der räumlichen Hierarchie (Anatomie)

Wenden Sie visual-hierarchy-system auf die Hero-Zonen an:

• Intro/Eyebrow (Optional): Ein kleines Etikett oder Label oberhalb der H1 für Kontext.
• Die Überschrift (H1): Das größte Textelement auf der Seite.
• Die Unterüberschrift: Unterstützender Text, der Details liefert (maximal 2-3 Zeilen).
• Der Aktionsbereich: Primäre (und optionale sekundäre) CTA-Buttons.
• Der Anker (Visuell): Der Fokuspunkt, der die Erzählung unterstützt.

3. Festlegen der Schichtung & Lesbarkeit

Falls Hintergrundmedien verwendet werden, stellen Sie sicher, dass der Text lesbar ist:

• Scrims & Verläufe: Wenden Sie eine Lesbarkeitsschicht (aus imagery-and-media-system) an, um einen Kontrast von 4,5:1 sicherzustellen.
• Unschärfebehandlungen: Verwenden Sie Backdrop-Filter, um unruhige Hintergründe hinter Text zu mildern.
• Tiefe: Verwenden Sie Schatten oder subtile Versätze, um die „Ebene“ des Inhalts von der „Ebene“ des Hintergrunds zu unterscheiden.

4. Anwenden von vertikalem Rhythmus und Abständen

Verwenden Sie das fluid-spacing-system, um „Atemraum“ zu definieren:

• Oberer/Unterer Padding: Stellen Sie sicher, dass der Hero genügend vertikale Höhe hat (normalerweise 60vh bis 90vh auf dem Desktop).
• Interne Abstände: Verwenden Sie konsistente Abstände zwischen H1, Unterüberschrift und CTAs (normalerweise --space-m bis --space-xl).

5. Planen des responsiven Wechsels

Planen Sie, wie das Layout für kleinere Bildschirme transformiert wird:

• Stacking: Split-Layouts stapeln normalerweise mit dem visuellen Element oben (für Kontext) oder unten (um die H1 zu priorisieren).
• Verhältnisverschiebung: Hintergrundbilder sollten von Querformat (16:9) auf Quadrat oder Hochformat (1:1 oder 4:5) wechseln, um Fokuspunkte zu erhalten.
• Textskalierung: Stellen Sie sicher, dass die H1 mithilfe von fluid-typography-system elegant herunterskaliert.

Entscheidungsregeln

• Die Einzige-H1-Regel: Der Hero MUSS die einzelne H1 der Seite enthalten.
• Klarheit vor Komplexität: Wenn das visuelle Asset das Lesen des Textes auch nur geringfügig erschwert, priorisieren Sie einen einfacheren Hintergrund oder einen stärkeren Scrim.
• Die „Daumen“-Zone: Stellen Sie auf Mobilgeräten sicher, dass CTAs im unteren 2/3 des Bildschirms platziert sind, um eine einfache Erreichbarkeit zu gewährleisten.
• Visuelles Gewicht: Die H1 und die primäre CTA sollten die beiden visuell markantesten Elemente im Hero sein.
• Fokuspunkt-Ausrichtung: In Split-Layouts sollte das „Subjekt“ des Bildes zum Inhalt hin zeigen, nicht von ihm weg.

Einschränkungen

• Barrierefreiheit: Text auf Bildern muss den WCAG-AA-Kontrast (4,5:1) erfüllen. Überschriften müssen semantische <h1>-Tags verwenden. Wenn der Hero automatisch abspielendes Hintergrundvideo oder Animation enthält, stellen Sie ein sichtbares Pause-Steuerelement (WCAG 2.2.2) bereit und beachten Sie prefers-reduced-motion.
• Responsivität: Der Hero darf niemals horizontalen Überlauf verursachen. Layouts sollten flüssig und nicht fest in der Höhe sein, um unterschiedliche Textlängen zu ermöglichen. Vermeiden Sie 100vh-Sperren auf Mobilgeräten, die sich mit dynamischem Browser-Chrome falsch verhalten – bevorzugen Sie 100dvh oder eine Mindesthöhe mit flüssigem Padding.
• Leistung: Hintergrundvideos sollten stummgeschaltet sein und ein „Poster“-Bild als Fallback für langsame Verbindungen haben.

Häufige Fehlermuster

• Der „Kontrast-Fehler“: Platzieren von weißem Text auf einem unruhigen oder hellen Bild ohne Scrim, was die Überschrift unleserlich macht.
• Aktion-Begrabung: Die CTA zu tief platzieren, sodass sie auf kleineren Laptops „unter der Falte“ abgeschnitten wird.
• Medien-Overload: Verwenden eines Hintergrundvideos, das zu ablenkend ist und den Benutzer daran hindert, das Wertversprechen zu lesen.
• Der „Mobile-Squish“: Erzwingen eines Desktop-Split-Layouts auf Mobilgeräten, was zu winzigem Text und einem eingezwängten Bild führt.

Validierungskriterien

• Hero enthält eine klare H1, die das prominenteste Textelement ist.
• Primäre CTA ist visuell unterscheidbar und folgt interactive-state-system.
• Text-Overlays erfüllen die WCAG-AA-Kontrastanforderungen (4,5:1).
• Räumliche Komposition (z. B. Split, Centered) ist mit den Markenzielen konsistent.
• Vertikale Abstände (Padding/Lücken) verwenden Tokens aus dem flüssigen Abstandssystem.
• Layout bleibt auf mobilen Viewports funktional und lesbar.
• Fokuspunkte in Bildern bleiben beim responsiven Stapeln erhalten.
• Automatisch abspielendes Video/Animation hat ein Pause-Steuerelement und beachtet prefers-reduced-motion.