Skill This
AI Skill Report Card

Designing Conversion Optimized Websites

B+78·Sep 15, 2026·Source: Web
Markdown
---
name: designing-conversion-optimized-websites
description: Creates custom, high-converting websites tailored to a business's niche, combining unique animations, memorable design, and sales psychology/marketing strategies. Use when a client needs a personalized website that stands out from competitors and is optimized to drive conversions (sales, leads, bookings).
---
Quick Start12 / 15

Client request: "Ich brauche eine Webseite für mein Restaurant/Unternehmen."

Sofortiger Ablauf:

  1. Unternehmen, Nische und Top-3-Konkurrenten analysieren
  2. Alleinstellungsmerkmal (USP) + Wiedererkennungswert definieren
  3. Wireframe/Entwurf mit Verkaufspsychologie-Elementen erstellen
  4. Performance-optimierte Animationen einbauen (auch für schwache Geräte)
  5. Präsentieren, Feedback einholen, iterieren
Recommendation▾
Consider writing the skill content in English for broader compatibility/consistency, or clarify that it targets German-speaking client workflows explicitly, since mixing languages may confuse skill discovery.
Workflow14 / 15

Progress:

  • Schritt 1: Unternehmens- & Konkurrenzanalyse
  • Schritt 2: Differenzierungsstrategie & Wiedererkennungswert festlegen
  • Schritt 3: Seitenstruktur nach Conversion-Logik aufbauen
  • Schritt 4: Design & Animationen umsetzen (performant)
  • Schritt 5: Präsentation & Revision

Schritt 1 – Analyse:

  • Branche, Zielgruppe, Preissegment des Kunden erfassen
  • 2–3 direkte Konkurrenzseiten screenen: Was machen sie gut/schlecht?
  • Bestehende Markenelemente sammeln (Logo, Farben, Ton, Fotos)

Schritt 2 – Differenzierung:

  • Ein zentrales visuelles/interaktives Merkmal festlegen, das die Seite unverwechselbar macht (z. B. eine signature Animation, ein besonderes Scroll-Erlebnis, ein wiederkehrendes visuelles Motiv)
  • Definieren, welche Emotion die Seite auslösen soll (Vertrauen, Appetit, Exklusivität, Dringlichkeit)

Schritt 3 – Struktur nach Verkaufspsychologie:

  • Hero-Section: Klares Nutzenversprechen + starker visueller Eindruck in <3 Sekunden
  • Social Proof früh platzieren (Bewertungen, Kundenlogos, Zahlen)
  • Knappheit/Dringlichkeit einbauen wo passend (limitierte Angebote, Reservierungs-CTA)
  • Klare, wiederholte Call-to-Actions (nicht nur am Ende)
  • Kontrastfarbe konsequent nur für CTAs reservieren
  • Reibungslose Nutzerführung: jede Sektion beantwortet die nächste Frage des Besuchers

Schritt 4 – Design & Animation:

  • Animationen nur dort, wo sie Aufmerksamkeit lenken oder Freude erzeugen — nicht dekorativ überladen
  • CSS-Transforms/Opacity statt Layout-Properties animieren (GPU-beschleunigt)
  • prefers-reduced-motion respektieren
  • Lazy-Loading für Bilder/schwere Assets, Animationen erst bei Scroll-in-View triggern (Intersection Observer)
  • Auf Low-End-Geräten testen (Chrome DevTools CPU-Throttling 4-6x)

Schritt 5 – Präsentation:

  • Entwurf im Kontext zeigen (nicht nur Screenshots — interaktive Vorschau)
  • Begründen, warum bestimmte Design-Entscheidungen getroffen wurden (Nische, Psychologie)
  • Feedback strukturiert einholen, gezielt nachbessern
Recommendation▾
Examples are good but both are somewhat similar in structure (hero + social proof + CTA pattern) — add a contrasting example, e.g. a failed/generic approach to explicitly show bad vs good outcomes.
Examples15 / 20

Example 1: Input: Restaurant-Kunde möchte neue Webseite, hat aktuell nur eine einfache Menü-PDF-Seite. Output: Entwurf mit Hero-Video/Bild von signature-Gericht, warmer erdiger Farbpalette, sanfter Fade-in-Animation beim Scrollen durch Menü-Kategorien, Reservierungs-Button sticky im Header, Google-Bewertungen direkt unter Hero, Standort/Öffnungszeiten mit interaktiver Karte im Footer. Alleinstellungsmerkmal: animierter "Signature-Dish"-Reveal beim Laden der Seite.

Example 2: Input: B2B-SaaS-Unternehmen will Landingpage, Konkurrenten wirken alle generisch/austauschbar. Output: Klarer Nutzenversprechen-Hero mit Kontrast-CTA, Kunden-Logo-Leiste direkt darunter (Social Proof), interaktive Produkt-Demo-Animation beim Scroll (Scroll-triggered Storytelling), Vergleichstabelle gegen Konkurrenz, Preissektion mit Anker-Preis-Psychologie (durchgestrichener höherer Preis), abschließender Dringlichkeits-CTA ("Nur noch X Plätze diesen Monat").

Recommendation▾
Quick Start jumps directly into German-language client dialogue without brief context-setting for non-German users; add a short one-line intro before the numbered steps.
Best Practices
  • Immer zuerst die Nische verstehen — Design folgt Strategie, nicht umgekehrt
  • Ein starkes, einzigartiges Merkmal ist besser als zehn generische Effekte
  • Jede Animation muss einen Zweck haben (Aufmerksamkeit, Emotion, Führung) — sonst weglassen
  • Performance-Test auf simuliert langsamen Geräten ist Pflicht, nicht optional
  • CTAs mehrfach, konsistent platziert und farblich abgesetzt
  • Social Proof so früh wie möglich zeigen
  • Immer mit Entwurf präsentieren, Kunde einbeziehen, dann iterieren
Common Pitfalls
  • Nicht: Animationen nur weil sie "cool" aussehen, ohne Performance-Rücksicht
  • Nicht: Design vor Analyse — führt zu generischen, austauschbaren Seiten
  • Nicht: Zu viele Farben/CTA-Stile — verwässert die Konversionswirkung
  • Nicht: Konkurrenzanalyse überspringen — Wiedererkennungswert entsteht nur durch bewussten Kontrast
  • Nicht: Layout-Properties (width, top, left) animieren statt transform/opacity — verursacht Ruckeln
  • Nicht: Feedback-Runde überspringen — finaler Erfolg hängt von Kunden-Iteration ab
0
Grade B+AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
12/15
Workflow
14/15
Examples
15/20
Completeness
16/20
Format
14/15
Conciseness
13/15
Save to My Skills