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

Angelu · #13 04-20-2009, 06:11 PM

You can cutoff the frame too :O

Raelyn · #14 04-20-2009, 08:55 PM

Quote:

Originally Posted by Angelu

You can cutoff the frame too :O

Heh, that's pretty beast mode, I might do that instead. :P

Raelyn · #15 04-20-2009, 09:37 PM

Quote:

Originally Posted by Raelyn

Heh, that's pretty beast mode, I might do that instead. :P

Here's a result I came up with, what do you think?

fragman85 · #16 04-20-2009, 09:43 PM

I like Angelu's more :o

Raelyn · #17 04-20-2009, 10:00 PM

Quote:

Originally Posted by fragman85

I like Angelu's more :o

Well, I can't please everyone it seems, why do you prefer Angelu's?

fragman85 · #18 04-20-2009, 10:52 PM

Having the background of the head all white looks kinda bad for me :o

Stephen · #19 04-20-2009, 11:17 PM

Quote:

Originally Posted by fragman85

Having the background of the head all white looks kinda bad for me :o

Yea, it seems to put too much visual emphasis on it too. Probably a charcoal color would work best.

Looks good in the current state, but I would now avoid the transparent bars.

Raelyn · #20 04-20-2009, 11:39 PM

Quote:

Originally Posted by fragman85

Having the background of the head all white looks kinda bad for me :o

The background of the head isn't white, it's transparent.

Liberated · #21 04-21-2009, 07:04 AM

looks good! I really like it, but i don't really like the fact that the bars are green, but that might just be me.

salesman · #22 04-21-2009, 07:08 AM

Nice, I actually like the green

Raelyn · #23 04-21-2009, 10:29 AM

Quote:

Originally Posted by salesman

Nice, I actually like the green

Thanks, it looks like it's a 50/50 thing. Love it or hate it sort of. I am going to go with it for now. Need to find someone to help script it. >.> I am terrible at scripting and I got ONE scripter helping who logs on one day a week. (but he's pretty good, so I can't complain too much. :P)

I will post some more mockups with additional GUI elements as I finish them. Keep checking back!

Edit2: Here is with the frame on the inventory. (no items yet, sorry) also chat box.

Liberated · #24 04-21-2009, 03:19 PM

i don't know but i don't think the inventory now fits with the other part with hp and mp, maybe make the gui partly transparent aswell?

fragman85 · #25 04-21-2009, 04:29 PM

Quote:

Originally Posted by Liberated

i don't know but i don't think the inventory now fits with the other part with hp and mp, maybe make the gui partly transparent aswell?

Yeah I agree

Raelyn · #26 04-21-2009, 06:00 PM

Quote:

Originally Posted by Liberated

i don't know but i don't think the inventory now fits with the other part with hp and mp, maybe make the gui partly transparent aswell?

How's this?

Frankie · #27 04-21-2009, 06:34 PM

I don't like how both bars are the same color. The green is nice, but change one of them.

Raelyn · #28 04-21-2009, 06:47 PM

Quote:

Originally Posted by Frankie

I don't like how both bars are the same color. The green is nice, but change one of them.

Well, unfortunately I have people telling me to use the same color, could you tell me why exactly you don't like the same color on both bars?

Liberated · #29 04-21-2009, 06:50 PM

Quote:

Originally Posted by Raelyn

How's this?

looks better in my opinon

Angelu · #30 04-21-2009, 07:01 PM

2 green bars are fine but you have to explain them in any way with
HP: x/x
MP: y/y
or something like this

i changed the inside part so you dont have all this metal things on the inside
iam not a fan of this red brown atm

Raelyn · #31 04-21-2009, 08:01 PM

Quote:

Originally Posted by Angelu

2 green bars are fine but you have to explain them in any way with
HP: x/x
MP: y/y
or something like this

i changed the inside part so you dont have all this metal things on the inside
iam not a fan of this red brown atm

Dang, you make me want to quit my own server. You're besting me at every turn.

Angelu · #32 04-21-2009, 08:16 PM

Hehe thats not what i gonna try to do

Play around with it and all is fine

Raelyn · #33 04-21-2009, 09:59 PM

Quote:

Originally Posted by Angelu

Hehe thats not what i gonna try to do

Play around with it and all is fine

Heh, not quite, now my only scripter quit. :/