Eggys Games

UI Going from Cartoony to Slick

Posted on by Eggy

So I had the beginning of my UI drawn here for my game. We can see it has a bit of a cartoony feel at the moment due to being made in Flash. Now this is good for a lot of games but this time I wanted to give it a more professional feel because the player will be interacting with the UI a lot in this game. The interesting thing about UI is your designs goals are opposite to other art goals. Normally you want art to stand out and catch your eye. However good UI is designed to blend in and feel like it belongs on the screen without you even noticing it.

To start off with I used a Bevel filter in the middle to make it look like it indented. Along with a black outline around the main box it starts to stand out. I also added in little faded alpha boxes for where the spells will be. Now this gives a good start but lets try brush it up a bit.

Alright I have upgraded it a bit here now by simply darkening the backdrop, this gives it a more UI feel straight away, I also added lighted gradiants up the top. Making the top brighter than the bottom naturally makes something look more 3D which is what we want here. 

Something was still feeling off about it. So I decided to change the colour to a more lighter blue from the grey and ahhh bingo, it now looks like it belongs on the screen! it also feels more natural to the eye. I then changed the font and colour of the Mage and Skill Points text boxes which instantly gave it a more appealing look. Another small change is I moved the drop shadows on our boxes in by only 3 pixels. It's a small difference, but the trick to using filters is to use them in tiny amounts in very subtle ways to just turn a normal box into a spiffy UI type box. 

And Voila! it now looks much less cartoony and more professional. I may even make small changes to it later.