cards/design.md

# Design von Dinger

Stand: September 2026. Kein Enddesign, sondern die Richtung mit umgesetztem Entwurf.

## Woran wir uns orientieren

- **Hearthstone** – Kosten und Werte springen aus dem Kartenrahmen (Kristall oben links, Angriff
  und Leben in Kreisen unten), der Name liegt auf einem Band über die volle Breite, Text bleibt
  kurz. Auf dem Brett: eigene Seite unten, Gegner oben, Verlauf links, Zug beenden rechts, Wesen
  als kompakte Kacheln statt voller Karten. Zugbeginn und Kartenzüge werden angesagt.
- **Hearthstones Entdecken** – drei Karten sehen, eine nehmen: Zufall mit Entscheidung. Jede
  Wahl zeigt an, was zum eigenen Brett passt (Elementbonus als „+1/+1“ oder „−1/−1“).
- **Yu-Gi-Oh** – verdeckt gelegte Monster, Angriffe erst auf Monster, Kampfschaden schlägt
  durch, Fusion.
- **Pokémon TCG** – Seltenheit ist Optik: Folienglanz, Funkeln, Schillern. Werte und Symbole
  statt Sätze.
- **Allgemeine Regeln für Kartenspiel-Oberflächen** (GDKeys, Medium): klar getrennte Zonen,
  Lesefluss von links (Vergangenheit) über die Mitte (Spiel) nach rechts (Zukunft), die eigene
  Seite größer als die der Gegner, Zahlen groß, Text klein, Symbole statt Wörter, und Rückmeldung
  für jede Aktion (Bewegung, Ton, kurzes Zittern).

## Karte

- Kostenkristall oben links, Bild (Elementsymbol) oben, Namensband auf 36 % Höhe, darunter
  gekaufte Eigenschaften als Symbole (Schild, gekreuzte Klingen = Doppelschlag), unten Angriff (gelb) und Leben (rot) als Kreise, dazwischen der Edelstein der
  Stufe. Karten haben keinen Text: nur Element, Angriff, Leben.
- Große Karten (Vorschau, Sammlung, Booster) schreiben das Wort neben das Symbol.
- Die Hand sind bis zu fünf große Karten; Details kommen aus der schwebenden Vorschau.
- Seltenheit: gewöhnlich schlicht; selten Rahmen, Schein, Edelstein, stehender Lichtstreifen;
  episch wandernder Lichtstreifen; legendär Funkeln; mythisch schillernde Farben.
- Verdeckte fremde Wesen sind ein Kartenrücken mit „?“; eigene verdeckte zeigen die Karte mit
  dem Vermerk „verdeckt“.

## Kampfbildschirm (1280×800)

Nur, was gerade zählt, ist zu sehen. Von unten nach oben:

- **Hand** als bis zu fünf große Karten, links der Zieh-Stapel mit „◆ 1“ (Klick zieht), rechts
  „Zug beenden“.
- **Wahl** als Überlagerung: zu Beginn „Wähle 3 von 5“, nach dem Ziehen „Wähle 1 von 3“; solange
  sie offen ist, geht nichts anderes.
- **Eigenes Brett** mit fünf sichtbaren Plätzen, färbt sich mit dem aktiven Feld; links daneben
  die eigene Leiste (Leben, Mana, Einkommen, Zug), rechts „Verschmelzen“ und „Rückgängig“, nur
  wenn sie gerade möglich sind.
- **Elementzähler** mit vier Punkten je Element: offene Wesen auf dem Tisch; voll heißt +1/+1,
  das geschlagene Element bekommt −1/−1.
- **Kartenmenü** per Rechtsklick oder Y auf Hand- und Brettkarten: verdeckt legen, aufdecken,
  Schild und Doppelschlag kaufen.
- **Gegner** oben in der Mitte mit seinem Brett in voller Größe. Das Spiel ist ein Duell wie
  Hearthstone: mehr als zwei Bretter passen nicht lesbar auf einen Bildschirm, und ein Gegner
  macht Ziele, Texte und Balance eindeutig.
- **Vorschau** schwebt neben der Karte, auf die man zeigt (über Ladenkarten), mit Resonanz, Feld
  und Feldkombo darunter.
- **Verlauf** und **Aufgeben** als kleine Knöpfe oben links; der Verlauf öffnet als Überlagerung.
- Hand- und Wahlkarten tragen den Elementbonus, den sie offen gelegt bekämen; beim Angreifen
  steht der Elementkonter (+1/−1) am Ziel, bei Verdeckten nicht.

## Bewegung und Ton

- Zugbeginn: Band „Dein Zug“ quer über die Mitte, Ton.
- Ziehen: die Wahl wird ausgeteilt; die genommene Karte fliegt auf die Hand.
- Ausspielen: die Kachel fliegt von der Hand auf ihren Platz und federt ein.
- Angriff: Ausfallschritt, roter Rahmen am Ziel, kurzes Zittern des Bretts, Schadenszahl.
- Aufdecken: „Aufgedeckt!“ am Wesen; Verbessern: die Eigenschaft steigt grün auf.
- Karten heben sich beim Zeigen an, Knöpfe federn beim Drücken, Bildschirme blenden ein.
- Booster: Karten drehen sich auf, seltene Stufen blitzen in ihrer Farbe auf.
- Alles hängt an der Einstellung „Animationen“.

## Menüs

- Hauptmenü: Titel und drei Spielarten links, darunter Booster, Sammlung, Einstellungen,
  Beenden; rechts drei Karten der Sammlung (höchste Stufen zuerst) als Schaufenster; Münzen und
  Staub oben rechts.
- Unterbildschirme: Titel links oben, „Zurück“ rechts oben, Inhalt darunter.
- Kampagne als Pfad mit zehn Stationen je Kapitel, die nächste pulsiert; darunter die gewählte
  Stufe mit Gegner, Leben, Belohnung und Merkmalen. Die Bosse werden über Leben und Merkmale
  stärker, nicht über Begleiter.
- Sammlung: sechs Spalten, aufgewertete Karten zuerst, rechts die große Vorschau.

## Offen

- Bilder statt Elementsymbolen, wenn es einmal Kartenkunst gibt.
- Hero-Porträts für Kampagnenbosse.
- Ein Tisch mit mehreren Spielern ließe sich als TFT-Rotation obendrauf setzen: jede Runde ein
  anderer Gegner, das Brett bleibt.

## Quellen

- https://hearthstone.wiki.gg/wiki/Battlefield
- https://hearthstone.fandom.com/wiki/Card
- https://moirao.me/home/tft-ui
- https://gdkeys.com/the-card-games-ui-design-of-fairtravel-battle/
- https://medium.com/@acbassettone/5-ux-ui-lessons-from-designing-a-card-game
- https://hackread.com/the-juice-factor-designing-game-feel/