The Forums Are Now Closed!

The content will remain as a historical reference, thank you.

Demigod UI Design

By on August 4, 2008 4:27:28 PM from Demigod Forums Demigod Forums

I bet if I tell you that I'm Caryn Law and I'm the UI Designer on Demigod here at Gas Powered Games, your first question is, "UI? Who cares about UI?" Your second question is probably, "Those shoes. Seriously, where did you get those shoes?" I'm here to answer the first one (sorry, the second one is a state secret) and hopefully make you care about Demigod's UI, or at least understand why I care a lot about it. In fact, I'm kind of like the Dwight Schrute of UI (you know, the guy from The Office) -- I have a deep obsession that borders on creepy for a narrow subsection of game development that few others ever give a second thought to. Except hopefully I'm better at my job than Dwight is at his. And less creepy.

When you develop UI for a game that fits a specific genre, like an RPG or an RTS, you tend to stand on the shoulders of giants. Games with deep pedigrees that came before yours have already established a well-worn path in UI -- by now we know what an RPG or an RTS game interface looks like, don't we?

And that's what makes working on Demigod's UI so exciting. Demigod defies being pegged as one particular genre, which means it's both exciting and challenging to create its UI. UI is very often about conventions and sticking to them because we want our players to immediately be able to pick up our game and get right into the action without having to read a manual on how to control their characters or interact with things in the game world. But at the same time game UI is about the perfect marriage of those conventions with the actual gameplay design of your game. We have RTS elements, so we need to make sure that we use tried-and-true UI buttons and controls that RTS players will immediately be familiar with. But what if those RTS elements conflict with the RPG aspects that we have in Demigod? Can we make an interface that will be immediately comfortable to both RTS and RPG and action players? Aha! Now this is where my job gets real! (See, this is the part where I have to try not to be creepy.)

To accomplish this, I work very closely with our lead designer Mike Marr and the rest of the design team to work out all of the things that we need to provide the player in the UI -- things like your demigod's abilities and their inventory items, as well as the standard pieces of information like your demigod's health and energy levels. Early on in the game's development, all of these items in our list were whiteboxed into the game's HUD, meaning that they were put in with no actual art design, just pure functionality, and placed roughly where we thought they might need to be on the screen.

This is when our playtests become very important to what I do. Playtests allow me to work out any kinks or conflicts in the UI, and other members of the development team can give me feedback on how useful or not useful they found the UI layout and functionality. The ability buttons may be too small, for instance, given how important they are, or maybe the inventory items are too hard to access easily. Based on this continuous feedback from the team, we went through a couple of further whitebox iterations of the HUD to nail down our core functionality and screen layout.

Once we reach a point where we're pretty sure we've got most of the UI functionality in place (we never fully reach that, really, until late in the project since every game goes through lots of gameplay design changes through its development that affect the UI) we begin the art pass. At this point I start working with our lead artist Nate Simpson. Nate is like the General Eisenhower of art design: he's got a sweeping, top-down view of how the art style of every element of our game fits together, and while the technical side of UI is nearly all game design, the art side of UI has to fit into his vision. I create a series of style compositions, art'ing up the UI, so to speak, and give it the style I'd like to see that works well with its functionality. Nate then goes over those passes with his own art style, and together we create something that fits with Mike Marr's gameplay vision, my vision for good UI layout, design, and friendly functionality, and Nate's artistic vision for the game.

And that's part of what makes what I do so much fun. Sure, UI sounds boring on the surface, but there are so many moving parts to it -- I script the basic design and functionality (we use Lua in Demigod) and work with our engineers and designers to get things hooked up to the game engine, and I design some of the art and do the actual graphic design of the UI as well. It's a great blend of both the technical and the art, so I never get bored.

Those of you in the upcoming beta are going to be a critical component of helping me create the best UI possible for Demigod. Getting feedback on how the UI helps or hinders the gameplay experience is going to be key, so I'll be watching those forums. Hope to see you there!

