ugly programmer ui concept art- looking for ideas

The stage I am at now is getting the gui system going- this is our concept user interface for the card game- now remember this is a combination of rpg, chess, and cards. I am curious if this layout is intuitive or if there is something really “off” about the concept before I have the artist start working on it. I wanted a “diablo” inspired style ui but not a ripoff. The hideous background is a color plasma to cjeck gainst most possible colors.

In this game the monster cards can be used in straight combat like spells, in a mage duel (deck versus deck), and in the games Mage Chess Tournament. The character waders about rpg style completeing quests etc, gathering equipment and cards until he can enter the tournament. SO that is why I wanted this style of UI- but if the concept isn’t working. . .

Second I was planning on using an image like this as a frame overlay on the gui level of Panda3d rendering and then draw on top of the image with texts, effects, etc. Any reason why that would be a bad idea?

JB SKaggs

i see nothing wrong with the idea.
there are no bad ideas, only bad implementations. but that should work out somehow.

[size=59]I think this is a bad idea.

Srsly bad, rly bad…[/size]

And why? It’s too sophisticated, the player is looking for nice, easy shapes, and warm/cold colours(depending on your game’s style). And everything must be at the place HE likes to.

Make the bar like it is, it’s great. But make all items work like useful widgets. It should be moved by player’s wish. He does not like the health bar down there? OK! Move it to the top!

[size=59]P.S.: M$ Pa!nt? :laughing: man, use GIMP. :smiley:[/size]

I would say make this UI but bear in mind that you may end up changing things. In particular, experiment with how much information actually needs to be on-screen at all times, versus how much can be tucked away in menu items.

For example, does the big Logs window need to be there? Perhaps it does, because having that information on-screen at all times could affect gameplay for a deeply strategic game. Still, you should definitely experiment with that (it’s easy enough to simply turn off without needing to redo the graphics.) See if you can just put the log of moves into a menu accessed by pausing the game and thus free up some clutter on your interface.

Could you explain the bad implementation comment?

Thank you
JB Skaggs

Sorry if I got it wrong. Do you want to put some pre-made image file on the screen and then fill the specified ‘niches’ with buttons and other gui things? This wouldn’t be easy since your image will be stretched on monitors with different resolutions.

Well the best examples I can think of to explain the saying “no bad ideas, only bad implementations” aren’t with interfaces specifically. Rather, think about all the various search engines: they are all based on the same idea (ie. the user types in some search terms and gets a list of relevant websites) but Google’s implementation was way better than anyone else.

That’s what the saying boils down to; the idea is generally perfectly sound, but the place where things usually fall flat is in implementation.

Incidentally, the desktop background on my computer has a slogan conveying basically the same message: Ideas are easy, implementation is hard.

Well I see the point now. I think I will go for a similar look but have a docking bar approach to the UI widgets.

Know of an example of this? So Im not trying to reinvent the wheel.

JB Skaggs

couple things you might want to think about:

  1. your minimap will absolutely need a frame to make the edges stand out from the rest of your view. You may also want to think about making the whole minimap/radar section semi-transparent (though that is less an issue since it is small)
  2. I hope that you are planning on docking the whole ui section during exploration. Not too many players are going to like the excess and unnecessary clutter during their travels. Other than that the size and general layout concept work fine.
  3. as several people mentioned before the info/log boxes need to be looked at. I suggest combining them both into a “chat-box” on one of the sides (no chat functionality, just a very similar concept). Either way, it doen’t make sense to alot that much space to two similar ui objects. Unfortunately, placing it on one side will throw off the nice symmetry you had going.
  4. IMO, the icons for sub-menus could use some change. i.e. the icons don’t seem to make sense for what they are related to (though they are pretty nice). It is just an opinion because any user will figure out eventually what icon does what. However, as a ui designer you want players to immediately know what each button does. This sometimes means to sacrifice originality for something more commonly seen.
  5. The card section needs to be much MUCH bigger. This is a card game…and you only have that dinky little space to show for it. I can’t imagine a game where I have to squint everytime I want to attack. In much the same concept, the items section can afford to be smaller (in terms of number available), unless items play even more of a role in this game than the cards. Don’t forget you have your intentory icon right next to it, so all non-combat-essential items don’t need to be displayed at all times.

obviously, these are just suggestions…take them for whatever worth you want. Just remember that as a ui designer, clutter is your enemy and simplicity is your friend.

also, for “docking” type gui objects you are most likely going to have to modify one of the existing panda gui items (or create your own), because as far as I know there isn’t one that does that as is. Is this going to be “controller” based ui navigation or is there a game cursor linked to the mouse? That will make a pretty big difference in how you implement it since the panda gui items are all preset to work with mouse activity.


Thanks and good thoughts-

The two info windows- one is for dialogue and card text, the other is to show the combat actions.

The card slots are just place holders- i was planning to display the card in the info window if you hover over them with the mouse.

Each of the above posts were helpful to me.

JB SKaggs