next »

[Deliverance]

I am developing a game that plays as sort of a town builder with some RPG and animal crossing touches.  I want to have a very simple user interface but still interesting for players.  Here is what my UI looks like currently. What do you guys think?  How could I improve on this?

[ProgramGamer]

While I think the art assets themselves are good, the biggest issue I can see with your UI is the inconsistent spacing. The two most obvious cases where this is visible are the dialog select brackets and the inventory screen icon positioning.

Notice how it looks like the corners of the brackets don't line up with the corners of the box formed by the text? This can be fixed relatively easily by making them align with a diagonal line shooting in the corner's direction.



The way stuff is laid out in your inventory screen is also a bit misaligned. The time in the top right corner is placed a certain distance from the edges, while the icons in the top left are almost right next to the border of the window. The player is also in a bit of an akward spot, almost overlapping with other UI elements. Finally, while the map is in the middle of the blank space to the left of your inventory, the looking glass on the right is right on the edge. This is all minor stuff to fix though, and a quick mockup shows how you can change the positioning to make it look a bit better. It's a quick and dirty edit though, so there could be more changes that would make it look even nicer. You should definitely keep messing with all this to find the layout that works best for your game.



So yeah, tl;dr is that you should make sure things are always aligned properly. That's honestly half of UI design. Make sure things are aligned and spaced out in ways that look good and convey what goes together and what doesn't. Other than that, you've got a good start. I look forward to seeing your progress on this!

[coughe]

I would say centering the dialogue text would look cleaner. I frankly think the all black and white looks rather boring and would suggest changing it up a bit. Maybe add more definition in the form of a gradient instead of straight black for the background.

Also some borders sort of like pokemon will look nice with a simple style.

[Deliverance]

I messed around with borders a little bit.  I may allow people to change them as they want.

[litHermit]

Allow for some empty space between your text and your borders, as it is now it is way too cramped. Google some rules for text layout design.

in your screenshots, you have 3px top and 2px left/right of empty space. Increase these blank spaces to at least 8px.

Same general rule of spacing out applies to your UI icons in the top-left. You had more breathing space in the earlier screenshots, now they're cramped inside that corner of the window.

[coughe]

The border and background look much better! I agree with litHermit, letting the elements breath a little more will help.

[kason.xiv]

Lookin' good! I have one small critique: where you write an item's name in dialogue it looks like you're opting to put them in single quotes (like 'Tent' in your first picture) - this looks a little strange to me.. maybe you could try changing the font colour, if you want a way to highlight game objects/character names in dialogue? There are other options to explore too, underline, italics.

[Deliverance]

Thanks for all the advice guys.  I think this will be the final draft of the User Interface    I wanted something dark to match some of the spooky tone of the game.


Edit: Upon further inspection, I will move the map and the hour glass icon toward the center 8 pixels.  Also Kason, I love your idea of a text variation on the item name but the coding program I am using (multimedia fusion 2) doesn't allow me to edit only part of a text string.