Karten

Im Karten-Tab gestaltest du das Aussehen der einzelnen Artikel-Karten: Von der Größe über Schatten und Rahmen bis hin zu Badges und Animationen.

Karten-Design

Wähle einen Stil, der zu deiner App passt.

Kompakt

Was es macht: Kleine Karten mit kompakter Darstellung.

So findest du es: Karten > Karten-Design > Kompakt

Eigenschaft	Wert
Größe	Klein
Bilder	Kompakt oder versteckt
Text	Kurz, abgeschnitten
Beste für	Lange Listen, Schnellauswahl

---

Standard

Was es macht: Ausgewogenes Design für alle Geräte.

So findest du es: Karten > Karten-Design > Standard

Eigenschaft	Wert
Größe	Mittel
Bilder	Mittelgross
Text	Vollständig
Beste für	Allgemeine Verwendung

---

Gross

Was es macht: Grosse Karten mit prominenten Bildern.

So findest du es: Karten > Karten-Design > Gross

Eigenschaft	Wert
Größe	Gross
Bilder	Sehr gross, dominant
Text	Vollständig mit Details
Beste für	Premium-Präsentationen, Food-Apps

---

Horizontal

Was es macht: Bild links, Text rechts angeordnet.

So findest du es: Karten > Karten-Design > Horizontal

Eigenschaft	Wert
Größe	Volle Breite
Bilder	Links, quadratisch
Text	Rechts daneben
Beste für	Listenähnliche Darstellung mit Bildern

---

Minimal

Was es macht: Nur Text und Preis, keine Bilder.

So findest du es: Karten > Karten-Design > Minimal

Eigenschaft	Wert
Größe	Kompakt
Bilder	Keine
Text	Nur Name und Preis
Beste für	Klassische Speisekarten, Preislisten

---

Karten-Effekte

Visuelle Effekte für die Karten.

Schatten

Was es macht: Fügt einen Schatten unter die Karte hinzu.

So findest du es: Karten > Karten-Effekte > Schatten

Optionen:

Einstellung	Wirkung
An	Karten haben einen Schatten
Aus	Kein Schatten

---

Schatten-Unschärfe

Nur sichtbar wenn Schatten aktiviert ist.

Was es macht: Bestimmt, wie weich der Schatten ist.

So findest du es: Karten > Karten-Effekte > Schatten-Unschärfe

Wertebereich: 2 - 20 Pixel

Wert	Wirkung
2-4	Scharfer, definierter Schatten
6-10	Weicher Schatten (Standard)
12-20	Sehr weicher, diffuser Schatten

---

Schatten-Stärke

Nur sichtbar wenn Schatten aktiviert ist.

Was es macht: Bestimmt die Deckkraft des Schattens.

So findest du es: Karten > Karten-Effekte > Schatten-Stärke

Wertebereich: 2% - 30%

Wert	Wirkung
2-5%	Subtiler, kaum sichtbarer Schatten
6-10%	Dezenter Schatten (Standard)
15-30%	Deutlich sichtbarer Schatten

---

Rahmen

Was es macht: Fügt einen Rahmen um die Karte hinzu.

So findest du es: Karten > Karten-Effekte > Rahmen

Optionen:

Einstellung	Wirkung
An	Karten haben einen Rahmen
Aus	Kein Rahmen

---

Rahmenbreite

Nur sichtbar wenn Rahmen aktiviert ist.

Was es macht: Bestimmt die Dicke des Rahmens.

So findest du es: Karten > Karten-Effekte > Rahmenbreite

Wertebereich: 0.5 - 3 Pixel

---

Hover-Effekt

Was es macht: Die Karte vergrößert sich leicht beim Antippen.

So findest du es: Karten > Karten-Effekte > Hover-Effekt

Optionen:

Einstellung	Wirkung
An	Leichte Vergrößerung beim Antippen
Aus	Kein Effekt

Design-Tipp

Der Hover-Effekt gibt haptisches Feedback und macht die App interaktiver.

---

Bild-Einstellungen

Seitenverhältnis

Was es macht: Das Verhältnis von Breite zu Höhe der Bilder.

So findest du es: Karten > Bild-Einstellungen > Seitenverhältnis

Wertebereich: 0.5 - 2.0

Wert	Beschreibung	Beispiel
0.5-0.6	Portrait	Hochformatige Bilder
0.75-0.8	3:4	Leicht hochformatig
0.9-1.1	1:1	Quadratisch
1.2-1.4	4:3	Leicht querformatig
1.5-2.0	Landscape	Querformatige Bilder

Empfehlung

• Quadratisch (1:1) - Am vielseitigsten, passt zu den meisten Bildern
• 4:3 - Gut für Food-Fotografie

---

Badges

Badges sind kleine Labels auf den Karten (z.B. “Neu”, “Vegan”, “Beliebt”).

Badge-Position

Was es macht: Wo auf der Karte die Badges erscheinen.

