Diskussionsgrundlage · 2026-05-20

UI-Effekte im Vergleich

Zehn moderne Patterns mit ihren Trade-offs. Hover, klicke, prüfe. Jedes Element hat eine Beschreibung: Wann sinnvoll · Wann nicht. Wenn dir eins gefällt — sag Nummer, wir bauen es in die echte UI.

Element 1 · Typografie-Hover

Variable Font Weight-Hover

Hover mich

Variable Fonts erlauben stufenlose Weight-Animation. Beim Hover „erstarkt" die Schrift von 300 → 700 in 400 ms. Subtil, modern, ohne Chrome.

Wann gutHeadlines, Karten-Titel, Branding-Akzente Wann nichtBody-Text (störend beim Lesen) VerdiktVSC-tauglich
Element 2 · 3D-Skeumorph

Echter 3D-Press-Button

Klassischer 3D-Look mit Inset-Highlight, Bottom-Shadow, Press-Down beim Klick. Web 2.0 / iOS-1-6-Aesthetik. Affordance sehr stark („klar klickbar"), aber visuell laut und in Listen ermüdend.

Wann gutSinguläre Primary-CTA, Touch-Geräte mit haptischem Bezug Wann nichtMehr als 1 pro View · datendichte Tools · WCAG (Kontrast leidet durch Gradient) Verdiktselten
Element 3 · Flat-Modern (VSC-Default)

Flat-Button mit Mini-Lift

VSC-Standard: flach, eine Volltonfarbe, beim Hover 2 px nach oben + Akzent-Glow. Auch wenig Affordance? Mehr als genug — Cursor:pointer + Hover-Reaktion reicht.

Wann gutStandard für alle operativen Buttons Wann nicht— VerdiktVSC-Default
Element 4 · 3D-Tilt

Hover-Tilt (perspective)

Hover mich

perspective + rotateX/rotateY + translateZ erzeugt echten 3D-Tilt ohne Bilder. Spielerisch, gut für Marketing-Hero-Karten. Bei langen Sessions sehr ermüdend, weil die räumliche Aufmerksamkeit ständig schwankt.

Wann gutMarketing-Page · Onboarding-Hero · Demo-Karten Wann nichtBedienelemente in produktiver UI VerdiktHero-only
Element 5 · Liquid Glass

Backdrop-Filter Glass

Frosted Glass

Apple iOS-26-Pattern „Liquid Glass": semi-transparente Karte mit backdrop-filter: blur + saturate. Funktioniert nur über farbigem Hintergrund — auf Plain-Dark-Bg wirkungslos. Sehr modern, aber performance-teuer (GPU-Compositing).

Wann gutÜber Foto-Hintergrund · Mobile-Bottom-Bars · Modals Wann nichtÜber flachem Dark-Bg · datendichte Karten · Low-End-Geräte Verdiktsituativ
Element 6 · Sliding Tab

Sliding Tab-Indicator

Tab klicken — Indicator gleitet

Statt jeder Tab mit eigenem Underline: ein Indicator, der zwischen Tabs gleitet. Räumliche Continuity → Gestalt-Common-Fate. Empfehlung: Material-3-Tab-Pattern.

Wann gutTab-Bars · Segment-Controls · Filter-Toggles Wann nicht— VerdiktVSC-tauglich (Dashboard-Tabs aufrüsten)
Element 7 · Skeleton Loading

Skeleton-Screen

Statt Spinner: graue Form-Platzhalter mit Shimmer. Doherty (400 ms-Schwelle): Skeleton fühlt sich schneller an als Spinner, weil das Layout vorab steht und der Nutzer „sieht was kommt".

Wann gutPflicht für Wartezeiten > 400 ms (z.B. /api/projects 8s-Scan) Wann nichtWartezeit unbekannt + selten · Vollscreen-Loads VerdiktVSC-Pflicht (Audit-Befund N-H1)
Element 8 · Spring-Bounce

Spring-Bounce Press

Easing cubic-bezier(0.34, 1.56, 0.64, 1) erzeugt einen leichten Überschwinger („Spring"). Beim :active verkleinert sich der Button schnell (80 ms), beim Loslassen schwingt er zurück. Apple/iOS-Style.

Wann gutTouch-Interaktion · spielerische Mikromomente Wann nichtDatentabellen · serielle Klicks (Bounce summiert sich) Verdiktselektiv
Element 9 · Gradient-Border

Animierte Gradient-Border

Status: aktiv

Conic-Gradient rotiert via @property --gradient-angle. Zeigt „lebendige" Pulse-Aufmerksamkeit. Anti-Pattern wenn dauerhaft: Auge wandert ständig dorthin. Sinnvoll nur für **temporär wichtige** Hervorhebungen.

Wann gut„Auto-laufender Job"-Indikator · Live-Connection-Status Wann nichtStatische Elemente · Listen-Items Verdikttemporär
Element 10 · Kinetic Typography

Letter-by-Letter Reveal

Software

Jeder Buchstabe fadet einzeln rein (80 ms versetzt). Awwwards-Editorial- Pattern. Funktioniert einmal pro Page-Load als Hero-Moment — bei Wiederholung störend. Reload-Button neben dem Hero zum Vorführen.

Wann gutHero-Headline · Onboarding-Welcome · Marketing-Page Wann nichtMehrfach pro View · Operative Listen VerdiktVSC-Hero-tauglich (1x)
Empfehlung für VSC

Was einbauen, was lassen

Für VSC empfehle ich konkret: E1 (Hover-Weight in Hero-Headlines), E3 bleibt Default, E6 (Sliding-Tab für Dashboard-Detail), E7 (Skeleton statt Empty-State für 8 s-Pipeline-Scan), E10 (Kinetic-Hero einmal beim Login-Redirect).

Nicht einbauen: E2 (3D-Skeumorph — Web 2.0), E4 (Tilt — nicht für operative UI), E9 (animierte Border dauerhaft — ermüdend). E5 + E8 nur bei konkretem Bedarf.

← Zurück zur Übersicht