Hilfe beim Design eines guten Windowskins

Hallo alle miteinander.

Ich stehe vor dem Problem eine gute Umrandung für einzelne Panels in meinem Spiel zu pixeln. Es geht um soetwas ähnliches wie die Windowskins im RPG-Maker.
Für die Umrandung will ich etwas modernes aber schlichtes. Sie soll einfach sein und nicht vom eigentlichen Inhalt der Panels ablenken. Ich will auch verhindern, dass der Bildschirm überfüllt wirkt.
Ich habe hier drei Screenshots von Windowskins, welche ich selbst erstellt habe. Ich bin leider mit allen nicht vollständig zufrieden:

Eine Schwarz-Weise Linie mit Schatten. Dieses Design sieht meiner Meinung nach ein wenig altmodisch aus.
https://www2.pic-upload.de/img/34076976/Bevel.png

Eine einfache Weis-Graue Linie. Schon etwas modischer, aber es beist sie meiner Meinung nach mit dem hellen Hintergrund. Ich würde aber nur ungern einen dunklen Hintergrund verwenden.
https://www2.pic-upload.de/img/34076982/Weis.png

Eine einfache dunkle Linie. Besser als in Weis, aber ich bin trotzdem noch nicht ganz zufrieden.
https://www2.pic-upload.de/img/34076978/Schwarz.png

Was sagt ihr dazu? Habt ihr Ideen oder Anregungen, was ich tun könnte, um einen schönen aber schlichten Skin zu pixeln?
Ich freue mich auf eure Vorschläge!

Ich finde den ersten Screen noch am besten. Insgesamt erinnert die Hintergrundfarbe stark an die alten Pokemon-Spiele.
Kann aber leider auch nicht helfen - gerade die Gestaltung von Menüs ist immer etwas, wo ich verzweifel.

Die Umrandung im ersten Screen fügt sich noch am Besten ein, weil auch die Schrift in diesem Stil gehalten ist. Wenn du aber eine einfache Linie bevorzugst, dann würde ich die Farbe vom Hintergrund der Mons verwenden. Dann sticht die Umrandung nicht so sehr hervor.

Was mir am besten gefällt: Der Rahmen aus dem ersten Bild, aber innen mit der Farbe vom Monster-Hintergrund.

Mal kurz abseits vom "Systemset": Wäre es möglich, die Schrift zu überarbeiten, insb. die Abstände zwischen den Zeichen? Momentan finde ich es sehr anstrengend zu lesen, da die Wörter nicht richtig zusammenhängen zu scheinen und sich, umgekehrt, dadurch auch voneinander nicht so gut abgrenzen. Was auch ein bisschen Abhilfe schaffen würde wäre, den Bereich links in mehrere Felder zu unterteilen.

Momentan wirkt alles finde ich etwas unstrukturiert; du hast sehr viele Informationen und verschwendest dabei recht viel Platz mit suboptimal gesetzten Abständen. An manchen Stellen sind sie sehr weit (zwischen den Zeichen, bei der HP-/LV-Anzeige, der riesige Zeilenabstand rechts), woanders dann sehr gering (zwischen den Wörtern, zwischen verschiedenen "Infoblöcken").

Danke für die vielen Kommentare.

Soweit ich erkennen kann, ist im Moment die erste Version die Beliebteste. Ich werde also versuchen an diesem Ansatz noch ein wenig zu feilen und ihn zu verbessern.

@BDraw:
Wenn du von dem Abstand zwischen Zeichen redest, dann meinst du innerhalb eines Wortes, richtig?
Im Moment wird ein Monospace Font verwendet. Jedes Zeichen hat bei der Berechnung die gleiche Breite, auch wenn manche Buchstaben, wie zum Beispiel das kleine 'i', diese Breite nicht ganz ausfüllen. Ich werde allerdings bei dem Monospace Font bleiben, da es Berechnungen erleichtert und mir erlaubt solide Abschätzungen über die Größe von Texten zu machen. Wenn ich dem Spieler erlaube den Monstern einen Namen mit maximaler Länge von 16 Zeichen zu geben, dann weis ich genau, wie groß diese Namen maximal sein können, unabhängig davon, welche Zeichen verwendet werden. Ich werde deine Kritik im Hinterkopf behalten und möglicherweise irgendwann in der Zukunft etwas daran ändern. Im Moment jedoch, hat eine solche Änderung vergleichsweise geringe Priorität für mich.

An deiner Kritik des Layouts bin ich jedoch interessiert. Könntest du versuchen etwas detailierter auszusagen, welche Bereiche dich stören?
Bitte bedenke, dass die Abstände so berechnet werden, dass für jedes Mon Platz sein muss. Der Abstand zwischen dem Text "Name" und dem Text "Skip" ist so lang, weil ein Name auch aus 16 Buchstaben bestehen könnte. Deshalb muss auch für 16 Buchstaben Platz geschaffen werden.
Der Abstand zwischen dem Bild des Mons und dem Text rechts daneben ist so groß, weil auch das größte Bild genügend Platz haben muss. All diese Dinge werden von dem Layout-System bei der Platzierung der Elemente bedacht.
Dennoch bin ich offen für Verbesserungsvorschläge.

Ich habe selbst schon mit der Idee gespielt das Balkendiagramm der Attribute zu ändern. Anstatt es von Links nach Rechts gehen zu lassen dachte ich daran es möglicherweise von Unten nach Oben gehen zu lassen und in zwei zu teilen. Auf der linken Seite die Attributswerte und auf der rechten Seite ein zweites, separates Diagramm für die Boni beim Stufenaufstieg.