So findest du es: Karten > Badges > Badge-Position

Optionen:

Position	Beschreibung
Oben Links	Links oben auf dem Bild
Oben Rechts	Rechts oben auf dem Bild
Unten Links	Links unten auf dem Bild
Unten Rechts	Rechts unten auf dem Bild
Overlay	Zentriert über dem Bild

---

Badge-Stil

Was es macht: Das visuelle Erscheinungsbild der Badges.

So findest du es: Karten > Badges > Badge-Stil

Optionen:

Stil	Beschreibung
Pill	Abgerundete, pillenförmige Badges
Chip	Kompakte Chip-Form
Nur Icon	Nur das Icon, kein Text
Modern	Modernes Design mit Akzentfarbe
Minimal	Dezentes, minimalistisches Design

---

Badge-Größe

Was es macht: Die Größe der Badges.

So findest du es: Karten > Badges > Badge-Größe

Optionen:

Größe	Beschreibung
Klein	Kompakt, dezent
Mittel	Standard-Größe
Gross	Auffällig, gut lesbar

---

Max. Badges

Was es macht: Maximale Anzahl Badges pro Artikel.

So findest du es: Karten > Badges > Max. Badges

Wertebereich: 1 - 5 Badges

Empfehlung

Beschränke die Anzahl auf 2-3 Badges. Zu viele Badges überladen die Karte.

---

Animationen

Animationen machen die App lebendiger.

Scroll-Animationen

Was es macht: Elemente werden beim Scrollen sanft eingeblendet.

So findest du es: Karten > Animationen > Scroll-Animationen

Optionen:

Einstellung	Wirkung
An	Elemente erscheinen mit Fade-In
Aus	Elemente sind sofort sichtbar

---

Auswahl-Animationen

Was es macht: Animiert die Kategorie-Auswahl.

So findest du es: Karten > Animationen > Auswahl-Animationen

Optionen:

Einstellung	Wirkung
An	Sanfte Animation beim Wechseln
Aus	Sofortiger Wechsel

---

Stagger-Animation

Was es macht: Elemente erscheinen nacheinander statt alle gleichzeitig.

So findest du es: Karten > Animationen > Stagger-Animation

Optionen:

Einstellung	Wirkung
An	Elemente erscheinen mit Verzögerung
Aus	Alle Elemente erscheinen gleichzeitig

---

Stagger-Verzögerung

Nur sichtbar wenn Stagger-Animation aktiviert ist.

Was es macht: Zeit zwischen dem Erscheinen einzelner Elemente.

So findest du es: Karten > Animationen > Stagger-Verzögerung

Wertebereich: 20 - 150 Millisekunden

---

Animations-Intensität

Was es macht: Wie stark die Animationen ausfallen.

So findest du es: Karten > Animationen > Animations-Intensität

Optionen:

Intensität	Beschreibung
Keine	Keine Animationen
Dezent	Subtile, kaum merkliche Animationen
Normal	Ausgewogene Animationen (Standard)
Dynamisch	Auffällige, lebhafte Animationen

---

Animations-Dauer

Was es macht: Wie lange die Animationen dauern.

So findest du es: Karten > Animationen > Animations-Dauer

Wertebereich: 100 - 500 Millisekunden

Wert	Wirkung
100-150ms	Sehr schnell, knackig
200-250ms	Schnell (Standard)
300-400ms	Mittel, entspannt
450-500ms	Langsam, sanft

---

Alle Einstellungen auf einen Blick

Einstellung	Bereich	Standard
Karten-Design	Karten-Design	Standard
Schatten	Karten-Effekte	An
Schatten-Unschärfe	Karten-Effekte	8px
Schatten-Stärke	Karten-Effekte	8%
Rahmen	Karten-Effekte	Aus
Rahmenbreite	Karten-Effekte	1px
Hover-Effekt	Karten-Effekte	An
Seitenverhältnis	Bild-Einstellungen	1:1
Badge-Position	Badges	Oben Links
Badge-Stil	Badges	Pill
Badge-Größe	Badges	Klein
Max. Badges	Badges	3
Scroll-Animationen	Animationen	An
Auswahl-Animationen	Animationen	An
Stagger-Animation	Animationen	Aus
Animations-Intensität	Animationen	Normal
Animations-Dauer	Animationen	200ms

---

Tipps

Schatten vs. Rahmen

Verwende entweder Schatten oder Rahmen, selten beides. Schatten wirken moderner, Rahmen klassischer.

Performance

Zu viele Animationen können auf älteren Geräten die Performance beeinträchtigen. Im Zweifel: Weniger ist mehr.

Badge-Farben

Die Badge-Farben werden durch das globale Theme und die Badge-Typen bestimmt. “Vegan” ist grün, “Scharf” ist rot etc.

Konsistenz

Wähle ein Karten-Design und bleibe dabei. Mische nicht verschiedene Stile auf einer Seite.