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.
• Teamfight Tactics – Synergien durch gleiche Elemente: zwei eigene geben den Effekt des Elements, drei auf dem Tisch den Wertebonus; die Elementleiste zeigt den Stand.
• Yu-Gi-Oh – verdeckt gelegte Monster, Angriffe erst auf Monster, Fusion durch Übereinander- legen (hier: ziehen und halten).
• 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 Eigenschaften als Symbole (Ausrufezeichen = Spott, Doppelpfeil = Flink, Kreuz = Regeneration, gekreuzte Klingen = Doppelschlag; gekaufte weiß, vom Element in dessen Farbe), 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 nach Yu-Gi-Oh: Common matt; Rare silberner Name und Rahmen, stehender Glanzstreifen, Edelstein; Super Rare Holo-Bild (wandernder Regenbogenschimmer über dem Symbol); Ultra Rare goldener Name und Rahmen plus Holo-Bild; Ultimate Rare Relief am Symbol, Holo auf Bild und Rahmen, Funkeln, schillernde Farben. Fusionen tragen die höhere Stufe ihrer Eltern.
• Mehrere Elemente: der Hintergrund trägt das erste Element, ein rundes Medaillon hinter dem Symbol zeigt alle Elemente als Tortenstücke.
• 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 „◆ 2“ (Klick zieht), rechts „Zug beenden“.
• Verschmelzen per Ziehen: eine Hand- oder Brettkarte auf eine passende ziehen, ein goldener Ring füllt sich eine Sekunde lang, dann verschmelzen die beiden. Mit Gamepad über das Y-Menü („Verschmelzen mit …“, dann A auf dem Partner).
• Eigenes Brett mit fünf sichtbaren Plätzen; links daneben die eigene Leiste (Leben, Mana, Einkommen, Zug), rechts „Rückgängig“, nur wenn es gerade möglich ist.
• Elementleiste mit drei Punkten je Element: offene Wesen auf dem Tisch; voll heißt +1/+1. Daneben das Symbol des Sondereffekts, sobald zwei eigene Wesen des Elements liegen.
• Mittlere Maustaste auf eine Handkarte legt sie verdeckt. Kartenmenü per Rechtsklick oder Y auf Hand- und Brettkarten: verdeckt legen, aufdecken, Spott, Flink, Regeneration und Doppelschlag kaufen; per Y zusätzlich verschmelzen.
• 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.
• Handkarten 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.
• 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; Regeneration am Zugende ebenso.
• Karten heben sich beim Zeigen an, Knöpfe federn beim Drücken, Bildschirme blenden ein.
• Booster: Karten drehen sich auf, Stufen ab Rare 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/