How Is My UI?

I am making some programmer UI for a mini RPG. This is going to be the layout with placeholder images. How is the design? Should I move anything? Remove anything? Add something? Is it just perfect?

Now it is a matter of just adding the final graphics and if there are any changes needed, I need to know now. Thanks

 

Looks highly readable to me.

 

Ok cool thanks! Are there any suggestions or is this fine for a character menu? Thanks

 

Some players might like a numerical value next to HP and MP. Showing current/max is quite common.

 

My only suggestions for it is what @BoredMormon said about quantifying the HP & MP stats and showing the character's class (Warrior, Wizard, etc) if that is applicable.

 

So should I list the class name right before where I place the level?

For example, "Wizard, Level 1" right under the player's name?

 

I'd suggest having the class above the level so it is :

Name
Class
Class Level

Having the maximum for each stat would be handy but if the game has no maximum then perhaps show what your game considers average? Just something to give the player some indication if they are super strong, intelligent etc. There's no use spending your points on strength to get to 100 if the average is 10, for most of the game you would be overkill & probably could've used some of those points elsewhere.

Also, maybe a label above the items like:
Equipped

just so the player doesn't think you click the helmet to get to the menu containing all the different helmets you can equip (unless that is what it is for)

 

And actually! some people like me prefer a percentage bar instead, 0-100 %

 

Good idea. I will change that. Thanks!

Yes the maximum is 50 but I havent seen many games that put the maximum up there as well. I will look into it some more and see if it looks good or not. Thanks for the suggestion though!

Awesome idea. I will make that an option in the settings menu. Thanks!

 

I have a few ideas, although they might not be suitable. What is the outline of the game? (like theme and time period)

 

If you want to push it you could have the current/max hp and mp only display on mouse over and have the option to trigger it to always show like Diablo and Wow do.

Aside from that design-wise it looks perfect of course without knowing what else is going on in your game we can't tell for sure but it's a nice window. Post a screenshot showing the final graphics so we can see. I personally suck at making UI and it's something I'd like to get more inspiration on.

Good luck!

 

Is it for mobile or desktop?

Will it fill the entire screen or only cover a portion? How does it fit into the rest of the game? When and where is it used?

What kind of controls -- touch? gamepad? mouse?

 

Is this functional? It's got all the basics, it's simple, and it looks easy to comprehend. I'd be hesitant to add too much more, as every new thing will take strength from what's already there. Even with programmer art, you may consider using an online palette tool to create a more appealing color scheme. Simple google, "Color Palette" - you'll find dozens of reputable sites. You can also search images.google.com, to find lots of sample images you can steal colors from.

One tip - the "+" buttons should draw attention - maybe enlarge those buttons, and use a nice bright color (ex green). Maybe bounce them.

Gigi

 

Of solid suggestions that are worth thinking about: Use a background panel to block elements (attributes and equipment being the easy ones), especially using colors that contrast with the text. Another is have a wrapper/container around the HP/MP bars so that you always have a frame of reference for what the full bar is.

Now I'm just going to nitpick. First is font. Use something with more volume, either a thicker font (not increasing font size), or an outline, or a drop shadow; something that will give it better contrast. Second is that there is too much empty space toward the bottom, so space things a little more smoothly.

 

Alternatively, you could do a segmented gauge of some kind; this combines the ideas of not including text, while symbolically showing some datapoint. Personally, I think a segmented gauge is the way to go.

 

It is a medieval rpg game. It is going to be a pixel graphics style top down game.

This is for a desktop game. It will only cover a third of the screen. This is used when the player decides to change out armor or upgrade his stats when he levels up.

By segmented gauge do you mean this style of health bar?

I will post a pic within the next few days when I finish it

 

That's one way of doing it. You can use blocks of color, or icons...all sorts of possibilities.

 

In that case it looks good to me, too.

If the game is still in play when the player opens this window, you might consider making it mostly transparent instead of using a solid background. This way the player can see if a monster's approaching.

 

Hey guys! Quick update:


Made a lot of changes. What do you think? Obviously the character portrait is still a temporary. Please be very critical because I want a very simple and good looking interface for the player.

BTW I got the art here if you're interested.

 

Wow, big difference. That looks great. If it shows everything the player needs to know to make decisions then I wouldn't have an issue playing.

 

The gauges really help! It looks awesome. That, and the thumbnail's moustache.

 

I don't really like transparent UI because it can mix with the environment and potentially obstruct certain elements (depending on opacity of course). I think I will just make the UI draggable.

 

Looks outstanding. Now get on with the game! You can tweak & refine and buff & polish to your heart's content once you have the game play finished!

 

Thanks! I have a lot of the game finished. Figured I might get the UI over with (I absolutely hate programming UI). Im excited to finish it and hopefully greenlight it. Thanks for your suggestions

 

Looks good! Once you get to the polish stage, consider making the "+" buttons grow a little bigger when you mouse over them, etc. to make the UI lively.

 

The pixels are not consistant. I'd consider making it as one image file then break it into layers.

Also, how does this fit into your game? As a menu? Or always up on the side of the screen?

 

What do you mean?

Also this is a character menu that the player can toggle by pressing T

 

The way you have it now there are multiple pixel sizes:


Typically pixel art only looks good when you keep the pixel resolution the same. To do that, I would suggest that you make your menu in one image, then break it into layers when you import them.

 

I will be sure to fix that when I get the chance. Thank you

 

compression can look ugly, especially on pixel art, so you should try using true color instead.

 

Ah I tried but it still has the ugly mixed pixel colors on the borders. I think I will have to redo the image for the border. I will do that later when I work on UI again. I am moving now to finish the last few bits of my game, since now I have a functional UI. I will do an update about a week or two from now.

 

Late to the party but it's looking good. My advice is to shift the + sign left so you can have a - sign (red) button appear when you press +, in case you mis-tap / mis-click and need to undo it (saves changes when you exit the screen).