GUI and font color scheme

[cat]

As mentioned in this thread I need help to get a clearly visible and consistend GUI coloring.

Here is a mockup pick containing various GUIs at the same time for a good overview:

The dialog has three colors: already shown/normal/highlighted

I tried to use the darkest color for the overhotspot:

Should I change the other GUI elements to this darker color too?

Any suggestions? I want to have the complete GUI in a consistent color scheme

[Hudders]

I think you will have to darken that quite considerably, it's not very visible at all in its current state. I would darken "normal" to the colour you've used for "highlighted" and go from there.

[cat]

Do you think I should darken the rest of the GUI as well?

[Hudders]

Yes. It's too light.

[Darth Mandarb]

There is no (very little) contrast between the items and they seem to get lost in the mix...

I did a paint-over to illustrate and idea on how to pull them apart so they read easier.  I'm not sure if you're sticking to any restrictions (color depth, no alpha channels, etc) so this could be modified to suit any restrictions you might be adhering to.

Your Original:


My Paintover:

- I upped the contrast of the GUI items
- created a mostly transparent white overlay to "wash out" the background when/if a GUI is activated
- added a little drop-shadow effect to the guis
- darkened the outline of the text

Just some ideas!  Hope it helps

[cat]

Thanks for your paintover, Darth!

I see were you are going with this and your's is indeed much better readable than my version. Currently I'm at 16 bit so I think alpha wouldn't work. Of course I could change to 32 bit, I'll consider this. Or maybe I could use a solid drop-shadow.

The reason I chose those light colors was that I tried to resemble sheep/sheep wool but your paintover has this feeling too but with more contrast.

[Darth Mandarb]

No problem!

As for the color depth/alpha issue you could always do something like this:



This way you can leave the settings as they are and still achieve a similar effect.  Both have their charms ... but I personally prefer the 32bit option

[Snarky]

Is it even necessary to fade out the background? The contrast increase helps readability (which was a definite problem with the original), but this seems like a purely optional effect, not clearly better or worse, just different.

I'm still really liking the style of this game. So charming!

[cat]

Hm, now that you say it - it might be confusing to the player that the screen fades out as soon as the inventory fades in. Im currently playing around with different color sets based on Darth's paintover. I'll post it as soon as I have something I'm satisfied with.

[Darth Mandarb]

Agreed. 

It's just something I prefer. 

I've had instances (well, in web development) where a "GUI" becomes available and when my QA team were testing they missed the gui entirely 'cause the screen didn't change in any way (think of the small javascript alert in browsers, if the resolution is high enough that can easily get lost on the screen).  It's even more confusing if the background actions are blocked by the GUI's presence and they aren't seeing the GUI.

So the solution I've evolved is to "fade" the screen so the user/player knows something has happened.  Granted this probably isn't as much an issue in lower-res games (particularly if the GUIs are large-ish) but just something to think about!  In the end, with things like this, I let my testers/QA people tell me what works best!

[cat]

Alright, the new version is close to Darth's, but with some changes:

*) same hue for all GUI colors for more consistency
*) no 'bluring' in background and alpha drop-shadow
*) made text highlight brighter and more saturated instead of darker

Here are the new versions, one with black and one with brown cursor:

[Ghost]

I think it's readable enough; it looks good too. I'd say the brown cursor makes a better match for the GUI but it's personal preferrence: Some people prefer their cursor to stand out to make it easier to notice.
Either way, charming screenshots and a pretty GUI!

[Hudders]

Looks good.