Karten

Im Karten-Tab gestaltest du das Aussehen der einzelnen Artikel-Karten: Von der Groesse ueber Schatten und Rahmen bis hin zu Badges und Animationen.

Karten-Design

Waehle 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
Groesse	Klein
Bilder	Kompakt oder versteckt
Text	Kurz, abgeschnitten
Beste fuer	Lange Listen, Schnellauswahl

---

Standard

Was es macht: Ausgewogenes Design fuer alle Geraete.

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

Eigenschaft	Wert
Groesse	Mittel
Bilder	Mittelgross
Text	Vollstaendig
Beste fuer	Allgemeine Verwendung

---

Gross

Was es macht: Grosse Karten mit prominenten Bildern.

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

Eigenschaft	Wert
Groesse	Gross
Bilder	Sehr gross, dominant
Text	Vollstaendig mit Details
Beste fuer	Premium-Praesentationen, Food-Apps

---

Horizontal

Was es macht: Bild links, Text rechts angeordnet.

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

Eigenschaft	Wert
Groesse	Volle Breite
Bilder	Links, quadratisch
Text	Rechts daneben
Beste fuer	Listenaehnliche Darstellung mit Bildern

---

Minimal

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

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

Eigenschaft	Wert
Groesse	Kompakt
Bilder	Keine
Text	Nur Name und Preis
Beste fuer	Klassische Speisekarten, Preislisten

---

Karten-Effekte

Visuelle Effekte fuer die Karten.

Schatten

Was es macht: Fuegt 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-Unschaerfe

Nur sichtbar wenn Schatten aktiviert ist.

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

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

Wertebereich: 2 - 20 Pixel

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

---

Schatten-Staerke

Nur sichtbar wenn Schatten aktiviert ist.

Was es macht: Bestimmt die Deckkraft des Schattens.

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

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: Fuegt 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 vergroessert sich leicht beim Antippen.

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

Optionen:

Einstellung	Wirkung
An	Leichte Vergroesserung beim Antippen
Aus	Kein Effekt

Design-Tipp

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

---

Bild-Einstellungen

Seitenverhaeltnis

Was es macht: Das Verhaeltnis von Breite zu Hoehe der Bilder.

So findest du es: Karten > Bild-Einstellungen > Seitenverhaeltnis

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 fuer 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 ueber 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, pillenfoermige Badges
Chip	Kompakte Chip-Form
Nur Icon	Nur das Icon, kein Text
Modern	Modernes Design mit Akzentfarbe
Minimal	Dezentes, minimalistisches Design

---

Badge-Groesse

Was es macht: Die Groesse der Badges.

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

Optionen:

Groesse	Beschreibung
Klein	Kompakt, dezent
Mittel	Standard-Groesse
Gross	Auffaellig, 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

Beschraenke die Anzahl auf 2-3 Badges. Zu viele Badges ueberladen 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 Verzoegerung
Aus	Alle Elemente erscheinen gleichzeitig

---

Stagger-Verzoegerung

Nur sichtbar wenn Stagger-Animation aktiviert ist.

Was es macht: Zeit zwischen dem Erscheinen einzelner Elemente.

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

Wertebereich: 20 - 150 Millisekunden

---

Animations-Intensitaet

Was es macht: Wie stark die Animationen ausfallen.

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

Optionen:

Intensitaet	Beschreibung
Keine	Keine Animationen
Dezent	Subtile, kaum merkliche Animationen
Normal	Ausgewogene Animationen (Standard)
Dynamisch	Auffaellige, 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-Unschaerfe	Karten-Effekte	8px
Schatten-Staerke	Karten-Effekte	8%
Rahmen	Karten-Effekte	Aus
Rahmenbreite	Karten-Effekte	1px
Hover-Effekt	Karten-Effekte	An
Seitenverhaeltnis	Bild-Einstellungen	1:1
Badge-Position	Badges	Oben Links
Badge-Stil	Badges	Pill
Badge-Groesse	Badges	Klein
Max. Badges	Badges	3
Scroll-Animationen	Animationen	An
Auswahl-Animationen	Animationen	An
Stagger-Animation	Animationen	Aus
Animations-Intensitaet	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 koennen auf aelteren Geraeten die Performance beeintraechtigen. Im Zweifel: Weniger ist mehr.

Badge-Farben

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

Konsistenz

Waehle ein Karten-Design und bleibe dabei. Mische nicht verschiedene Stile auf einer Seite.