Wie ich die Startseite mit Storytelling-Aspekten strukturiere

Einleitung – Struktur der Homepage mit Storytelling Über die letzten Jahre habe ich mir eine einfache Seitenstruktur zusammengestellt, an der ich mich bei neuen Seiten orientieren kann. Diese Struktur basiert…

Ein Webdesigner zeichnet mobiles Design auf einem Blatt Papier.
Inhaltsverzeichnis

Einleitung – Struktur der Homepage mit Storytelling

Über die letzten Jahre habe ich mir eine einfache Seitenstruktur zusammengestellt, an der ich mich bei neuen Seiten orientieren kann. Diese Struktur basiert auf StoryBrand von Donald Miller und Storytelling von Alexander Christiani. Diese setzen auf die erprobte Struktur von guten Geschichten, von Pixar bis James Bond.

Die Grundidee ist, dass der Kunden (als Held der Geschichte) in den Mittelpunkt deiner Webseite platziert wird. Es wird seine Situation / sein Problem beschrieben und wie du ihm dabei helfen kannst es zu überkommen.

Logischerweise sind alle Seiten unterschiedliche und benötigen auf der Startseite unterschiedliche Abschnitte, aber den Anfang lege ich mittlerweile fast immer auf der folgenden Struktur.

Hero-Section – der erste Abschnitt deiner Website

Der Hero-Abschnitt ist das erste, was deine Besucher und potenzielle Kunden sehen und lesen. Dieser Abschnitt sollte direkt vermitteln, was du anbietest. Christiani sagt hier: „Wer verwirrt, verliert.“

Normalerweise besteht er aus:

  • Überschrift – idealerweise mit 3–8 Wörtern.
    • Was bietest du für wen an?
  • Erklärender Text – 1–3 Sätze.
    • Erkläre kurz, was du machst und was dein idealer Kunde davon hat.
  • „Call to Action“ – 1–2 Buttons
    • Der Handlungsaufruf verdeutlicht dem Kunden, welche Handlung als Nächstes gemacht werden sollte, z. B. Speisekarte lesen, Platz reservieren, Termin vereinbaren etc.

Bonus: Value-Stack

Teil des Aufbaus einer Webseite nach StoryBrand ist der sogenannte Value-Stack. Value (Englisch für Werte) ist eine Mini-Liste mit idealerweise 3 Punkten. Der Value-Stack kommuniziert einfache Vorteile für den Kunden, z. B. 24/7 telefonisch erreichbar, kostenloses Kennenlernen etc.

Abschnitt der Probleme & Vorteile für den Kunden

Der nächste Abschnitt besteht mindestens aus einer Erklärung des Problems und ggf. auch mit Vorteilen und Lösungen für den Kunden.

Probleme deines Kunden darstellen

Hier gehst du darauf ein, welche Probleme dein Kunde gerade hat, die du lösen kannst. Hiermit skizzierst du eindeutig, dass der Kunde bei dir mit seinem Problem richtig ist. Gleichzeitig zeigst du, dass du sein Problem verstehst. Als Lösung kannst du direkt im Anschluss Vorteile und Funktionen präsentieren.

Vorteile & Funktionen

Im Marketing unterscheidet man zwischen Vorteilen (engl. Benefits) und Funktionen (engl. Features). In diesem Abschnitt gehst du darauf ein, welche Vorteile dein Kunde durch die Zusammenarbeit und welche Leistung/Funktion, dies ermöglicht. Hier bietet sich folgende Kombination an.

  • Überschrift – Benefit: Welchen Vorteil hat der Kunde in 2–5 Wörtern
  • Text mit 1–2 Sätzen. Welche Leistung / Funktion macht dies möglich?

Überschrift: Eine Webseite, die mit dir wachsen kann
Text: Ich setze auf den Standard WordPress. Dieses System lässt sich beliebig um Funktionen erweitern.

Alternativ kann hier auch eine Auflistung deiner Leistungen, z.B. Ernährungsberatung, Profi-Athleten-Training, Betriebliche Sportangebote etc.

Der ‘Über uns’-Abschnitt – du als Mentor für den Kunden

Anstatt dich hier in epischer Breite zu verkaufen, verfolgt das Storytelling hier einen anderen Ansatz. Du bist nicht der Held, sondern die unterstützende Kraft. Hier kannst du vorstellen, warum du den Kunden verstehst – z. B. gleiche Erfahrungen – oder warum deine Qualifikationen dem Kunden helfen.

Hier sollte auch ein Foto von dir oder deinem Team sein. Menschen bevorzugen eher das Kaufen von anderen Menschen und nicht der gesichtslosen Organisation.

Der Plan

Schritte zum Ziel: Was ist die erste Handlung? Was ist das Ergebnis? Dazwischen sollten maximal vier weitere Schritte liegen, eher weniger. Damit vermittelst du deine Arbeitsweise und dein Kunde kann sich vorstellen, wie eure Zusammenarbeit und sein Weg zur Problemlösung aussieht.

Der Handlungsaufruf oder engl. call to action

Am Ende der Seite steht der Call-to-Action – der Handlungsaufruf. Dem Kunden werden zusammenfassend präsentiert, wie du ihm bei seinem Problem helfen kannst und welche Handlung als Nächstes durchgeführt werden. Du kannst hier auch aufnehmen, was passiert, wenn er nicht handelt – Christiani nennt es ‘Abwenden des Misserfolgs’.

Optionale Abschnitte

Kontakt (insbesondere bei Onepage-Seiten)

Leistungen (insbesondere bei Onepage-Seiten)

Preise & FAQ

Rezensionen, Social proof, Testimonials

Hinweis zu meinen Texten meiner Wissenssammlung

Meine Artikel sind der erste Versuch, meine Arbeitsweise, Prozesse und Wissen zu dokumentieren. Mir dienen sie als Gedächtnisstütze euch euch als Transparenz für meine Arbeitsweise.

Die Artikel sind derzeit eher Entwürfe, als fertige Texte mit Anspruch auf Richtigkeit. Dennoch spiegeln eine erste Version meines Arbeitens wider. Quasi nach dem 80-20-Prinzip möchte ich lieber auch nicht perfekte Texte veröffentlichen.

Bei Fragen wendet euch gerne an mich.

Webdesigner Sebastian Forst vor seinem Computer