Card-Layouts, die Komplexität in Klarheit
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
8 Card-Muster, die wir entwerfen
Service Cards
Präsentieren Sie Ihre Geschäftsangebote in einem übersichtlichen Raster. Jede Karte enthält ein Icon, einen Titel, eine kurze Beschreibung und einen CTA.
Product Cards
Das Arbeitspferd des E-Commerce. Bild, Titel, Preis, Bewertung und In-den-Warenkorb-CTA. Für schnelles Scannen konzipiert.
Team / People Cards
Stellen Sie Ihr Team mit Foto, Name, Position und optional Bio oder Social-Links vor.
Portfolio / Case Study Cards
Präsentieren Sie Arbeiten mit einem dominanten Bild, Projekttitel, Kundenname und Kategorie-Tag. Das Bild übernimmt den größten Teil des Verkaufs.
Pricing Cards
Vergleichen Sie Tarife nebeneinander. Jede Karte enthält Planname, Preis, Feature-Liste und CTA.
Testimonial Cards
Zeigen Sie Kundenzitate mit Avatar, Name, Position, Unternehmen und dem Testimonial-Text.
Blog / Article Cards
Vorschau von Blog-Posts mit Featured-Bild, Titel, Auszug, Autor, Datum und Kategorie-Tag.
Bento Grid Cards
Asymmetrisches Karten-Raster, bei dem Karten verschiedene Größen haben — manche nehmen 2 Spalten, manche sind hoch, manche sind breit.
ANIMATIONEN & EFFEKTE
Karten-Animationen, die verstärken, nicht ablenken
Gestaffeltes Einblenden beim Scrollen
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.
Hover-Lift & Schatten
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.
Bild-Zoom beim Hover
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.
Overlay-Einblendung beim Hover
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.
Masonry Layout
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.
Karten-Flip
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
Regeln, die wir bei jedem Projekt befolgen
PREISGEKRÖNTE BEISPIELE
Websites, die Maßstäbe setzen
Linear.app
Feature-Karten auf dunklem Hintergrund mit subtilen Gradienten-Rändern. Minimalistisch, informationsdicht und technisch präzise. Jede Karte kommuniziert ein Feature.
Stripe Dashboard
Bento-Grid-Layout mit Karten unterschiedlicher Größen. Glassmorphe Effekte und subtile Animationen machen dichte Finanzdaten zugänglich.
Airbnb Search Results
Perfektionierte Produkt-Karten. Bildkarussell pro Karte, Preis-Overlay, Bewertung und Herz-Icon. Zeigt genau genug Informationen, um zu entscheiden, ob man klickt.
Notion Template Gallery
Sauberes Karten-Raster mit konsistenten Höhen, klaren Kategorien und Vorschau-Thumbnails. Hover zeigt einen "Template verwenden"-CTA. Skaliert fehlerfrei.
UNSER PROZESS
Wie wir es umsetzen
Content-Audit
Inventarisieren Sie alle Elemente, die als Karten erscheinen werden. Definieren Sie das Datenmodell: welche Felder existieren und deren Inhaltslängen-Beschränkungen.
Raster-System-Design
Definieren Sie Spaltenanzahl pro Breakpoint (4 Desktop, 2 Tablet, 1 Mobil). Setzen Sie Abstände, Padding und border-radius fest.
Karten-Komponenten-Design
Entwerfen Sie die Karte in Figma als wiederverwendbare Komponente mit Varianten: Standard, Hover, Aktiv, Laden, Leer-Zustand.
Animations-Spezifikation
Definieren Sie Hover-Effekte, scroll-ausgelöste Einblendungen und Übergangs-Timing. Halten Sie die gesamte Animationszeit unter 500ms.
Entwicklung
Mit CSS Grid oder Flexbox erstellen. Komponenten-basierte Architektur. GSAP für Scroll-Animationen, CSS für Hover-Effekte.
Testing
Testen Sie mit echten Daten, Edge-Cases, Cross-Browser, Touch-Interaktion auf Mobil und Barrierefreiheits-Audit.
VERWANDTE PATTERNS
Weitere Seiten-Patterns entdecken
Hero-Bereiche
Der Bereich, der Ihre Inhalte vor dem Karten-Raster einführt.
Mehr erfahren →Preistabellen
Ein spezialisiertes Karten-Muster zum Vergleich von Service-Tarifen.
Mehr erfahren →Social Proof
Testimonial-Karten und Logo-Raster, die Vertrauen aufbauen.
Mehr erfahren →Blog & Editorial
Artikel-Karten und Content-Discovery-Layouts.
Mehr erfahren →FAQ
Häufige Fragen
Wann sollte ich Karten vs. eine Liste oder Tabelle verwenden?+
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.
Wie viele Karten sollte ich pro Reihe zeigen?+
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.
Sollten Kartenbilder das gleiche Seitenverhältnis haben?+
Ja, immer. Gemischte Seitenverhältnisse schaffen ungleiche Kartenhöhen, die das Raster brechen. Verwenden Sie object-fit: cover, um Bilder konsistent zu beschneiden.
Wie handhabe ich Karten mit unterschiedlichen Inhaltslängen?+
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.
Bereit, Karten zu entwerfen, die konvertieren?
Wir werden Ihr aktuelles Layout auditieren, Möglichkeiten für kartenbasiertes Design identifizieren und ein System vorschlagen, das skaliert.