Storytelling & Emotion
Wie du mit Animation, Struktur und Sprache Vertrauen aufbaust und fühlbar machst
Godlike Visual Storytelling Patterns
Klicke auf die Beispiele, um zu sehen, wie die verschiedenen Storytelling-Patterns funktionieren
Scroll-basierter Reveal-Abschnitt
Scrolle nach unten, um die Geschichte in drei Etappen zu erleben
Das Problem
Sarah verbrachte Stunden damit, ihre Website zu optimieren. Trotz aller Bemühungen blieben die Conversions niedrig. Besucher kamen, schauten sich um und verschwanden wieder – ohne zu kaufen, ohne sich anzumelden.
Der Wendepunkt
Dann entdeckte sie die Kraft des visuellen Storytellings. Sie begann, ihre Inhalte nicht nur zu schreiben, sondern zu inszenieren – mit Animationen, die beim Scrollen erscheinen, mit Parallax-Effekten und emotionalen Zitaten.
Das Ergebnis
Die Ergebnisse waren beeindruckend: Die Verweildauer verdoppelte sich, die Conversion-Rate stieg um 37%. Besucher wurden zu Kunden, weil sie nicht nur informiert, sondern emotional berührt wurden.
Prompt: Add scroll-based 3-step storytelling with soft fade and movement
Was du heute lernst
Gute Geschichten berühren. Geniales Design verstärkt dieses Gefühl.
Emotionale Mini-Storys mit GPT
Lerne, wie du mit einfachen Prompts emotionale Geschichten für verschiedene Branchen erstellst
Text zu Erlebnis machen
Verwandle statische Texte in dynamische Erlebnisse mit Reveal, Parallax & Motion
Visuelle Patterns für Emotionen
Entdecke bewährte visuelle Muster für emotionale Branchen wie Coaching oder Handwerk
Effekte für maximale Nähe
Setze kleine Animationen und Effekte ein, um Vertrauen und emotionale Nähe zu schaffen
Warum Visual Storytelling wirkt
Emotion entsteht nicht nur durch Worte, sondern durch Rhythmus, Bewegung, Überraschung
Sie wirkt realer
Durch visuelle Elemente und Animationen werden Geschichten greifbarer und authentischer
Sie wird verinnerlicht
Mehrere Sinne werden angesprochen, was zu tieferer Verarbeitung führt
Sie bleibt länger im Kopf
Visuelle Geschichten werden besser erinnert als reine Textinformationen
Du wirst dadurch für deine Kund:innen nicht nur zum Designer – sondern zum Inszenator.
Wenn eine Geschichte sichtbar wird, wird sie nicht nur gelesen – sie wird erlebt.
Marie Dubois
UX-Designerin & Storytelling-Expertin
GPT-Prompt für emotionale Mini-Storys
Nutze diesen wiederverwendbaren Prompt für verschiedene Branchen
Prompt-Vorlage
Ich erstelle eine Website für einen Friseursalon, der für natürliche Looks und persönliche Beratung bekannt ist. Zielgruppe: Frauen 30–50. Bitte schreibe eine emotionale Mini-Geschichte (max. 80 Wörter), die Nähe und Vertrauen erzeugt. Stil: ehrlich, ruhig, feminin, wertschätzend.
"Als Lisa in unseren Salon kam, trug sie nicht nur ihre Haare, sondern auch die Last eines anstrengenden Tages. 'Ich brauche etwas Neues, aber nichts Extremes', sagte sie leise. Wir nahmen uns Zeit, hörten zu. Eine Stunde später sah sie nicht nur ihr strahlendes Spiegelbild, sondern fühlte auch die Leichtigkeit zurückkehren. 'So bin ich – nur besser', lächelte sie. Genau das ist unser Versprechen: Wir sehen die Frau hinter den Haaren."
Tipp: Passe den Prompt für andere Branchen an, indem du die Branche, Zielgruppe und den Stil änderst.
Farb- & Typo-Setups für emotionales Storytelling
Wähle die richtige Stimmung für deine Geschichte
Farbpalette
Schriften
- Lora
- Inter Light
- DM Serif Display
Ideale Branchen
- Wellness
- Yoga
- Therapie
Prompt-Beispiel
Use a soft pink background, Lora typography, and glowing button animations to create a sanft design feeling.
Deine Lernaufgabe
Setze das Gelernte direkt in die Praxis um
So gehst du vor:
Wähle eine Branche (Friseur, Handwerk, Immobilien, Coaching)
Nutze GPT zur Story-Erstellung
Baue in v0 eine inszenierte Story-Sektion mit mindestens einem der vorgestellten Effekte
Achte besonders auf Typografie, Animation & Reihenfolge
Teste: Fühlt sich die Seite „lebendig“ an?
Tipps für den Erfolg
Wähle eine Stimmung, die zur Branche passt
Nutze Animationen sparsam, aber wirkungsvoll
Teste deine Seite auf verschiedenen Geräten
Bitte um Feedback von jemandem, der die Branche nicht kennt
Storytelling-Vorlagen & Emotions-Trigger
Animation-Kit für Storytelling in v0
Animation-Kit für Storytelling in v0
Erweiterte Animationen und Effekte für emotionales Design
10 Prompt-Vorlagen
Für Scroll Reveal, Parallax, Hover, Timelines
Code-Snippets
Für Tiefeneffekte, Bewegung, Feedback
Interaktive CTA-Animationen
Glowing Hover, Sticky CTA mit Bounce, Pulse
Farb- & Typo-Kombis
Für Stimmungen wie 'sanft', 'kraftvoll', 'einladend'
Schalte das komplette Animation-Kit frei
Erstelle emotionale Designs für deine Kunden und steigere ihre Conversion-Rate mit professionellen Animationen und visuellen Effekten.
✨ Dadurch entsteht:
- • Klare Trennung zwischen Basis- und Premium-Lernen
- • Visuelle Spannung & subtiler Upsell-Trigger
- • Mehr Interaktivität durch „Entdecken statt konsumieren"