Karten sind die Bausteine des modernen Webdesigns. Die Nielsen Norman Group definiert sie als Container, die verwandte Informationen in scannbare, flexible Einheiten gruppieren. Wir entwerfen Karten-Systeme, die Nutzern beim Durchsuchen, Vergleichen und Entscheiden helfen — ob Sie 6 Services oder 6.000 Produkte zeigen.
MUSTERVARIANTEN
Präsentieren Sie Ihre Geschäftsangebote in einem übersichtlichen Raster. Jede Karte enthält ein Icon, einen Titel, eine kurze Beschreibung und einen CTA.
Das Arbeitspferd des E-Commerce. Bild, Titel, Preis, Bewertung und In-den-Warenkorb-CTA. Für schnelles Scannen konzipiert.
Stellen Sie Ihr Team mit Foto, Name, Position und optional Bio oder Social-Links vor.
Präsentieren Sie Arbeiten mit einem dominanten Bild, Projekttitel, Kundenname und Kategorie-Tag. Das Bild übernimmt den größten Teil des Verkaufs.
Vergleichen Sie Tarife nebeneinander. Jede Karte enthält Planname, Preis, Feature-Liste und CTA.
Zeigen Sie Kundenzitate mit Avatar, Name, Position, Unternehmen und dem Testimonial-Text.
Vorschau von Blog-Posts mit Featured-Bild, Titel, Auszug, Autor, Datum und Kategorie-Tag.
Asymmetrisches Karten-Raster, bei dem Karten verschiedene Größen haben — manche nehmen 2 Spalten, manche sind hoch, manche sind breit.
ANIMATIONEN & EFFEKTE
Karten erscheinen nacheinander mit einer leichten Verzögerung zwischen jeder, wodurch ein Kaskaden-Effekt entsteht, während der Nutzer scrollt.
Wann zu verwenden: Jedes Karten-Raster, bei dem Inhalte beim Scrollen des Nutzers geladen werden. Schafft Rhythmus und lenkt Aufmerksamkeit.
Karte hebt sich an (translateY -4px bis -8px) und Schatten vertieft sich beim Hover, simuliert physische Tiefe.
Wann zu verwenden: Jede anklickbare Karte. Die häufigste und erwartete Karten-Interaktion.
Das Kartenbild skaliert beim Hover leicht nach oben (1.05-1.1x), während der Container den Überlauf abschneidet.
Wann zu verwenden: Portfolio-Karten, Produkt-Karten, Blog-Karten — überall wo das Bild das primäre visuelle Element ist.
Ein halbtransparentes Overlay gleitet beim Hover herein und zeigt zusätzliche Informationen, die im Standardzustand verborgen sind.
Wann zu verwenden: Portfolio-Raster, bei denen Sie ein sauberes visuelles Raster wollen, aber Details bei Interaktion zeigen müssen.
Pinterest-Style Layout, bei dem Karten unterschiedlicher Höhen ohne Lücken zusammenpassen. Neue Karten laden dynamisch.
Wann zu verwenden: Bildgalerien, Blog-Archive, nutzergenerierte Inhalts-Feeds mit natürlich unterschiedlichen Höhen.
Karte rotiert beim Hover um 180 Grad, um eine Rückseite mit anderem Inhalt zu zeigen.
Wann zu verwenden: Team-Karten (Vorderseite: Foto, Rückseite: Bio), Preis-Karten (Vorderseite: Features, Rückseite: Vergleich). Sparsam verwenden.
BEST PRACTICES
PREISGEKRÖNTE BEISPIELE
Feature-Karten auf dunklem Hintergrund mit subtilen Gradienten-Rändern. Minimalistisch, informationsdicht und technisch präzise. Jede Karte kommuniziert ein Feature.
Bento-Grid-Layout mit Karten unterschiedlicher Größen. Glassmorphe Effekte und subtile Animationen machen dichte Finanzdaten zugänglich.
Perfektionierte Produkt-Karten. Bildkarussell pro Karte, Preis-Overlay, Bewertung und Herz-Icon. Zeigt genau genug Informationen, um zu entscheiden, ob man klickt.
Sauberes Karten-Raster mit konsistenten Höhen, klaren Kategorien und Vorschau-Thumbnails. Hover zeigt einen "Template verwenden"-CTA. Skaliert fehlerfrei.
UNSER PROZESS
Inventarisieren Sie alle Elemente, die als Karten erscheinen werden. Definieren Sie das Datenmodell: welche Felder existieren und deren Inhaltslängen-Beschränkungen.
Definieren Sie Spaltenanzahl pro Breakpoint (4 Desktop, 2 Tablet, 1 Mobil). Setzen Sie Abstände, Padding und border-radius fest.
Entwerfen Sie die Karte in Figma als wiederverwendbare Komponente mit Varianten: Standard, Hover, Aktiv, Laden, Leer-Zustand.
Definieren Sie Hover-Effekte, scroll-ausgelöste Einblendungen und Übergangs-Timing. Halten Sie die gesamte Animationszeit unter 500ms.
Mit CSS Grid oder Flexbox erstellen. Komponenten-basierte Architektur. GSAP für Scroll-Animationen, CSS für Hover-Effekte.
Testen Sie mit echten Daten, Edge-Cases, Cross-Browser, Touch-Interaktion auf Mobil und Barrierefreiheits-Audit.
VERWANDTE PATTERNS
Der Bereich, der Ihre Inhalte vor dem Karten-Raster einführt.
Mehr erfahren →Ein spezialisiertes Karten-Muster zum Vergleich von Service-Tarifen.
Mehr erfahren →Testimonial-Karten und Logo-Raster, die Vertrauen aufbauen.
Mehr erfahren →Artikel-Karten und Content-Discovery-Layouts.
Mehr erfahren →FAQ
Karten funktionieren am besten zum Durchsuchen vielfältiger Sammlungen (Produkte, Services, Portfolio). Listen funktionieren besser für gerankte oder sequenzielle Inhalte. Tabellen funktionieren besser für datenreiche Vergleiche. Das Layout sollte der Absicht des Nutzers entsprechen.
3-4 auf Desktop (1280px+), 2 auf Tablet (768px), 1 auf Mobil (375px). Mehr als 4 pro Reihe macht einzelne Karten zu klein zum Scannen.
Ja, immer. Gemischte Seitenverhältnisse schaffen ungleiche Kartenhöhen, die das Raster brechen. Verwenden Sie object-fit: cover, um Bilder konsistent zu beschneiden.
Definieren Sie eine feste Kartenhöhe pro Reihe. Kürzen Sie langen Text mit CSS line-clamp. Entwerfen Sie für den schlimmsten Fall und stellen Sie sicher, dass kürzerer Inhalt trotzdem ausgewogen aussieht.
Wir werden Ihr aktuelles Layout auditieren, Möglichkeiten für kartenbasiertes Design identifizieren und ein System vorschlagen, das skaliert.