Auf vielen Websites und Apps sehen Nutzer zuerst ein Raster aus Kacheln: News-Teaser, Produkttiles, Feature-Boxen. Dahinter steckt ein Card-Layout – also ein wiederkehrendes Kachelmuster, das Inhalte bündelt und schnell erfassbar macht. Gut gestaltete Cards helfen, Informationen zu strukturieren, Prioritäten klar zu zeigen und Interfaces flexibel zu halten.
Dieser Leitfaden erklärt, wie Card-Layouts systematisch geplant, gestaltet und in Design-Tools wie Figma oder Sketch aufgebaut werden können – damit Oberflächen modular bleiben und sich einfach erweitern lassen.
Card-Layouts im UI-Design: Grundlagen und Einsatzbereiche
Card-Layouts gruppieren zusammengehörige Inhalte in klar abgegrenzte Flächen. Typisch sind ein Rahmen oder Schatten, etwas Abstand nach innen und eine wiederkehrende Struktur aus Bild, Text und Call-to-Action.
Was Cards im Interface leisten
Cards sind vor allem dann hilfreich, wenn viele ähnlich strukturierte Informationen gezeigt werden müssen. Beispiele:
- News-Übersichten mit Teasern und Bildern
- Produktlisten im Shop mit Preis, Bild, Button
- Feature-Übersichten auf Landingpages
- Teamseiten mit Fotos und Rollen
Vorteile:
- Wiedererkennbare Struktur: Nutzer verstehen schneller, was sie erwartet.
- Modularität: Cards lassen sich leicht duplizieren, sortieren, filtern.
- Flexibilität: Layouts reagieren gut auf unterschiedliche Bildschirmgrößen.
Card-Layouts funktionieren besonders gut in Kombination mit Layout-Rastern. Wie Raster systematisch helfen, erklärt der Beitrag UI-Design mit Layout-Rastern sehr praxisnah.
Typische Card-Bausteine und Inhalte
Die meisten Cards folgen einem klaren Muster aus Bausteinen:
- Medienbereich: Bild, Icon, Video-Preview oder Platzhalter
- Titel: kurze, klare Überschrift mit hohem Informationsgehalt
- Beschreibung: ein bis drei Zeilen Fließtext
- Meta-Infos: Kategorie, Preis, Datum, Label
- Interaktion: Button, Link, Icon-Button, Checkbox
Wichtig ist, früh zu klären, welche Informationen in allen Cards gleich aufgebaut sein müssen, damit das Raster ruhig und lesbar bleibt.
Card-Layout planen: Content, Raster und Prioritäten
Bevor der erste graue Kasten im Layout landet, sollte klar sein, welche Aufgabe jede Card im Interface hat und welche Inhalte Top-Priorität besitzen.
Content zuerst: Welche Informationen müssen in die Card?
Eine einfache Content-Checkliste hilft, Cards schlank zu halten:
- Welches Hauptziel hat die Card? (z. B. Produktklick, Artikelaufruf)
- Welche Information braucht der Nutzer dafür unbedingt?
- Was ist „nice to have“ und kann entfallen, wenn der Platz knapp ist?
- Welche Infos müssen in jeder Card identisch strukturiert sein?
So wird verhindert, dass Cards mit Sekundärinfos überladen werden. Inhalte sollten sich auf das konzentrieren, was Nutzer zur Entscheidung oder zum Klick brauchen.
Raster und Spalten: Wie Cards ins Gesamt-Layout passen
Card-Layouts funktionieren am besten in einem konsistenten Raster. Dabei helfen:
- Durchgehendes Spaltensystem für Desktop und Mobile
- Definierte Abstände zwischen den Cards
- Klare Regeln, ab welcher Breite sich die Anzahl der Spalten ändert
Wer bereits mit Spaltenrastern arbeitet, kann diese direkt für Card-Layouts nutzen. Ein sauber geplanter Grid macht es deutlich leichter, die Responsivität der Cards zu testen und Konsistenz über Seiten hinweg zu halten.
Visuelle Hierarchie: Wichtiges in der Card nach vorn holen
In einer Card konkurrieren mehrere Elemente gleichzeitig um Aufmerksamkeit. Deswegen braucht es eine klare visuelle Hierarchie:
- Titel gut lesbar, mit ausreichend Kontrast und größerer Schrift
- Medienfläche (Bild, Icon) nur so dominant wie nötig
- Buttons gut unterscheidbar von anderen Elementen
- Meta-Infos wie Kategorie oder Datum dezenter setzen
Der Blickweg sollte eindeutig sein: zuerst Titel oder Bild, danach Kurztext, dann Interaktion. Tools wie unterschiedliche Schriftgrößen und -stärken oder dezente Farbakzente helfen, diese Reihenfolge zu steuern. Eine strukturierte Schriftplanung unterstützt das – ausführlich beschrieben in Designsystem-Typografie im Web.
Card-Design gestalten: Typografie, Abstände und Farbe
Ist der Aufbau geklärt, geht es an die visuelle Ausgestaltung. Hier entscheidet sich, ob Cards ruhig, überladen oder gut führend wirken.
Typografie in Cards: Lesbarkeit und Scannbarkeit
Weil Cards oft in Listen oder Rastern stehen, müssen Texte schnell erfassbar sein. Bewährt haben sich:
- Titel mit 1–2 Zeilen, klarer Aussage und mittlerer Schriftgröße
- Kurze Beschreibungen mit maximal 2–3 Zeilen
- Gleichbleibende Schriftgrößen für gleiche Rollen (z. B. alle Card-Titel gleich)
Eine zu große Schrift macht das Raster unruhig; zu kleine Texte erschweren das Scannen. Besonders wichtig ist ausreichender Zeilenabstand, damit die Card nicht wie ein Textblock wirkt.
Abstände und White Space: Ruhe in der Card erzeugen
Abstände sind das unsichtbare Gerüst jeder Card. Hilfreich sind:
- Innenabstand (Padding) rundherum einheitlich oder aus einem Spacing-System
- Mehr Abstand zwischen Gruppen (z. B. Bild zu Text) als zwischen Zeilen
- Bewusst leere Flächen, damit die Card atmen kann
Ein klar definiertes Spacing-System macht Card-Designs skalierbar. Dazu passen die Gedanken aus Designsystem-Abstände im UI, die sich gut auf einzelne Cards übertragen lassen.
Farbkonzept und Kontrast für Card-Layouts
Farben entscheiden, wie stark Cards sich vom Hintergrund und voneinander abheben. Typische Muster:
- Helle Cards auf hellem Hintergrund mit feinem Rahmen
- Dunklere Cards vor hellem Background, um Fokusbereiche zu betonen
- Karten mit farbigem Akzentstreifen für Kategorien oder Status
Für gute Lesbarkeit braucht Text immer ausreichenden Kontrast zum Hintergrund der Card. Besonders auf mobilen Geräten oder im Dark Mode fällt schlechter Kontrast schnell negativ auf. Praktische Hinweise dazu bietet der Beitrag UI-Design mit Farbkontrasten optimieren.
Responsives Card-Layout: Verhalten auf verschiedenen Geräten
Ein Card-Layout zeigt seine Stärken erst, wenn es auf unterschiedlichen Bildschirmgrößen getestet wird. Cards sollten sich sinnvoll umbauen, ohne dass Inhalte verloren gehen oder Layouts brechen.
Spalten, Brüche und Stacking-Verhalten planen
Typische Muster für die Anzahl der Spalten:
- Desktop: drei bis vier Spalten
- Tablet: zwei bis drei Spalten
- Smartphone: eine Spalte (Cards untereinander)
Wichtiger als die exakte Zahl ist eine nachvollziehbare Regel: Ab welcher Breite fällt eine Spalte weg? Ab wann werden Elemente in der Card umsortiert oder in eine Zeile gepackt?
Responsives Verhalten ist deutlich leichter zu entwerfen, wenn Cards von Anfang an mit flexiblen Komponenten oder Auto-Layout-Funktionen geplant werden, wie sie etwa Figma bietet. Details dazu zeigt Figma Auto Layout meistern.
Inhalte kürzen oder umbrechen? Entscheidungen für Mobile
Auf kleineren Screens passt oft nicht die gleiche Menge Inhalt in eine Card wie auf dem Desktop. Mögliche Strategien:
- Meta-Infos auf Mobile ausblenden oder in ein Dropdown packen
- Langtexte kürzen und erst auf der Detailseite voll anzeigen
- Buttons in Textlinks umwandeln, wenn Platz sehr knapp ist
Wichtig ist, dass das Hauptziel der Card – meist ein Klick auf Titel oder Button – auf allen Geräten erhalten bleibt und leicht erreichbar ist.
Interaktion und Hover-Effekte bei Cards
Cards wirken schnell klickbar, selbst wenn keine Interaktion vorgesehen ist. Deswegen sollte klar definiert werden:
- Ist die ganze Card klickbar oder nur bestimmte Elemente?
- Wie zeigen Hover-States und aktive Zustände die Interaktion an?
- Welche Alternativen gibt es zu Hover auf Touch-Geräten?
Feine Mikrointeraktionen wie skalierende Schatten, dezente Bewegungen oder Hintergrundwechsel können helfen, Klickziele klar zu machen, ohne abzulenken. Mehr zu dieser Art von Details findet sich in UI-Microinteractions gestalten.
Komponenten für Card-Layouts in Design-Tools anlegen
Damit Card-Layouts in Projekten wiederverwendbar bleiben, sollten sie konsequent als Komponenten angelegt werden – mit klar definierten Varianten und Platzhaltern.
Basis-Card als Component definieren
Der erste Schritt ist eine neutrale Card, die alle wichtigen Bausteine enthält:
- Layoutstruktur mit Bild, Titel, Text, Meta-Infos, Button
- Farben und Typografie aus dem Designsystem
- Standardabstände, die als Referenz dienen
Diese „Base Card“ wird zur Vorlage für alle weiteren Card-Varianten. Änderungen an Abständen oder Typografie lassen sich so systemweit durchziehen, ohne jede einzelne Card anzufassen.
Varianten für unterschiedliche Inhalte planen
In der Praxis treten schnell unterschiedliche Card-Typen auf, zum Beispiel:
- Produkt-Card mit Preis und Badge
- Artikel-Card mit Kategorie, Datum und Lesezeit
- Feature-Card ohne Bild, dafür mit Icon
Statt jedes Mal ein neues Design zu bauen, lohnt sich ein kleiner Variantenplan. Dieser definiert klar, welche Card-Version wann eingesetzt wird und welche Elemente variabel sind (z. B. Bild ja/nein, Button ja/nein).
So geht’s: Schritt-für-Schritt zu einem Card-Komponentenset
- Hauptaufgaben der Cards im Projekt auflisten (z. B. Produkte, Artikel, Features).
- Für jeden Typ die Pflicht- und Kann-Infos definieren.
- Eine neutrale Basis-Card mit allen Pflichtinfos aufbauen.
- Varianten für Sonderfälle anlegen (z. B. ohne Bild, mit Badge).
- Komponenten im Designsystem dokumentieren, damit das Team sie einheitlich verwendet.
Checkliste für gute Card-Layouts im UI-Design
Als kompakte Kontrolle hilft eine kurze Checkliste – ideal vor dem Design-Handoff oder einem Review im Team.
Kompakte Checkliste für Card-Designs
- Ist das Ziel jeder Card klar definiert (Klick, Info, Auswahl)?
- Sind Inhaltselemente über alle Cards konsistent angeordnet?
- Stimmen Typografie-Größen und -Stile mit dem übergeordneten System überein?
- Sind Abstände innerhalb der Card und zwischen den Cards einheitlich?
- Ist der Kontrast von Texten und Buttons ausreichend?
- Funktioniert das Card-Raster auf Desktop, Tablet und Smartphone?
- Sind Interaktionen und Klickflächen eindeutig und gut erkennbar?
Wer diese Punkte systematisch durchgeht, schafft ein ruhiges, verständliches und erweiterbares Card-Layout, das Inhalte klar strukturiert und Nutzer sicher durch das Interface führt.
