19 KiB
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:
- Welt-/Reiseansicht
- Jagd-/Begegnungsauswahl
- 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:
- Gebiet
- Gegner
- Charakter
- Boss
- 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:
- eigenes Leben
- gegnerisches Leben
- gefährliche nächste Aktion
- verfügbare Fähigkeiten
- Status-Effekte
- Kampflog
Priorität in der Welt:
- aktueller Ort
- mögliche Reiseziele
- Reisegefahr
- verfügbare Aktionen
- Gebietsinformation
- 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.