Was macht Webdesign-Strategie?
Ein strategisches Designberatungs-Skill, das sicherstellt, dass Websites die richtige Botschaft an die richtige Zielgruppe in der richtigen Reihenfolge übermitteln – bevor darüber nachgedacht wird, wie hübsch sie aussehen.
Dieses Skill gilt für die Erstellung neuer Websites, die Überprüfung bestehender, das Schreiben von Landing-Page-Texten und die Prüfung von Seiten auf häufige Fehler. Lies references/detailed-guidelines.md für die vollständige Checkliste bei tiefgehenden Audits oder dem Aufbau mehrteiliger Seiten.
Kernprinzip
Designstrategie kommt vor der visuellen Umsetzung. Eine schöne Website, die das Falsche sagt, an das falsche Publikum, in der falschen Reihenfolge, wird immer gegen eine schlichte Seite mit klarer Botschaft verlieren. Führe mit Strategie, dann schichte Ästhetik darauf (unter Verwendung des frontend-design-Skills für die visuelle Umsetzung beim Bau).
1. Phasengerechtes Design
Bevor eine einzige Zeile Text oder Code geschrieben wird, identifiziere die Phase, in der sich das Unternehmen befindet. Dies bestimmt alles – Layout-Komplexität, Screenshot-Treue, CTA-Strategie und Seiten-Tiefe.
| Phase | Designansatz | Schlüsselsignale |
|---|---|---|
| Vor dem Start / Früh | Aufbau von Geheimnis. Verblasste oder stilisierte Screenshots. Wartelisten/E-Mail-Erfassung. Einseitig, an einem Tag umsetzbar. Einfache, fokussierte Botschaft. | Kein öffentliches Produkt, kleines Team, Vor-Umsatz |
| Wachstum | Markenbekanntheit. Charakteristische Akzentfarben, detaillierte Feature-Aufschlüsselungen, hochauflösende Produkt-Screenshots, mehrere CTAs. | Live-Produkt, aktive Nutzer, Iteration am PMF |
| Reif | Informationstiefe. Produkt-Unterabschnitte, Roadmaps, Sicherheits-/Compliance-Seiten, Enterprise-Stufen. Zurückhaltende, autoritative Palette. | Etablierte Marktpräsenz, Enterprise-Deals |
Die polierte Optik eines reifen Unternehmens vor dem Start nachzuahmen, erzeugt ein Vertrauensdefizit – es verspricht Vollständigkeit, die nicht geliefert werden kann. Umgekehrt signalisiert ein reifes Produkt mit einer einseitigen Wartelisten-Seite Vernachlässigung.
2. Der Fünf-Sekunden-Filter
Jede Landing Page muss diese vier Fragen innerhalb von fünf Sekunden nach der Ankunft beantworten:
- Was ist es? – Verwende klare, spezifische Sprache. „Eine Chat-App“ nicht „Eine Synergieplattform.“
- Für wen ist es? – Nenne die Zielgruppe. „Für technische Projektmanager“ schlägt „Für Teams.“
- Zu welchem Zweck? – Gib den unmittelbaren Nutzen oder das Ergebnis an.
- Warum sollten sie sich darum kümmern? – Was macht dies besser als den Status quo?
Startups können sich keine vagen Slogans leisten. Verwende spezifisches Fachjargon als hochwertigen Filter – „Issue Tracking“ zieht Ingenieure an und filtert Nicht-Passende aus. Nur massive etablierte Plattformen haben das Recht, Dinge wie „Wo Arbeit passiert“ zu sagen.
Die Pyramide der Klarheit
Strukturiere Homepage-Inhalte in abnehmender Dringlichkeit:
- Spitze – Scharfes, jargonorientiertes Wertversprechen (Hero-Bereich)
- Erweiterter Kontext – Feature-Erzählungen mit visuellem Beweis beim Scrollen des Nutzers
- Funktionale Tiefe – Technische Unterlagen, sekundäre Anwendungsfälle, Preise, Sicherheit (separate Seiten für reife Produkte)
3. Vermeidung von „KI-Schrott“-Mustern
Originalität ist ein Proxy für Produktqualität. Wenn die Seite wie generischer LLM-Output aussieht, nehmen Nutzer an, dass das Produkt es auch ist. Markiere und eliminiere diese Muster:
Visuelle Schrott-Signale:
- Lila Verläufe und Standardschlagschatten (das #1 „KI hat dies gemacht“-Signal)
- Generische Bento-Box-Grids (3×2 mit einfachen Symbolen, kein Produktkontext)
- Google-artige Fake-Dashboards mit Primärfarben-Hervorhebungen (rot/gelb/grün/blau)
- Schwimmende Würfel, abstrakte 3D-Formen oder generische Hero-Grafiken ohne Produktnachweis
Mikro-Detail-Fehler (die „Passform und Verarbeitung“-Schicht):
- Inkonsistente Abstände, doppelte Leerzeichen in Überschriften, verirrte Punkte
- Hartcodierte Zeitstempel oder Platzhalterdaten, die in Screenshots sichtbar sind
- „Stil-Suppe“ – Mischen von 5+ Schriftbehandlungen, Zerstörung der visuellen Hierarchie
- Text mit geringem Kontrast (hell auf hell, gelb auf weiß)
- Winzige oder unbeholfen dimensionierte Logos
Text-Schrott-Signale:
- Jedes Wort in Testimonials großgeschrieben (schreit „KI-generiert“)
- Vage soziale Beweise wie „Tolles Tool!“ statt „500 Stunden bei manueller Qualitätssicherung gespart“
- Undefinierter interner Jargon (nicht davon ausgehen, dass Nutzer wissen, was „Deep Eval“ oder „MCP“ bedeutet)
4. Interaktionsdesign-Regeln
Animation und Interaktion sollten die Navigation verbessern, niemals vom Wertversprechen ablenken.
Tun:
- Bewegung nutzen, um die Aufmerksamkeit auf den primären CTA zu lenken
- Subtile Farbverschiebungen beim Hover oder Glühen, um Klickbarkeit anzuzeigen
- Scroll-getriggerte Enthüllungen, die sich natürlich anfühlen
Nicht tun:
- Scroll-Jack (natürliches Scrollen mit zeitgesteuerten Animationen kapern)
- Hintergrundanimationen in Schleife (Meteore, flackernde Karten, ständige Bewegung)
- Informationen hinter Hover-Zuständen verstecken (bricht auf Mobilgeräten, erzwingt „Jagd“ auf dem Desktop)
- „Link-Salat“ im Hero – gleichzeitige Links zu Discord, GitHub, Twitter und Docs
5. Conversion-Optimierung
Jede Hürde ist ein Abbruchpunkt. Minimiere Reibung zwischen Ankunft und dem „Aha-Moment“.
- Demo-Paradoxon: Ein „Demo buchen“-Button erfordert eine 20-minütige Verpflichtung. Biete zuerst einen Vorgeschmack – Browser-Prompts, interaktive Sandboxes, kurze Produktvideos.
- CTA-Disziplin: Ein klares Ziel pro Scroll-Abschnitt. Stapel keine konkurrierenden CTAs.
- Soziale Beweisstandards: Echte Namen, echte Titel, echte Firmenlogos (S/W für Sauberkeit). Spezifische Ergebnisse vor allgemeinem Lob.
6. Anwendung dieses Skills
Beim Bau einer neuen Seite:
- Frage (oder bestimme) die Lebenszyklusphase des Unternehmens
- Entwerfe Text, der den Fünf-Sekunden-Filter besteht
- Plane die Informationsarchitektur mit der Pyramide der Klarheit
- Baue die Seite (verwende
frontend-designfür die visuelle Umsetzung) - Prüfe das Ergebnis gegen die Schrott-Checkliste und die Passform-und-Verarbeitungspunkte in
references/detailed-guidelines.md
Bei der Überprüfung/Kritik einer bestehenden Seite:
- Lies
references/detailed-guidelines.mdfür die vollständige Audit-Checkliste - Bewerte zuerst die Phasengerechtigkeit
- Führe den Fünf-Sekunden-Filter durch
- Prüfe auf KI-Schrott-Muster
- Überprüfe Interaktionsdesign und Conversion-Flow
- Gib spezifisches, umsetzbares Feedback, organisiert nach Schweregrad
Beim Schreiben von Hero-Text oder CTAs:
- Identifiziere die Zielgruppe und ihre Sprache
- Verwende den Fünf-Sekunden-Filter als Schreibbeschränkung
- Bevorzuge spezifischen Jargon gegenüber breiten Slogans
- Untermauere jede Behauptung mit visuellem Beweis (Screenshots, Demos, Metriken)