- Caryn "Hellchick" Law

As a bonus, here are a few sketches showing I went through when developing the early stages of Demigod's UI:

Sketch 1


This sketch has a few shapes I was iterating on to try and test the relationships between some parts of the UI with other parts, like the health bars versus the ability and inventory buttons. Demigod is a unique blend of science fiction and fantasy in terms of art style, and I want to make sure we carry that through into the UI. What's that strange egg-shape thingy somewhere in the middle? I was trying out some shapes from the upper left, realizing that it wouldn't really work, and art lead Nate said that egg shaped health indicators with a heart in the center would make us the most emo-looking game on the market. I told him I thought he was on to something,  so I sketched little hearts coming off the health indicator, with sad faces to show that you're losing health and happy faces to show that you're gaining health. He didn't buy it.

Sketch 2


I'm trying to decide how I want the "target indicator" to look when you're fighting an enemy demigod. We know we want to set it apart from anything else in the game, so I'm trying different shapes and edges to help set it apart when it comes up.


Sketch 3


Here I was trying to come up with some basic icon design for our abilities. Abilities are a common RPG item, and while many games have really pretty, painted icons for their abilities I wanted to kind of set ours apart a little and come up with something that was based more on really strong silhouettes. We actually did this for our first round of ability buttons (I think those people in the beta will see them) but we're discovering that while the button imagery looks really awesome thanks to Steve Snoey, who took my basic concepts and turned them into actual icons, it's too easy to make them all look really similar. So these will be getting another revision.

0 Karma | 53 Replies
August 4, 2008 5:05:16 PM from Demigod Forums Demigod Forums
It's looking great ^^
Good job!

Will the sketches be available on eBay?
August 4, 2008 5:06:09 PM from Demigod Forums Demigod Forums
enjoyed that article, I guess UI is one of the less rewarding aspects of game design as a good UI tends to be shy and stays out of peoples mind, all you will ever read about an UI are complaints so lack of complaint is all reward you will get. (maybe I overexaggerated it a bit).

nice to get some clues in the sketches (cap-meter, apparently at least 6 skills per Demigod...)

I think its the first time Lua is officially mentioned as scripting language for Demigod, so it will probably be good moddable, but I am no expert.
August 4, 2008 5:10:02 PM from Demigod Forums Demigod Forums
Thanks for the cool journal. Looking at the sketches it looks like everything will have a unique look from other games which is nice. Without beta it is hard to give to much feedback. I know in other games it helps to have a small portrait in the corner to help you see your health and mana quickly. Although this really does not have much to do with the UI but being able to customize hot keys for abilities would be nice and then whatever it is set to shows up with the ability description when you hover over it.

Thanks again for the journal it was a fun read. Can't wait to give you better feedback.
August 4, 2008 5:40:02 PM from Demigod Forums Demigod Forums
Yay it's good to know there is actually someone who cares only about the UI around (as opposed to ui + other more interesting things), which means I can hope for a great UI!

Also, thanks for the journal as always! the frequency is great! and makes waiting for the beta harder and harder.

Finally : LUA!!! yea moddiblity! (of course I should of figured cause of the sup com engine)
August 4, 2008 5:45:36 PM from Demigod Forums Demigod Forums
Thanks for the post
August 4, 2008 5:47:19 PM from Demigod Forums Demigod Forums
Love these journals.

Few questions/suggestions:

Will health bars always be visible on the screen (enemy units included)? Mana/energy(or whatever consumable medium that empowers the demi's) would be nice too.

For similar games (warIII mods, DOTA, tower defense, footman frenzy) its very nice to know where you need to hit to do the most damage without having to mouse over that unit.

Shortcut keys please!
Not only for abilities, but for any of the items that may be activated (heals, nukes, etc).

Mini map/radar?

I don't mind waiting till the beta, but if you can answer any of those, we'd appreciate it.

Thanks!
August 4, 2008 5:51:20 PM from Sins of a Solar Empire Forums Sins of a Solar Empire Forums
Thanks for the journal, good read!

I bet if I tell you that I'm Caryn Law and I'm the UI Designer on Demigod here at Gas Powered Games, your first question is, "UI? Who cares about UI?"


Actually, my biggest gripe (and anyone who's sat in the Demigod IRC at the time should know) is that when companies show off screenshots, they almost never show the UI. It irks me I know the UI pre-release tends to be a work in progress, but even one or two screenshots.

After all, when we play we don't get to snap the picturesque shots that are always used on the game sites, we have to use and look at the UI constantly So for myself, I always want to see the UI

That's just generally speaking, though. We got a glimpse of Demigod's in one of Frogboy's screenshots
August 4, 2008 5:57:02 PM from Demigod Forums Demigod Forums
I am against having permanent health bars over/under enemies, because it just looks ugly and if there is that option I'll still not use it even if it gives me a small disadvantage because its just so hideous.
And I do hope we don't see the enemies mana at all, never liked that in warcraft, was alot funnier in starcraft when you could bluff with units who don't actually have enough mana to do anything. (but I would like very much to have an item which reveals the enemy mana/items maybe even skills).

August 4, 2008 5:59:32 PM from Demigod Forums Demigod Forums
Good read.

I'd like to reiterate my request for no sliding or fading menus. Menus and should appear instantly. Clicking a button should take you to the next screen instantly. Fading transitions have become somewhat of a fad, but they're consistently more work for something less functional. Apple, I'm looking at you.
August 4, 2008 6:14:16 PM from Demigod Forums Demigod Forums
I think healthbars over/under enemies should be optional. Sometimes they aren't too ugly, and they can be pretty useful in some games - especially ones like Demigod where you seem to have a few big units rather than hundreds of little ones.

And I agree with AZ. At least make them turn off-able.
August 4, 2008 6:37:45 PM from Demigod Forums Demigod Forums
uh only me who isnt able to just click the images to see the full version?

modified the url to get to the "big" sizes

http://www.demigodthegame.com/images/journals/caryn_law/hud1.jpg
http://www.demigodthegame.com/images/journals/caryn_law/hud2.jpg
http://www.demigodthegame.com/images/journals/caryn_law/hud3.jpg

Also got a few questions Id like to get an answer to

Will the art for the UI be different depending on what class/race you play?
Also will there be any differences in the UI between a general class and an assassin class?


Also since the discussion about permanent healthbars came up, how about having the healthbar only show up on mouseover or selection but also have an area effect to it working so that you mouse over the big unit in front of you and you see his healthbar 100% clearly, but you also see the healthbars of creatures within a certain area around this unit but perhaps with 50% transperancy.
You started the journal by saying a lot of people don't appreciate a good UI, well that may be true but Im sure as hell they would hate any UI below average. Myself has by now gone trough alot of different betas for all kinds of games and I can say that a good UI is a really high priority for me, which makes me glad you make sure to put this effort into it
August 4, 2008 6:37:58 PM from Demigod Forums Demigod Forums

Can??t even see the pictures.. They??re 150x132 or whatever..

Tried clicking on them - nothing.
August 4, 2008 6:47:01 PM from Demigod Forums Demigod Forums
On the point of fading menus, look at how sins did it, thats a great example of cool looking transitioning menus with out the waiting. (they moved the background between planets, while the menu would transition instantly) And plus demigod already has awesome environmental art, why not show it off!

And another point, why not just have a drop down box in the options menu that has things like:

Constant health bars
Constant health bars + mana bars
Hover over health bars
Hover over health bars + mana bars
Hover over area health bars
Hover over area health bars + mana bars
Selectable health bars
Selectable health bars + mana bars
Never show health bars in game view (i.e. still show them when selected in the unit stats window, if such a thing even exists)

and a box for radius of hover area (if you really really like options)

also, customizable key configs! (if that is in any way your department...)
August 4, 2008 6:56:46 PM from Demigod Forums Demigod Forums
Need bigger pictures, I don't have or need glasses and I was squinting.

Otherwise it's a solid post!

EDIT:
Here's some constructive criticism from looking at your pieces of paper:
1) Make sure the UI is not too ornate as people will prefer a slim and functional UI to a beautiful one that takes up half of the screen.
2) For the Capture thing how about you do something nice with liquid entering at the side and it filling up. If you have something that makes it capture faster more liquid can flow through. Some nice animations or animation + physics effects could be put in here. It may be too hard to implement, I'm just saying make it interesting. If it comes to it how about the thing you capture changing it's animation to suite your god and team colour?
3) For the demigod battle indicator? That's tricky but try putting a sound output too, it doesn't have to be just visual. Maybe a voice-over like "demigod battle imminent" or "commencing". Note hot imminent suites a robotic game and commencing suits a more organic one? Just something I noticed when I came up with the idea.

