Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!
I'm in the process of making an RPG. Have the title screen and party create screen (you can even choose the party's classes!).
Problem is... it's currently really ugly, and also really empty. I'd post screenshots but they're so dreadful they wouldn't be of any help.
So then I got to looking at party/character create screens of other games, like Final Fantasy, WoW, etc. I noticed a couple things. Most but certainly not all favor dark backgrounds and light text (otherwise it'd be too bright???), and there's very little dead space. They also seem to isolate text by opaque or translucent boxes.
What approaches do you take to make a good UI? Especially for a game with menus. Just start to whip something up, think, ``Gee, a box would look good there. Better make it cyan.'' Or do you do plan it in advance? If so, any pointers?
The more your players will have to use menus and the UI in general, the earlier you should start planning for it, so you're off to good start Here's just some rambling from what I picked up over the years, just take what you need.
Good UI design is the love-child of graphic design and user experience (=UX) design, so something that's "just" pleasant to look at won't cut it. Often a misconception is that there should be plenty of text, since actually the opposite is the case: Try to find a game-world representation for as much info as possible. Granted, in an RPG players want to see the numbers behind anything so that's why esp. Final Fantasy on the SNES was a convoluted mess of numbers and sub menus (at least in my opinion). Still, if you can, try to avoid (just) numbers and have little icons or color too, e.g. when comparing items.
The other thing you want to keep in mind is what the players will be interested the most when firing up a menu. If it's all about equipment, for example, make it really easy to compare different items; when it's more about fighting strategy, ways to manage party and attacks are probably much opened menus. Either way, different players might want to play your game differently and might have different priorities, so keep that in mind.
About the actual appearance of your UI, you should platform and play-style. If it's a mobile game, then avoid too much and too small blocks of text, which in turn limits what you can fit on a screen. PC players are closer to the screen and (usually) play your game in full screen mode, so your text sizes can be smaller. But avoid simply putting more text on screen, though, because it's both overwhelming and just play ugly, as showcased here:
Take Destiny, for example and compare how much free space there is, how much text is used, how many numbers there actually are, or what's the clear focus of this screen (hint: the defense value). Sure, it's a console game, which means that the designers really had to think hard what to put where.
Same goes for The Witcher 3, which is to me an excellent balance between legibility, information and limitation in what's on screen; I always feel that everything I want to know is where I expect it:
In terms of color, fonts and appearance, the answer is simple and complicated at once: What fits. What fits the overall setting of your game, e.g. playful baroque borders around boxes...
Diablo 2. A lot more playful, hence harder to read and see with a glance what's important
...or white text on semi-transparent black background...
...or whatever.
Regarding fonts: Try to limit yourself to 3 different fonts at most, a fancy one for your titles and headlines, a very legible, straight one for most descriptions and game text, and perhaps a smaller one for descriptions, tool-tips, etc. If you view the screenshots from before again, you'll notice how little variety there actually is; mostly the different kinds of text vary in brightness, casing (just capitals or mixed with lower case characters), and size. This helps in making everything harmonic and belonging together without cluttering up the screen.
E.g. if you want to display any kind of information, follow this list until your design problem is solved:
Can I show it in game directly instead?
Can I show it with an icon / bar / dot / etc.?
Can I show it with a distinct sound-cue?
If not, you have to opt for some kind of text / label:
What's the shortest way to provide the information?
Is it easy to understand and easy to find?
If not:
Can I change the position of the information?
Can I change its brightness?
Can I change its font size?
Can I change its font (within the same type family)
Can I change its casing?
Can I change its shade within the same color?
Can I change its color?
Can I change its font family?
Still not solved? You have a much bigger problem in your game design then
Dammit, Phil beat me to it. x3 I'll try to add some of my own stuff instead of repeating what he said, but that doesn't mean I don't wholeheartedly agree with it
I usually plan complex GUIs on paper... faster than coding or drawing rectangles in a graphics editor, and you'll most likely need to scrap and replan a couple of times before you're satisfied. The important part is the layout, not the actual pixel coordinates. Information should be easy to obtain foremost, presented visually appealing second, and having as much depth as possible lastly - many players don't care that much about the intricacies of the battle system, and those who do might be prepared to spend an extra click to browse the advanced view.
Good GUIs often are laid out in a way that makes similar information group together or align with each other, and have workfliows/interactions go from left to right. But the most important part is consistency - whenever something has similar functionality, it should have similar layout and behavior. For instance, your Use Item screen and Equip screen should let you browse through different pockets of your inventory the same way, possibly limiting the interactible or shown items to only the relevant ones. If the menus look completely different, the player might not even realize both browses the same inventory space. Many RPGs also use a dark blue gradient for some reason, it being livelier than black but having a similar calming effect and contrasting well with white text.
Dark backgrounds and white text indeed is easier on the eyes - note how the GMC uses it Remember that your text should make information available, so do not make the font too distracting. In particular, your numbers should be serif-free and fluff-free as much as possible, and make sure that decimal dogs are distinguishable if your game uses both integer and decimal values of different orders of magnitude.
RPGs are very statistic-based. Therefore, make changes very clear. I like how games like Disgaea and Dark Souls color numbers that are changed (blue or green for a stat improvement, red for a stat loss) when you browse equipment changes, and you should preferably also show HOW MUCH with a smaller number of the corresponding color or such; the color change instantly tells you whether a change is for the better or for the worse, but you might want to have a quick grasp of exactly how much - for instance when an item has both benefits and drawbacks, or when there is a special effect that you might find more valuable than raw stats. Computers are way better than humans on doing maths, so make sure any humans you interact with get to do as little maths as possible and their experience will be better. Remember that numbers going up is the most common way to reward a JRPG player, so you should make the act of numbers going up as rewarding as possible so that it really feels like a reward.
Make sure to add in explanations for everything you can - not necessarily omnipresent, but easily triggered when desired. Players cannot appreciate what they cannot comprehend, so explaining what a stat influences and things like that should be a given. Also opt for understandable abbreviations or stat names - MAG is more readable than INT, HP is more readable than Vigor, Attack Power is more readable than Physical Strength, and so on. If you use archaic vocabulary, be sure to do it consciously and in favor of the game's storytelling and worldbuilding.
Try to limit your use of color and detail as much as you can without breaking the style you want to go for - using too much will end up in an arms race situation where anything that you want to highlight needs a LOT to stand out, and this easily gets out of hand resulting in a very illegible interface. I'd recommend using one color for important information, one color for not-so-important information (preferably a darker shade of the important information color), one color for highlights, and one color for lowdarks (or whatever the opposite of highlights are - things you cannot select, have depleted ammo/uses, or such). Using pictures of each item as icons makes it possible to identify them at a glance, but if items generally have very little unique aspects and generally only are statistics variations of the same thing you might be better off using category icons, such as a generic 'sword' icon for all swords and a generic 'bottle' icon for all healing potions... not to mention generic icons likely results in less work for you.
Here's a quick hack that I learned online some time ago: If you want a colour theme that conveys a specific message, find another picture with a similar message and do all of your graphics work by eyedroppering what you perceive as dominant colours off that picture.
@Phil Strahl: Wowza, thanks for the in-depth response! Very enlightening. Especially that second link. The more-is-not-always-better thing... I'll need to keep that in mind. I'm tempted to jam pack it with information. Fortunately I limited myself to 4 stats (str, vit, int, spd), forcibly simplifying things. I'll have to do a lot of planning before I do any coding...
@Yal: Thanks to you too! Especially the use of colors and explanations. I wasn't considering those... time to revisit the drawing board, so to speak.
@FrostyCat: Color scheme that conveys a message, eh? Like dark for sad? Yeah, that sounds good. I was just perusing them as a whole, not looking at specifics like that...
There's a lot more to designing a good UI than simply picking colors, of course, but to that end there are a few good online color scheme designers that can help you quickly pick colors that go well together.
You look at other stuff to get a general idea or feel.
You hire an artist to do a mockup for you (they can do it fast/cheap since its not game-asset quality).
You tinker.
It has all sorts of nice color pallettes pre-picked, and you can search by keyword, etc. E.g. a search for "medieval" or "earth" returns a lot of natural tone pallettes good for medieval games.
Here's just some rambling from what I picked up over the years, just take what you need.
