Webdesign und Animation: der Spickzettel für Claude-Prompts
Wer „schöne Animation“ schreibt, bekommt Zufall. Wer „Logo-Laufband, 40 s pro Durchlauf, pausiert bei Hover“ schreibt, bekommt genau das. Hier stehen die Namen der Muster, Effekte und Komponenten mit Erklärung.
Layout-Muster 11
Hero section- Der erste Bildschirm mit Kernaussage, Bild und Haupt-CTA.Entscheidet auf jeder Landingpage, ob jemand weiterliest.
Above the fold- Der Bereich, der ohne Scrollen sichtbar ist.Hier gehören Angebot, Nutzen und Button hin.
Bento grid- Raster aus unterschiedlich großen Kacheln wie in einer Bento-Box.Stellt mehrere Funktionen oder Leistungen kompakt nebeneinander.
Split screen layout- Seite in zwei Hälften geteilt, meist Text links und Bild rechts.Klassisch für Produktseiten und Formulare mit Begleitbild.
Z-pattern layout- Inhalte im Zickzack, Bild und Text wechseln die Seite.Für Feature-Abschnitte, die man von oben nach unten liest.
F-pattern layout- Aufbau entlang des typischen Leseverlaufs bei textlastigen Seiten.Für Blog, Wissensseiten und Suchergebnisse.
Card grid- Gleichmäßiges Raster aus Karten mit Bild, Titel und Link.Für Artikel-, Team- oder Referenzübersichten.
Sticky sidebar- Seitenleiste, die beim Scrollen stehen bleibt.Hält Inhaltsverzeichnis oder Kontakt-CTA immer sichtbar.
Asymmetric layout / broken grid- Elemente brechen bewusst aus dem strengen Raster aus.Gibt Agentur- und Markenseiten mehr Charakter.
Full-bleed section- Abschnitt, der randlos über die ganze Bildschirmbreite läuft.Für große Bilder, Videos oder Zitate als Zäsur.
Masonry layout- Spalten mit unterschiedlich hohen Elementen ohne Lücken, wie bei Pinterest.Für Galerien, Projekte oder Social-Wall-Bereiche.
Scroll- und Ladeanimationen 14
Logo marquee / logo ticker- Endlos laufendes Band mit Kundenlogos, oft Logo-Walze oder Laufband genannt.Zeigt Referenzen platzsparend direkt unter dem Hero.
Infinite scrolling text marquee- Laufband aus Text, das ohne Ende durchläuft.Für Claims, Leistungsliste oder Ankündigungen als Trenner.
Text rotator / rotating words- Ein Wort in der Headline wechselt in Schleife, oft Wort-Walze genannt.Spricht mehrere Zielgruppen an, etwa „für Vertrieb / Marketing / HR“.
Typewriter effect- Text erscheint Buchstabe für Buchstabe wie getippt.Passt zu KI- und Software-Themen in der Headline.
Scroll reveal / fade-in on scroll- Elemente blenden ein oder gleiten hoch, sobald sie in den sichtbaren Bereich kommen.Gibt langen Seiten Rhythmus, wenn es dezent bleibt.
Staggered animation- Mehrere Elemente erscheinen kurz nacheinander statt gleichzeitig.Für Karten, Listen und Icons, damit das Auge folgen kann.
Parallax scrolling- Ebenen bewegen sich beim Scrollen unterschiedlich schnell.Erzeugt Tiefe in Hero-Bildern, nur schwach dosieren.
Scroll-triggered animation / scrollytelling- Animation läuft an den Scrollfortschritt gekoppelt ab und erzählt eine Geschichte.Erklärt einen Prozess Schritt für Schritt beim Runterscrollen.
Pinned section / scroll pinning- Ein Abschnitt bleibt fixiert, während sich sein Inhalt weiterbewegt.Für Produkt-Walkthroughs mit wechselnden Screens.
Horizontal scroll section- Vertikales Scrollen bewegt einen Abschnitt seitlich.Für Zeitstrahl, Case Studies oder Prozessschritte.
Number counter / count-up- Zahl zählt beim Erscheinen von null auf ihren Wert hoch.Lässt Kennzahlen wie Kunden oder Jahre am Markt lebendig wirken.
Skeleton screen- Graue Platzhalterformen, solange Inhalte laden.Wirkt schneller als ein Spinner in Dashboards und Portalen.
Page transition- Animierter Übergang beim Wechsel zwischen Seiten.Gibt Website und Web-App einen zusammenhängenden Eindruck.
Scroll progress bar- Leiste, die anzeigt, wie weit du in der Seite bist.Hilfreich bei langen Ratgebern und Whitepapern.
Hover und Mikrointeraktionen 9
Hover state- Aussehen eines Elements, wenn die Maus darüber liegt.Zeigt bei Buttons und Karten klar, dass sie klickbar sind.
Hover lift / card elevation- Karte hebt sich mit Schatten leicht an.Für Artikel-, Produkt- und Preiskarten.
Magnetic button- Button zieht sich leicht in Richtung Mauszeiger.Verspielter Akzent für Haupt-CTAs auf Kampagnenseiten.
Custom cursor / cursor follower- Eigener Mauszeiger, der Elementen folgt oder sich verändert.Eher für Kreativ- und Agenturseiten als für B2B-Shops.
Underline animation- Unterstrich wächst beim Hover von links nach rechts.Dezenter Effekt für Navigation und Textlinks.
Ripple effect- Kreiswelle breitet sich vom Klickpunkt aus.Bestätigt Klicks in Web-Apps und Formularen.
Button loading state- Button zeigt Spinner oder Fortschritt nach dem Klick.Verhindert Doppelklicks beim Absenden von Anfragen.
Toggle switch animation- Animierter Schalter für Ein und Aus.Für Einstellungen und den Wechsel Monatlich oder Jährlich im Pricing.
Tooltip- Kleine Info-Blase beim Hover oder Fokus.Erklärt Fachbegriffe oder Tarifdetails, ohne die Seite zu überladen.
Komponenten 13
Sticky header / navbar- Kopfzeile, die beim Scrollen oben bleibt.Hält Menü und Kontakt-Button jederzeit erreichbar.
Mega menu- Großes Dropdown-Menü mit mehreren Spalten.Für Unternehmen mit vielen Leistungen oder Branchen.
Hamburger menu / off-canvas menu- Menü-Icon mit drei Strichen, das eine seitliche Navigation öffnet.Standard für die mobile Navigation.
CTA button- Handlungsaufforderung als hervorgehobener Button.Pro Abschnitt eine klare Aktion, etwa Termin buchen.
Carousel / slider- Inhalte, die sich seitlich durchblättern lassen.Für Testimonials oder Galerien, nicht für die Hauptbotschaft.
Accordion- Aufklappbare Abschnitte, von denen meist einer offen ist.Ideal für FAQ und Detailinfos zu Leistungen.
Tabs- Reiter, die zwischen Inhaltsbereichen umschalten.Zeigt Varianten wie Branchen oder Tarife auf engem Raum.
Modal / dialog- Fenster über der Seite, das Aufmerksamkeit bündelt.Für Kontaktformular oder Video, sparsam einsetzen.
Pricing table- Vergleich von Tarifen in Spalten mit Funktionen.Für SaaS und Pakete, mit hervorgehobener Empfehlung.
Testimonial slider- Durchlaufende Kundenstimmen mit Foto und Name.Baut Vertrauen kurz vor dem Kontaktbereich auf.
Breadcrumb navigation- Pfadanzeige wie Start > Leistungen > Beratung.Orientierung auf großen Websites und gut für SEO.
Toast notification- Kurze Meldung, die erscheint und von selbst verschwindet.Bestätigt Aktionen wie „Gespeichert“ in Web-Apps.
Stepper / progress indicator- Anzeige der Schritte in einem mehrteiligen Ablauf.Für Anfrageformulare, Quiz-Funnels und Checkouts.
Timing und Easing 7
Duration 150ms to 300ms- Übliche Dauer für UI-Animationen wie Hover und Menüs.Kürzer wirkt hektisch, länger träge: nenne die Dauer im Prompt konkret.
Ease-out- Startet schnell und bremst sanft ab.Standard für Elemente, die erscheinen oder hereinkommen.
Ease-in- Startet langsam und wird schneller.Für Elemente, die den Bildschirm verlassen.
Ease-in-out- Langsamer Start, schnelle Mitte, sanftes Ende.Für Bewegungen von A nach B innerhalb der Seite.
Cubic-bezier curve- Frei definierte Beschleunigungskurve mit vier Werten.Gibt einer Marke ein eigenes Bewegungsgefühl.
Spring animation- Federphysik mit leichtem Nachschwingen statt fester Dauer.Wirkt natürlich bei Karten, Modals und Drag-and-Drop.
Stagger delay- Fester Versatz zwischen den Starts mehrerer Elemente, etwa 50ms.Steuert, wie schnell eine Liste oder ein Raster aufbaut.
Effekte und Hintergründe 9
Glassmorphism- Halbtransparente Flächen mit Weichzeichner wie Milchglas.Für Karten und Navigation über farbigen Hintergründen.
Mesh gradient- Weicher Verlauf aus mehreren Farbpunkten in alle Richtungen.Moderner Hero-Hintergrund in Markenfarben.
Animated gradient- Farbverlauf, der sich langsam verschiebt.Bringt Leben in ruhige Hero-Bereiche, ohne Bilder zu brauchen.
Noise / grain texture- Feines Rauschen über Flächen und Verläufen.Verhindert Farbstufen und wirkt weniger steril.
Spotlight / cursor glow- Leuchtfleck, der dem Mauszeiger über eine Fläche folgt.Hebt Feature-Karten auf Tech-Seiten hervor.
Neumorphism- Weiche, aus der Fläche herausgedrückte Formen mit Licht und Schatten.Selten sinnvoll, weil Kontraste oft zu schwach sind.
Dot grid / grid pattern background- Raster aus Punkten oder Linien als Hintergrund.Typischer Look für Software- und Entwicklerseiten.
Blob shapes / organic shapes- Weiche, unregelmäßige Formen, teils animiert.Lockert strenge Layouts auf, etwa bei HR- und Bildungsthemen.
Lottie animation- Leichtgewichtige Vektor-Animation aus After Effects im JSON-Format.Für animierte Icons und Illustrationen ohne schwere Videos.
Barrierefreiheit und Performance bei Animation 6
prefers-reduced-motion- Systemeinstellung, mit der Nutzer Bewegung reduzieren.Fordere im Prompt, dass Parallax und große Animationen dann abgeschaltet werden.
Focus state / focus-visible- Sichtbare Markierung des Elements, das per Tastatur aktiv ist.Pflicht für Bedienbarkeit ohne Maus, auch bei Custom Buttons.
Animate only transform and opacity- Nur Position, Größe und Deckkraft animieren, keine Layout-Werte.Hält Animationen auch auf schwachen Firmenlaptops flüssig.
60fps / no layout shift (CLS)- Flüssige Bildrate und keine springenden Inhalte beim Laden.Wichtig für Google Core Web Vitals und damit fürs Ranking.
Lazy loading- Bilder, Videos und Animationen laden erst, wenn sie gebraucht werden.Macht lange Landingpages schneller, besonders mobil.
Pause control for auto-playing motion- Möglichkeit, Laufbänder und Slider anzuhalten.Nach WCAG nötig, wenn sich etwas länger als fünf Sekunden bewegt.