Finally, nothing aids the flow of constructive criticism like the developer messaging back saying if the idea is a good one or bad one and why. This will also reduce the rate people suggest the same idea, I'd personally want to look at every angle.

Sorry if this post seems condescending in tone, I'm just passionate about games that's all.
August 4, 2008 7:27:18 PM from Demigod Forums Demigod Forums
Thanks for all the great comments so far, everyone.

Sir On The Edge: I ALWAYS prefer a slim and clean UI to an overly ornate one, so you can rest assured that I have that in mind already. In fact, it's one of the things I've often had to fight for (I've worked on five game UIs so far in the UI part of my game development career and in almost every one of them I've had to push hard against overworked UI). I believe that the less you notice the UI, the better. And as for point #2, I definitely have a bunch of plans on the table regarding how the capture meter is going to look from its animation to its color scheme, with the color scheme being one of the main indicators about its actual capture status. This will all be taken into account and playtested heavily so we can make sure that it conveys the right amount of information while still fitting in with the rest of the art style of the UI.

Yeah, the pictures were working when I posted the article, but the thumbnails weren't getting linked, just the alt text. So IT went in and fixed that but I guess that somehow broke the links to the main images. I'll let them know.

Thanks!
August 4, 2008 8:14:50 PM from Sins of a Solar Empire Forums Sins of a Solar Empire Forums
Well, it's always a good sign when the designers and the future testers can already agree on a direction - less butting heads, more making it perfect

Definitely looking forward to starting the beta.. but you GPG folks sure don't make it (the waiting, that is!) easy on us, especially with all the cool journals.
August 4, 2008 8:54:11 PM from Demigod Forums Demigod Forums
Third picture:

Ooze
Life steal
Soul steal
Vampire conversion

Vampire Lord skill abilities confirmed!!

...plus there's two extra skill slots. I assume you wouldn't add them if they won't be used.
August 4, 2008 9:00:38 PM from Demigod Forums Demigod Forums
Man, you guys are like the Oliver Stones of game development! Give you a little footage and you've got your zooms trained in going, "back...and to the left. Back...and to the left."

It's awesome. But remember that I haven't actually said what each of those slots ARE. They could be abilities...they could be something else!! YOU'LL NEVER KNOW, MUAHAHAHAHAHAHA. (Well, okay, you'll know at SOME point, of course.)

Some of those sketches are also a few months old. So some info on them might be out of date. But some might not be. I can neither confirm nor deny which info may or may not be out of date.

But kudos to the detective work. I certainly wouldn't want to be a criminal under the watchful eye of all of YOU.
August 4, 2008 10:39:57 PM from Demigod Forums Demigod Forums
Wow thanks so much for this journal. I am very much interested in helping make this game as awesome as possible and providing feedback for what seems to be a great dev team. I'm really excited to assist in any way I can (and of course to play the game). I came accross this site by chance through a gaming blog and upon watching the demo pre-ordered. I really can't wait for the beta test to start, and I hope I can be an assett to the development of what appears to be a great game. For the other people who have posted about life bars, I think something nice would be kind of like the frozen throne was, hold down alt and it shows all life bars on the screen. That way you could tap it down for a quick glance, and let go to go back.

