# Ashen Realms – UI & Visual Design Specification V1 ## Zweck dieser Dokumentation Dieses Dokument definiert die visuelle Sprache und die UI-Grundsätze von **Ashen Realms** für den ersten Vertical Slice. Es dient als verbindliche Arbeitsgrundlage für: - Frontend-Entwicklung - UI-Komponenten - neue Screens - Design-Iterationen - KI-gestützte Implementierung - spätere Erweiterungen des Spiels Die vorhandenen Referenzscreenshots sind visuelle Zielrichtung und sollen gemeinsam mit dieser Spezifikation verwendet werden. Diese Spezifikation beschreibt **nicht pixelgenaue Maße**, sondern die grundlegenden Regeln, nach denen neue Screens gestaltet werden sollen. --- # 1. Visuelle Leitidee Ashen Realms soll wirken wie ein modernes Fantasy-Browser-RPG, das klassische Browser-MMORPG-Strukturen in eine hochwertige, zeitgemäße Präsentation überführt. Die Oberfläche soll folgende Eigenschaften kombinieren: - hochwertige Dark-Fantasy-Atmosphäre - große, dominante Fantasy-Artworks - klare Browser-RPG-Informationsstruktur - moderne Lesbarkeit - hochwertige Icons - zurückhaltende Animationen - dunkle, metallische und steinerne UI-Materialien - wenige, gezielt eingesetzte Akzentfarben - starke visuelle Hierarchie - klar erkennbare Interaktionsflächen Die Oberfläche darf bewusst an klassische Fantasy-Browser-MMORPGs erinnern, soll aber **nicht alt, überladen oder retro** wirken. Grundsatz: > **Klassische Browser-RPG-Struktur, moderne Premium-Präsentation.** --- # 2. Referenzscreens Für V1 existieren drei zentrale Referenzscreens: 1. **Welt-/Reiseansicht** 2. **Jagd-/Begegnungsauswahl** 3. **Kampfbildschirm** Diese Screens bilden gemeinsam die visuelle Grundlage. Sie sind: - keine pixelgenauen Vorlagen - keine unveränderbaren Layouts - keine technische Vorgabe für exakte Maße Sie definieren jedoch verbindlich: - Materialität - UI-Dichte - Farbstimmung - Informationshierarchie - Rahmenstil - Icon-Stil - Panel-Struktur - Verhältnis zwischen Artwork und UI - allgemeines Gefühl des Produkts Neue Screens müssen wie Teil **derselben Anwendung** wirken. --- # 3. Grundlayout Die Desktop-Oberfläche folgt grundsätzlich einer festen Struktur: ## Oben **Globale Topbar** Enthält: - Charakterinfo - Level - HP - globale Währungen - globale Systemaktionen ## Links **Primäre Navigation** Enthält zentrale Spielbereiche: - Karte - Jagd - Quests - Inventar - Charakter - Shop ## Mitte **Hauptinhalt** Hier befindet sich je nach Screen: - Gebiet - Karte - Jagd - Kampf - Inventar - Questinhalt - Händler - Charakteransicht ## Rechts **Kontextuelle Informationsspalte** Enthält zum aktuellen Screen passende Zusatzinformationen. ## Unten **Footer / Statusbereich** Enthält: - Systemnachrichten - Welt-/Serverstatus - Online-Anzeige - optional Chat - Uhrzeit / Status Diese Struktur soll über die meisten Hauptscreens hinweg stabil bleiben. --- # 4. Globale Topbar Die Topbar ist dauerhaft sichtbar, außer ein späterer Spezialscreen benötigt bewusst einen Fokusmodus. ## Linker Bereich Zeigt: - Charakterportrait - Charaktername - Level - Lebensbalken - optional kleines Klassen-/Fraktionssymbol Beispiel: **Aric Duskwalker** **Stufe 2** `418 / 520 HP` Der HP-Balken soll klar und sofort lesbar sein. --- ## Mittlerer Bereich Zeigt globale Ressourcen. Beispiele: - Silber - Premium-/Spezialwährung - Gebietsunabhängige Ressourcen Für den Vertical Slice sollen nur wirklich relevante Ressourcen gezeigt werden. Keine unnötige Icon-Flut. --- ## Rechter Bereich Globale Systemaktionen: - Nachrichten - Freunde / Gruppe - Einstellungen - Logout / Menü Icons müssen konsistent und klar erkennbar sein. --- # 5. Linke Hauptnavigation Die linke Navigation ist eine der konstantesten UI-Komponenten. ## V1-Navigation - Karte - Jagd - Quests - Inventar - Charakter - Shop Jeder Eintrag besitzt: - Icon - Textlabel - aktiven Zustand - Hover-Zustand - optional Benachrichtigungspunkt --- ## Aktiver Zustand Der aktuell aktive Menüpunkt muss deutlich hervorgehoben werden. Mögliche Mittel: - dezenter Hintergrund - Lichtkante - Akzentfarbe - leichtes Icon-Glow - hellere Typografie Der aktive Zustand darf deutlich sein, aber nicht wie ein moderner Neon-SaaS-Tab wirken. --- # 6. Hauptcontent-Fläche Der Hauptcontent ist die wichtigste visuelle Fläche. Grundsatz: > **Artwork zuerst, UI darüber oder darum herum.** Das Spiel soll seine Welt über große Illustrationen verkaufen. Die Hauptfläche darf nicht wie eine Sammlung kleiner Dashboard-Karten wirken. Stattdessen: - große Szenen - große Gegner - große Orte - klar platzierte UI-Overlays - wenige starke Interaktionselemente --- # 7. Rechte Informationsspalte Die rechte Spalte ist kontextabhängig. Sie kann beispielsweise enthalten: - Gebietsname - Gebietsbeschreibung - empfohlene Stufe - mögliche Gegner - mögliche Beute - Gebietswährung - Questinformationen - Kampflog - Itemdetails Die Spalte soll Informationen strukturieren, ohne die Hauptszene zu dominieren. --- # 8. Footer Der Footer ist zurückhaltend. Er kann enthalten: - kurze Systemmeldungen - Chatstatus - aktuelles Gebiet - Welt-/Serverstatus - Online-Anzahl - Uhrzeit Er soll wie Teil eines persistenten Online-RPGs wirken, aber nicht permanent Aufmerksamkeit verlangen. --- # 9. Welt-/Reiseansicht Die Welt-/Reiseansicht verbindet Exploration, Orientierung und Atmosphäre. ## Hauptziele Der Spieler soll sofort erkennen: - wo er ist - welche Orte erreichbar sind - wohin er reisen kann - wie gefährlich die Reise ist - wie lange sie dauert - was grob im Gebiet wartet --- ## Visuelle Struktur Die Hauptfläche zeigt ein großes Gebiet-Artwork. Darauf liegen Orts- oder Reise-Nodes. Beispiele: - Südtor - Verbrannte Straße - Verlassener Wachtposten - Aschengrube Nodes werden durch Pfade oder visuelle Verbindungen miteinander verbunden. --- ## Orts-Nodes Ein Node zeigt mindestens: - Name - optional empfohlenes Level - Zustand - Erreichbarkeit Mögliche Zustände: - aktueller Ort - erreichbar - entdeckt - noch nicht entdeckt - gefährlich - sicher Der aktuelle Ort benötigt eine klare Hervorhebung. --- # 10. Reise-Panel Beim Auswählen eines Zielorts erscheint ein Reise-Panel. Es zeigt: - Ziel - Reisezeit - Gefahrenstufe - Start-Button Beispiel: **Zur Verbrannten Straße reisen** Reisezeit: `00:00:15` Gefahr: **Niedrig** Button: **Reise beginnen** Die Reisezeit muss als Bestandteil der Welt wirken und nicht wie ein künstlicher Cooldown. --- # 11. Gefahrendarstellung Gefahr wird farblich und textlich dargestellt. Empfohlene Stufen: - Schwach - Passend - Stark - Sehr gefährlich - Tödlich Farben sind unterstützend, nicht alleinige Information. Beispiel: - Grün: Passend - Orange: Stark - Rot: Sehr gefährlich / Tödlich Textlabel bleiben immer sichtbar. --- # 12. Jagdansicht Die Jagdansicht ist keine Monsterliste, sondern eine **visuelle Encounter-Auswahl**. Der Spieler startet die Jagd und erhält mehrere mögliche Begegnungen. --- ## Encounter-Karten Jede Begegnung erhält eine große Karte mit: - Gegnername - Gegner-Artwork - Gefahrenstufe - kurze Beschreibung - optional Level - Angreifen-Button Beispiel: **Dämmerwolf** Passend **Giftspinne** Passend **Verdorbener Hirsch** Stark **Schwarzmähnenwolf** Sehr gefährlich --- ## Kartenlayout Die Karten sollen: - groß genug für Monsterartwork sein - nicht wie kleine Trading Cards wirken - klare Unterschiede zwischen Gegnern zeigen - dieselbe Panel-Sprache wie der Rest der UI verwenden Der Gegner ist das visuelle Zentrum der Karte. --- # 13. Jagdaktionen Mindestens: - Angreifen - Neu suchen - Zurück Später optional: - Beobachten - Verfolgen - Elite suchen V1 bleibt bewusst einfach. --- # 14. Gebietsinformationen während der Jagd Die rechte Spalte kann enthalten: - aktueller Ort - Gebiet - empfohlene Stufe - mögliche Belohnungen - Gebietswährung - kurze Beschreibung Diese Informationen dürfen nicht jede Jagdkarte einzeln wiederholen. --- # 15. Kampfbildschirm Der Kampfbildschirm ist einer der wichtigsten Screens des Spiels. Grundprinzip: > **Spieler und Gegner stehen sich visuell gegenüber.** Kein abstrakter Zahlenkampf. --- # 16. Kampfkomposition ## Spieler Links im Hauptbereich. Groß dargestellt. Nicht nur Portrait. Der Charakter muss wie tatsächlich im Kampf anwesend wirken. --- ## Gegner Rechts im Hauptbereich. Mindestens gleich stark visuell gewichtet. Monster sollen groß, bedrohlich und detailliert dargestellt werden. --- ## Hintergrund Der Kampfhintergrund entspricht dem aktuellen Ort. Beispiele: - Dämmerwald - Aschenfelder - Krypta - Ruinenhof Der Hintergrund soll Atmosphäre erzeugen, aber Spieler und Gegner nicht überlagern. --- # 17. Kampfinformationen Gut sichtbar: ## Spieler - Name - HP - Status-Effekte ## Gegner - Name - HP - Status-Effekte ## Allgemein - aktuelle Runde - Telegraphing - Cooldowns --- # 18. Aktionsleiste Die Aktionsleiste befindet sich primär im unteren Bereich. V1: - Angriff - Schwerer Hieb - Schildstoß - Verteidigen - Trank Optional zusätzlich: - Flucht Jede Aktion besitzt: - Icon - Name - Hotkey - aktiven Zustand - Cooldown-Zustand - Disabled-Zustand --- # 19. Ausgewählte Aktion Die aktuell ausgewählte oder ausführende Aktion wird deutlich hervorgehoben. Beispielsweise durch: - goldene Lichtkante - leichte Hintergrundaufhellung - dezentes Glow Keine übertriebene Neonanimation. --- # 20. Tranktasche Die Tranktasche besitzt einen eigenen kleinen Bereich. V1: **2 Slots** Sie zeigt: - Potion-Icon - verbleibende Anzahl - gegebenenfalls Cooldown / deaktivierten Zustand Die Tranktasche soll nicht mit dem normalen Inventar verwechselt werden. --- # 21. Kampflog Das Kampflog befindet sich vorzugsweise rechts. Es zeigt: - Rundennummer - Aktionen - Schaden - Status-Effekte - Unterbrechungen - Heilung Beispiel: **Runde 3** Aric nutzt Schildstoß. Dämmerwolf erleidet 33 Schaden. Dämmerwolf beginnt zu bluten. Wichtige Ereignisse dürfen farblich hervorgehoben werden. Normale Einträge bleiben zurückhaltend. --- # 22. Telegraphing Vorbereitete gefährliche Angriffe müssen sichtbar angekündigt werden. Mögliche Darstellung: - Text direkt beim Gegner - Status-Icon - kleine Warnfläche - Effekt am Gegner - Animation Beispiel: **Der Steingolem holt zu einem schweren Schlag aus.** Die Information muss vor der Spielerentscheidung klar erkennbar sein. --- # 23. Typografie Die Typografie soll Fantasy-Atmosphäre transportieren, ohne Lesbarkeit zu opfern. ## Überschriften Dürfen eine charaktervolle Serifenschrift verwenden. Geeignet für: - Ortsnamen - Gebiete - Bossnamen - große Panels --- ## UI-Text Für: - Beschreibungen - Werte - Buttons - Tooltips - Kampflog muss eine sehr gut lesbare Schrift verwendet werden. --- ## Grundregel Keine übermäßig dekorativen Fantasy-Fonts für lange Texte. Fantasy-Stimmung entsteht durch: - Hierarchie - Material - Rahmen - Artwork nicht durch schwer lesbare Schrift. --- # 24. Farben Die Grundpalette ist dunkel und entsättigt. Haupttöne: - Anthrazit - dunkles Metall - Schwarzbraun - dunkles Blau-Grau - Stein - gedämpftes Gold Akzente werden sparsam verwendet. --- ## Funktionsfarben ### Rot - Leben - Schaden - Gefahr - Blutung ### Grün - sicher - passend - positive Zustände ### Orange / Gold - Warnung - Elite - wertvolle Aktion - Auswahl ### Blau - aktive Navigation - Magie - besondere Ressourcen ### Violett - seltene / spezielle Systeme - Premium-/Sonderwährung Funktionsfarben sollen überall dieselbe Bedeutung behalten. --- # 25. Rahmen und Materialien Panels verwenden eine gemeinsame Materialwelt. Geeignet: - dunkles Metall - gealtertes Eisen - dunkles Holz - Stein - Leder - dezente goldene Zierlinien Nicht geeignet: - weiße moderne Cards - Glassmorphism - starke Neonflächen - SaaS-Dashboard-Look - flache bunte Mobile-Game-Panels --- # 26. Panel-Regeln Panels besitzen: - klaren Rahmen - dunkle Innenfläche - leichte Textur - genügend Innenabstand - eindeutige Überschrift Keine unnötige Verschachtelung von Panels in Panels. Die Hauptszene soll sichtbar bleiben. --- # 27. Buttons Buttons sollen mechanisch und hochwertig wirken. Grundform: - dunkler Hintergrund - metallischer oder steinerner Rahmen - klare Beschriftung - dezente Akzentkante --- ## Zustände ### Normal ruhig ### Hover leicht heller / Akzentkante ### Active sichtbar gedrückt oder stärker hervorgehoben ### Disabled entsättigt, aber weiterhin lesbar ### Primary deutlichste Aktion im aktuellen Kontext --- # 28. Icons Icons sollen stilistisch einheitlich sein. Eigenschaften: - detailliert - Fantasy-tauglich - klare Silhouette - gut lesbar bei kleiner Größe - keine Mischung aus modernen Flat-Icons und Fantasy-Icons Items dürfen stärker illustriert sein als reine UI-Symbole. --- # 29. Item-Icons Item-Icons sind ein wichtiger Teil der Loot-Motivation. Sie sollen: - hochwertig - individuell - klar erkennbar - farblich kontrolliert sein. Ein seltenes Item muss bereits über sein Icon wertvoll wirken. --- # 30. UI-Dichte Ashen Realms darf informationsreicher sein als ein modernes Mobile Game. Es soll jedoch nie chaotisch wirken. Grundsatz: > **Viele Informationen sind erlaubt, wenn ihre Hierarchie klar ist.** Daher: - Hauptaktion groß - Sekundärinformation kleiner - Dekoration hinter Funktion - keine 20 gleich wichtigen Buttons --- # 31. Abstände UI soll kompakt, aber nicht gequetscht wirken. Wichtig: - klare Innenabstände in Panels - Abstand zwischen Gruppen - keine Textblöcke direkt am Rahmen - keine übervollen Tabellen - klare Trennung von Gameplay und Metainformation --- # 32. Animationen Animationen sollen die hochwertige Präsentation unterstützen. Geeignet: - leichte Parallax-Bewegung in Artworks - Rauch - Nebel - Funken - Feuer - leichte UI-Glow-Animationen - Trefferfeedback - Schadenszahlen - kurze Screen-Shakes bei starken Treffern - sanfte Panel-Transitions --- ## Nicht geeignet - permanente starke Animation - blinkende Buttons - übertriebene Partikel - hektische Mobile-Game-Effekte - störende Kameraeffekte --- # 33. Übergänge Screenwechsel sollen weich wirken. Beispiele: - Crossfade - leichter Slide - Artwork-Fade - kurzer Zoom - dunkle Überblendung bei Reise Kampfstart darf dramatischer inszeniert werden. --- # 34. Responsive Design Desktop ist für V1 die primäre Zielplattform. Die UI soll trotzdem grundsätzlich responsiv aufgebaut werden. --- ## Desktop Volles Layout: - Topbar - linke Navigation - Hauptcontent - rechte Sidebar - Footer --- ## Tablet Mögliche Anpassungen: - schmalere Navigation - Sidebar einklappbar - Panels untereinander - weniger gleichzeitig sichtbare Encounter-Karten --- ## Smartphone Für V1 nicht Hauptpriorität. Langfristig: - Navigation als Drawer / Bottom Navigation - rechte Sidebar wird Kontextpanel - Encounter-Karten vertikal - Kampflog einklappbar - Aktionen als horizontale Leiste / Grid Desktop-Design darf nicht zugunsten von Mobile kompromittiert werden. --- # 35. Artworks Artworks sind kein Hintergrunddekor, sondern ein zentrales Produktmerkmal. Priorität: 1. Gebiet 2. Gegner 3. Charakter 4. Boss 5. Item Die UI soll möglichst viel Artwork sichtbar lassen. --- # 36. Screen-spezifische Art Direction ## Aschenfelder - Asche - verkohlte Erde - Ruinen - Rauch - Glut - Vulkan-/Feuerstimmung - warme Glutakzente gegen kalte Grautöne ## Dämmerwald - dichter Wald - Nebel - dunkle Grüntöne - kaltes Blau-Grau - verdorbene Natur - vereinzelte rote Akzente ## Vergessene Ruinen - Stein - Grabmäler - alte Banner - Krypten - kaltes Licht - untote / magische Akzente - zurückhaltendes Violett oder Blau --- # 37. Interaktionsgrundsatz Die UI muss immer klar machen: - was klickbar ist - was ausgewählt ist - was gefährlich ist - was aktuell passiert - was der Spieler als Nächstes tun kann Atmosphäre darf niemals die Bedienbarkeit verschlechtern. --- # 38. Informationsgrundsatz Der Spieler soll wichtige Informationen sofort erkennen. Priorität im Kampf: 1. eigenes Leben 2. gegnerisches Leben 3. gefährliche nächste Aktion 4. verfügbare Fähigkeiten 5. Status-Effekte 6. Kampflog Priorität in der Welt: 1. aktueller Ort 2. mögliche Reiseziele 3. Reisegefahr 4. verfügbare Aktionen 5. Gebietsinformation 6. Belohnungsinformationen --- # 39. Do Neue Screens sollen: - dieselben Rahmenmaterialien verwenden - dieselbe Navigation verwenden - dieselben Funktionsfarben verwenden - große Artworks verwenden - klare Fokusbereiche besitzen - Informationshierarchie einhalten - Fantasy-Atmosphäre erzeugen - browserbasiert und funktional wirken - wie Teil eines hochwertigen RPGs wirken --- # 40. Don't Neue Screens sollen ausdrücklich nicht: - wie ein modernes SaaS-Dashboard aussehen - große weiße Flächen verwenden - Glassmorphism verwenden - neonbunte Cyberpunk-Akzente verwenden - Mobile-Game-Popups stapeln - wichtige Informationen hinter dekorativen Effekten verstecken - jeden Bereich mit unterschiedlichen UI-Stilen bauen - generische Bootstrap-/Material-UI-Optik besitzen - wie ein Retro-Browsergame aus den 2000ern wirken - pixelgenau alte Browser-MMORPGs kopieren --- # 41. Konsistenzregel für KI-Implementierung Wenn eine Coding-KI neue Screens oder Komponenten erzeugt, muss sie zuerst vorhandene Referenzscreens und bestehende Komponenten prüfen. Neue UI darf nicht unabhängig neu interpretiert werden. Grundsatz: > **Neue Screens müssen aussehen, als wären sie vom selben UI-Team im selben Design-System gebaut worden.** --- # 42. Komponentenstrategie Wiederkehrende UI sollte als wiederverwendbare Komponenten umgesetzt werden. Beispiele: - AppShell - TopBar - SideNavigation - Footer - Panel - PanelHeader - PrimaryButton - SecondaryButton - ResourceDisplay - HealthBar - CharacterHeader - LocationNode - TravelPanel - EncounterCard - DangerBadge - ItemIcon - ItemTooltip - CombatActionButton - CombatLog - PotionSlot - StatusEffectIcon Keine Screen-spezifischen Kopien derselben UI bauen. --- # 43. Design Tokens Die technische Umsetzung soll möglichst mit zentralen Design Tokens arbeiten. Beispiele: ## Farben - background - panel - panel-muted - border - border-highlight - text-primary - text-secondary - accent-gold - accent-blue - success - warning - danger ## Abstände - xs - sm - md - lg - xl ## Radien Nur wenige konsistente Werte. ## Rahmen - standard - highlighted - selected - rare-item ## Schatten / Glow Nur wenige definierte Varianten. --- # 44. Ziel für den ersten Frontend-Prototyp Der erste technische UI-Prototyp muss noch keine perfekte Grafikqualität besitzen. Er soll jedoch bereits beweisen: - Layout funktioniert - Navigation wirkt konsistent - Weltansicht trägt das Spiel - Jagdansicht ist intuitiv - Kampfbildschirm ist klar - Artworks dominieren sinnvoll - UI fühlt sich nicht wie ein normales Web-Dashboard an Die Referenzscreens sind dabei die visuelle Zielmarke. --- # 45. Kurzfassung Ashen Realms verwendet ein stabiles Desktop-Layout aus: **Topbar + Navigation + Hauptcontent + Kontextspalte + Footer** Die Welt wird über große Fantasy-Artworks präsentiert. Jagd zeigt Gegner als visuelle Encounter-Auswahl. Kampf zeigt Spieler und Gegner direkt gegenüber. Panels sind dunkel, metallisch und hochwertig. Gold, Blau, Grün, Orange und Rot werden gezielt als Funktionsfarben eingesetzt. Die UI ist informationsreich, aber klar hierarchisiert. Der wichtigste visuelle Grundsatz lautet: > **Ashen Realms soll wie die moderne Weiterentwicklung eines klassischen Fantasy-Browser-MMORPGs wirken – nicht wie ein altes Browsergame und nicht wie ein modernes Business-Dashboard.**