Kannst du die Umrandung nicht weglassen? Irgendwie stört sie.
Auch ist der Kontrast zwischen Hintergrundfarbe und weißer Textfarbe nicht so besonders hoch. Die Schrift ist daher schwer lesbar.

Zitat:

---

Zitat von Cornix

#Wenn du von dem Abstand zwischen Zeichen redest, dann meinst du innerhalb eines Wortes, richtig?
Im Moment wird ein Monospace Font verwendet. Jedes Zeichen hat bei der Berechnung die gleiche Breite, auch wenn manche Buchstaben, wie zum Beispiel das kleine 'i', diese Breite nicht ganz ausfüllen.

---

Das hat nichts mit Monospace-Fonts generell zu tun, maximal mit der spezifischen Schriftart, die du verwendest, da sie dann den Platz für die meisten Buchstaben nicht ausnutzt und dadurch dieses zerklüftete entsteht. Der RPG Maker oder der gute alte Editor - oder so ziemlich jede asiatische Font - verwenden auch Monospace, allerdings ohne diese riesigen Lücken. Solltest du also tatsächlich nicht manuell den Zeichenabstand verringern können, würde ich zumindest einfach ne andere Font nehmen. Gute Monospace-Fonts hats eigentlich jedes Betriebssystem. Momentan hast du zwischen jedem Buchstaben sicher gut und gerne 5-6px Abstand, das ist in den meisten anderen Fonts schon fast ein ganzes Leerzeichen.

Was die anderen Punkte angeht: Gut, dann musst du natürlich den Platz für mögliche längere Worte reservieren, aber ich würde zumindest über das Rechtsbündige nochmal nachdenken. Ebenso, ob die Zahlen wirklich rechts von den Balken stehen müssen. Effekt ist nämlich momentan folgender: Du schaust auf die Zahl, hast aber die Bezeichnung des Wertes nicht mehr im Blick. Du als Ersteller hast das vermutlich inzwischen so drin, ich als jemand, der nicht so in deinem System drin ist, muss permanent von rechts nach links gucken um zu sehen, welche Zahl denn jetzt welchem Statuswert zuzuordnen ist.

(Btw, da es mir gerade auffällt: In der Beschreibung unten fehlt ein Apostroph bei "Mon's", aber kA, ist ja vllt. nur ein Platzhalter :) )

@Whiz-zarD:
Die Umrandung komplett zu entfernen ist eine ziemlich mutige Idee, aber ich bin mit dem Ergebnis nicht sonderlich zufrieden. Meiner Meinung nach wird das Menü dadurch zu unleserlich. Hier ein Screenshot wie es aussehen würde:

https://www2.pic-upload.de/img/34100...eUmrandung.png

@BDraw:
Das Font, welches ich ursprünglich verwendet habe, hatte 1 Pixel Abstand zwischen Großbuchstaben und 2 bis 4 Pixel Abstand zwischen Kleinbuchstaben. (2 Pixel bei Buchstaben wie 'w', 'n', etc und 4 bei 'i'.)

Ich habe hier einmal 3 verschiedene Varianten. Welche ist die beste?

Variante 1: (unverändert)

https://www2.pic-upload.de/img/34100925/Font11.png

Variante 2: (Kein Abstand zwischen Großbuchstaben, maximal 3 Pixel Abstand zwischen Kleinbuchstaben)

https://www2.pic-upload.de/img/34100927/Font10.png

Variante 3: (Großbuchstaben mussten getrimmt werden, maximal 2 Pixel Abstand zwischen Kleinbuchstaben)

https://www2.pic-upload.de/img/34100929/Font9.png

Mein persönlicher Favorit ist im Moment Variante 2.


Wenn du von den Zahlen "rechts vom Balken" redest, dann meinst du wahrscheinlich die Attributswerte, richtig?
Ich habe schon über eine Alternative nachgedacht, wo die Balken von Unten nach Oben gehen und die Attributsnamen und Zahlen untereinander unterhalb der Balken liegen. Denkst du, das wäre eine bessere Darstellung? Der Nachteil ist natürlich, dass nach Oben nicht so viel Platz vorhanden ist und daher die Genauigkeit der Balken verringert wird.

Bei der Beschreibung unten ist "Mons" der Plural von "Mon" und daher ist das 's' so richtig. Das Apostrophe würde nur beim Genitiv verwendet werden. Natürlich ist der Satz genau so gebaut, dass beide Varianten grammatikalisch richtig wären.

Dieser lila Farbton ist leider sehr langweilig und steril. Das ist vor allem deshalb ziemlich bitter weil das Menü sehr interessant konzipiert ist und auch recht übersichtlich. Es ist nur absolut nicht schön anzuschauen. Ich würde hier ein blau anraten daß auf Transparent gestellt ist. Damit kann man eigentlich wenig falsch machen. Oder ein braun wenn es zum Spiel passt und das restliche Design fittet. Zur Frage: Den aller ersten Rahmen finde ich (im ersten Post) finde ich mit Abstand am besten. Der Rahmen in lila wirkt eher gequetscht und das vor allem beim Beschreibungstext in der Box ganz unten. Vielleicht hilft dir diese Kritik auf dem Weg zum ultimativen Menü ja weiter. Keep on workin'.