GUI planning.

Raelyn · #1 04-19-2009, 05:18 PM

Hey guys, I just wanted some critique, I made this mockup HUD that I was thinking about using, too simple? Bad colors? Let me know!

Raelyn · #2 04-19-2009, 05:25 PM

Quote:

Originally Posted by Raelyn

Hey guys, I just wanted some critique, I made this mockup HUD that I was thinking about using, too simple? Bad colors? Let me know!

Also, here is the inventory pane I am working on. For a little extra comparison.

Liberated · #3 04-19-2009, 05:34 PM

i like the style, but i think the blue and the red from the bars start out a bit too dark, and i dislike the color of the blue.

cbk1994 · #4 04-19-2009, 06:09 PM

Looks nice, but I would recommend substituting level and "barbarian" for some information that the player may need at a glance, such as their money.

Raelyn · #5 04-20-2009, 02:45 AM

Quote:

Originally Posted by cbk1994

Looks nice, but I would recommend substituting level and "barbarian" for some information that the player may need at a glance, such as their money.

True that, but money is going to be in their inventory as a stack of coins, etc. That's just the top part of the hud, I am going to add a "hot bar" at the bottom labeled 1-9 with maybe a percentage bar for experience to next level. Not sure what other "glance info" I would need, since all character data will be on a "character" pane easily toggled with "C" key.

I may omit the level and class from the hud though, still needs revision.

Raelyn · #6 04-20-2009, 02:46 AM

Quote:

Originally Posted by Liberated

i like the style, but i think the blue and the red from the bars start out a bit too dark, and i dislike the color of the blue.

Ok, I may have to re-think the colors, they do seem a bit off from the rest of the colors.

Stephen · #7 04-20-2009, 02:51 AM

Inventory layout looks good - need a version with actual items in it. The little HUD isn't so hot. Your colors don't contrast enough with the text, which is fine for the top two variables, but I would use a white on the status bars rather than the gray.

Quote:

Originally Posted by Raelyn

Ok, I may have to re-think the colors, they do seem a bit off from the rest of the colors.

You may want to try a version where the colours are the same. Since there's only two bars the player will be able to immediately distinguish one from the other anyways. The colours currently just clash; maybe something that suits your theme better?

Raelyn · #8 04-20-2009, 05:02 AM

Quote:

Originally Posted by Stephen

Inventory layout looks good - need a version with actual items in it. The little HUD isn't so hot. Your colors don't contrast enough with the text, which is fine for the top two variables, but I would use a white on the status bars rather than the gray.

You may want to try a version where the colours are the same. Since there's only two bars the player will be able to immediately distinguish one from the other anyways. The colours currently just clash; maybe something that suits your theme better?

How is this? Any better?

Stephen · #9 04-20-2009, 11:27 AM

Quote:

Originally Posted by Raelyn

How is this? Any better?

Nice.

I'd still stick with an individual color for the bars though. I'd use a tool tip to display their names (on hover). Once the player has recognized them they'll know the difference permanently. Additionally it seems practical to dull one of the labels (you have both maxed, ie. 2242 / 2242). I can't figure out if it makes more sense to dull (gray) the current stat or the overall stat - but I know the player will be looking for only one of the two the majority of the time they glance at the HUD.

Perhaps the overall should be dulled? Also, I wouldn't use center aligning for the text - as the health (I assume it's health) decreases and there are fewer characters in the variable the horizontal position of the text will change, making it harder for players to quickly glance at a known position. I would certainly maintain the center layout, but instead place it as two variables left aligned in their solid positions. ("x. # / x. #", where x. represents the left alignment of individual variables).

Raelyn · #10 04-20-2009, 11:56 AM

Quote:

Originally Posted by Stephen

Nice.

I'd still stick with an individual color for the bars though. I'd use a tool tip to display their names (on hover). Once the player has recognized them they'll know the difference permanently. Additionally it seems practical to dull one of the labels (you have both maxed, ie. 2242 / 2242). I can't figure out if it makes more sense to dull (gray) the current stat or the overall stat - but I know the player will be looking for only one of the two the majority of the time they glance at the HUD.

Perhaps the overall should be dulled? Also, I wouldn't use center aligning for the text - as the health (I assume it's health) decreases and there are fewer characters in the variable the horizontal position of the text will change, making it harder for players to quickly glance at a known position. I would certainly maintain the center layout, but instead place it as two variables left aligned in their solid positions. ("x. # / x. #", where x. represents the left alignment of individual variables).

This is a very good idea, maybe I will center align the '/' and left/right align the current and max healths.

Edit: This look better?

Stephen · #11 04-20-2009, 12:06 PM

Quote:

Originally Posted by Raelyn

This is a very good idea, maybe I will center align the '/' and left/right align the current and max healths.

Edit: This look better?

With the red admin head, it certainly looks consciously designed. But try something other than green; something which coincides more with the color of your HUD window.

If you find a color which looks good, but it seems to contrast too little with the HUD colors you can set a transparency on the image (I say image specifically, rather than using script - some people have transparency problems with gscript). It's an elegant and functional solution.

Raelyn · #12 04-20-2009, 05:34 PM

Quote:

Originally Posted by Stephen

With the red admin head, it certainly looks consciously designed. But try something other than green; something which coincides more with the color of your HUD window.

If you find a color which looks good, but it seems to contrast too little with the HUD colors you can set a transparency on the image (I say image specifically, rather than using script - some people have transparency problems with gscript). It's an elegant and functional solution.

I don't really understand what you mean by this. :P