PS - Your screenshots reminded me of a custom UI I created for world of warcraft toon, I did a whole paper sketch thing just like that with little diamonds and things in different spots. Totally reminded me of it.

PPS - Like the others have said, I'm really impressed so far by the creators of this game and the journals and things coming out. This one could really sneak up on everyone and be a monster hit. Can't wait to get all my friends to play it (next year of course) or to pre-order once they hear how much I like the beta.

Again, thanks for the post!
August 5, 2008 12:08:43 AM from Demigod Forums Demigod Forums
Great little journal article Hellchick into the "creepy" world of UI design.

Did you have much involvement in the Supreme Commander UI, more specifically did you see some of the good work that Goom and Saya did with Supcom UI mod? I for one, am a big fan of customisable UI's, and if this is possible for Demigod (time permitting), I think that would be a great asset. Nothing like customisable UI's and hotkeys to improve gameplay.
August 5, 2008 7:00:05 AM from Demigod Forums Demigod Forums
Excellent! Very in depth and yet another aspect of the game we can see is going along well I hope all these journals keep coming because not many games let you see into the minds of the developers.
Still waiting for that beta announcement.. I want it now!
August 5, 2008 7:54:10 AM from Demigod Forums Demigod Forums
Yay, stick it to the art people!
August 5, 2008 9:45:34 AM from Demigod Forums Demigod Forums
Those of you in the upcoming beta are going to be a critical component of helping me create the best UI possible for Demigod. Getting feedback on how the UI helps or hinders the gameplay experience is going to be key, so I'll be watching those forums. Hope to see you there!


On the first few runs I will try to remember the initial thoughts that cross my mind. And look what works for me or not. This is something that can only be done while playing the first games. After that I get used to the GUI whether it is good or not.

Keep up the good work!
August 5, 2008 10:51:35 AM from Sins of a Solar Empire Forums Sins of a Solar Empire Forums
I know more about UI design now than I think I ever have.
August 5, 2008 12:12:05 PM from Demigod Forums Demigod Forums
Great little journal article Hellchick into the "creepy" world of UI design. Did you have much involvement in the Supreme Commander UI, more specifically did you see some of the good work that Goom and Saya did with Supcom UI mod? I for one, am a big fan of customisable UI's, and if this is possible for Demigod (time permitting), I think that would be a great asset. Nothing like customisable UI's and hotkeys to improve gameplay.


I didn't actually work on SupCom -- I was working on Space Siege prior to Demigod and that was my first title here at Gas Powered (I've done the UI for other games, but at another developer prior to GPG). But being a World of Warcraft player myself I'm pretty familiar with how awesome it is to be able to customize your UI (oddly enough, I've never done this in WoW; I think it's because I do UI here at work so when I go home I just want to play rather than do more work, hahah). And I know that SupCom's UI was obviously customizable since it was done in lua.

Allowing players to mod their UIs is something I really want to do on Demigod so I'm keeping that in mind as we develop the game. I look forward to seeing all of our fans' custom UI mods with notes saying, "geez, I could have done a better job than that, here's my mod that fixes all her bad UI."
Stardock Forums v1.0.0.0    #108434  walnut1   Server Load Time: 00:00:00.0000797   Page Render Time:

Stardock Magazine | Register | Online Privacy Policy | Terms of Use

Copyright ?? 2012 Stardock Entertainment and Gas Powered Games. Demigod is a trademark of Gas Powered Games. All rights reserved. All other trademarks and copyrights are the properties of their respective owners. Windows, the Windows Vista Start button and Xbox 360 are trademarks of the Microsoft group of companies, and 'Games for Windows' and the Windows Vista Start button logo are used under license from Microsoft. ?? 2012 Advanced Micro Devices, Inc. All rights reserved. AMD, the AMD Arrow logo and combinations thereof are trademarks of Advanced Micro Devices, Inc.