Hero-Bereich Design
Entwirft den ersten Bildschirm, den Benutzer auf einer Website sehen – den Hero-Bereich. Sie haben 2-4 Sekunden, um zu kommunizieren, wer Sie sind, was Sie tun und warum der Besucher bleiben sollte. Jedes Pixel oberhalb der Falte ist eine Conversion-Entscheidung.
Entscheidungspunkte
Layout-Muster Entscheidungsbaum
Was ist das primäre Ziel?
├── Markenbekanntheit/Merkbarkeit → Full-Bleed visueller Hero
├── Produktklarheit/Demonstration → Split Hero (Text links, Visual rechts)
├── Feature-Präsentation/Vergleich → Zentrierter Hero mit Feature-Grid darunter
└── Autorität/Glaubwürdigkeit → Redaktioneller/asymmetrischer Hero
Gibt es ein starkes Produktvisual?
├── Ja (App-Screenshots, Dashboard, Demo) → Split Hero
└── Nein (API, Dienstleistung, abstraktes Konzept) → Zentrierter Hero
Was ist die Zielgruppe?
├── Entwickler/Technisch → Zentriert, minimalistisch (Linear/Vercel-Stil)
├── Geschäftlich/Unternehmen → Split mit professionellen Visuals
├── Verbraucher/Lebensstil → Full-Bleed mit Lifestyle-Bildern
└── Kreativ/Design → Redaktionelles/asymmetrisches Layout
Komplexität des Inhalts?
├── Einfaches Wertversprechen (1 Zeile) → Full-Bleed oder zentriert
├── Mittel (Überschrift + Untertitel) → Split oder zentriert
└── Komplex (mehrere Vorteile) → Split mit strukturiertem Text
CTA-Strategie Entscheidungsbaum
Was ist das Geschäftsmodell?
├── Freemium/Testversion → "Kostenlos starten" + "Demo ansehen"
├── Vertriebsgesteuert → "Mit Vertrieb sprechen" + "Preise anzeigen"
├── Direktkauf → "Jetzt kaufen" + "Mehr erfahren"
└── Lead-Generierung → "Angebot anfordern" + "Fallstudien"
Nutzerabsicht?
├── Hohe Absicht (nach Marke gesucht) → Nur direkter CTA
├── Mittlere Absicht (problembewusst) → Primärer + sekundärer CTA
└── Niedrige Absicht (Entdeckung) → Weicher CTA + wertorientierter Text
Fehlermodi
1. Karussell-Verwirrung
Symptom: Hero-Inhalt rotiert automatisch, Absprungrate >70% Diagnose: Benutzer können rotierende Nachrichten nicht verarbeiten; Entscheidungslähmung tritt ein Lösung: Ersetzen durch eine einzige stärkste Nachricht; statischen Hero mit einem klaren Wertversprechen verwenden
2. CTA unterhalb der Falte
Symptom: Niedrige Conversion-Rate trotz hohem Traffic; mobiler CTA erfordert Scrollen Diagnose: Primäre Aktion beim ersten Seitenaufruf nicht sichtbar Lösung: Hero-Höhe reduzieren oder CTA nach oben verschieben; Sichtbarkeit bei 375px mobiler Breite sicherstellen
3. Unklares Wertversprechen
Symptom: Hohe Absprungrate, niedrige Verweildauer, verwirrtes Nutzerfeedback Diagnose: Die Überschrift beschreibt, was Sie sind, nicht, was Sie für Nutzer tun Lösung: Mit Ergebnis/Nutzen voran; "10x schneller ausliefern" nicht "DevOps-Plattform"
4. Schlechte visuelle Hierarchie
Symptom: Nutzer verpassen wichtige Informationen, niedrige CTA-Klickrate (<2%) Diagnose: Alle Textelemente haben das gleiche visuelle Gewicht; keine klare Lesereihenfolge Lösung: Überschrift 2-3x größer skalieren als Fließtext; Farbe/Gewicht zur Führung des Auges verwenden
5. Performance-Engpass
Symptom: Hohe Absprungrate auf mobilen Geräten; langsame LCP-Werte >3 Sekunden Diagnose: Überdimensionierte Hero-Assets blockieren den kritischen Rendering-Pfad Lösung: Bilder optimieren (WebP/AVIF), nicht-kritische Assets lazy-loaden, Hero-Bild vorladen
Ausgearbeitete Beispiele
Beispiel: SaaS-Produkt-Hero (Split-Layout)
Szenario: Erstellung eines Heroes für ein Code-Review-Tool für Entwicklerteams
Schritt 1: Layout-Entscheidung
- Ziel: Produktdemonstration ✓
- Starkes Visual: Ja (Code-Diff-Screenshots) ✓
- Zielgruppe: Entwickler ✓
- Entscheidung: Split Hero mit Produktvisual
Schritt 2: Text-Strategie
Überschrift: "Code schneller und mit Vertrauen ausliefern" (ergebnisorientiert)
Untertitel: "Automatisiertes Code-Review, das Fehler erkennt, bevor Ihre Nutzer sie sehen" (spezifischer Vorteil)
Primärer CTA: "Kostenlosen Test starten" (Freemium-Modell)
Sekundärer CTA: "Sehen Sie, wie es funktioniert" (Demo für zögernde Nutzer)
Schritt 3: Visuelle Gestaltung
- Links: Text + CTAs (40% Breite)
- Rechts: Animierte Code-Diff-Demo (60% Breite)
- Hintergrund: Dezentes Punktmuster für Entwickler-Ästhetik
Schritt 4: Mobile Anpassung
- Stapelung: Oben Text, darunter Visual
- Überschrift skaliert von 3rem auf 2.25rem
- CTA-Buttons stapeln sich vertikal mit 1rem Abstand
Experte vs. Anfänger:
- Anfänger: Verwendet generischen "Mehr erfahren" CTA
- Experte: Verwendet "Sehen Sie, wie es funktioniert" (impliziert visuelle Demonstration)
- Anfänger: Überschrift "Code-Review-Tool für Teams"
- Experte: Überschrift "Code schneller und mit Vertrauen ausliefern" (Nutzerergebnis)
Qualitätsprüfungen
- Primärer CTA ohne Scrollen bei 375px mobiler Breite sichtbar
- Überschrift vermittelt das Wertversprechen in ≤10 Wörtern
- Hero lädt mit LCP ≤2,5 Sekunden (mit Drosselung testen)
- Textkontrastverhältnis ≥4,5:1 gegen jeden Hintergrund
- Mobiles Layout stapelt sauber ohne horizontalen Scrollbalken
- Social-Proof-Element vorhanden (Logos, Metriken oder Testimonial)
- Einzige klare Nachricht (keine rotierenden Inhalte oder mehrere Wertversprechen)
- CTA-Klickrate ≥2% (nach 1 Woche messen)
- prefers-reduced-motion für Animationen respektiert
- Hero-Bild verwendet angemessene Lade-Priorität (eager/high)
NICHT-FÜR Grenzen
Verwenden Sie diese Fertigkeit NICHT für:
- Vollständige Website-Architektur → verwenden Sie web-design-expert
- SEO-Content-Strategie → verwenden Sie seo-visibility-expert
- Blog-Post-Layouts → verwenden Sie web-design-expert
- E-Commerce-Produktseiten → verwenden Sie ecommerce-conversion-expert
- Mehrstufige Onboarding-Abläufe → verwenden Sie user-experience-expert
- Markenidentität/Logo-Design → verwenden Sie brand-design-expert
Delegieren Sie stattdessen, wenn:
- Kunde eine komplette Website-Überarbeitung benötigt → web-design-expert
- Fokus auf Suchmaschinen-Ranking-Optimierung liegt → seo-visibility-expert
- Hero Teil einer komplexen User Journey ist → user-experience-expert