User Interface Design (game)

[Shurin]

Sometimes I get hit by a massive amount of inspiration when an idea hits me, and I can spend countless hours (usually continues, from 10 to 30-40hrs) following a simple idea.

Going through all the graphics and drawings here on CA it can get quite discouraging to see what people (Both prof and simple beginners) have created.

But I believe instead of stopping, I think the best way is to figure out why and where I am lacking, and I think the best way to deal with that, is to ask =)

I started off with a simple hand drawn base (dont own a wacom or any form of graphic pens..)
http://img437.imageshack.us/img437/5214/firststep7fn.jpg

And cut it in layers, then slowly started adding effects to each
http://img460.imageshack.us/img460/4572/steptwo9md.jpg

After doing this I add all the special 'wooha' and end up with this
http://img170.imageshack.us/img170/2839/finaltestdo5.jpg

And here is how it looks like inside a game with buttons and all that on it
http://img141.imageshack.us/img141/1351/screeniefull2kf7.jpg

Now my question would be, where am I lacking or what do I fail to use in PS to make these things look like an actual part of the game in colors/graphics?

Thanks in advance for taking the time to read this!

Edit: The 'wooha' was what took the longest by far to make, I created them all piece by piece, over and over again till they matched up nicely with the big one, which in the end I had to redo the coloring on a bit to make it look a bit more like 1 big whole.

[Basil]

glad to see some UI design up here + i like how you posted your whole process. the design looks pretty good for the sci fi genre, but the game behind it looks more fantasy to me. also, i think it needs more depth. the wire connecting the screen-things looks entirely flat, especially where it connects at the top. i would darken everything behind the screens/wire to push them back. i'd also tone down the highlights on the dark metal in the background, because it is competing for my attention.

lastly, when laying out a GUI, it is usually best to put the nonessential decorative stuff on the outside toward the edge of the screen. it's a bit easier on the eyes that way. for all of these reasons, it's good to make multiple thumbnails in the beginning, before going all out.

sorry if i'm too full of crits today, it's still a good start :p

[Shurin]

Any crits are good crits, is what I believe. Sure alot of things one wont like, but the only way one will ever advance is to know what others truly think, even if not all crits are as usefull as the next.

However, yours are very helpfull and I thank you for that.

The toning down of the dark parts I understand, but Im not quite sure what you mean with the nonessential decorative stuff. I've tried to keep the big decorations on the sides and used some minor fillers in the center just to try and make it a whole, more robotic feel overall. How would u personally think this can be achieved without it?

Also the game u see is just a filler. Its not an actual game, more of a sample to test UI's with.

[Basil]

by "nonessential decorative stuff" i meant the overlapping metal shapes behind the green health bar. i actually wasn't seeing the health bar clearly because it is too transparent. maybe it would be clearer if you made that more opaque. other than that, it just feels like the screens are a bit too close to the bottom edge compared with the amount of space given between them and the health bar.

[Shurin]

Ah I see, small misunderstanding. The green bar is actually an experience bar, which fills up to the end. Once full, you gain a level and goes back to empty. Its like an energy storage that fills up, so to speak. It had some things attached to it, to make it connect with the bar behind, but it was getting extremely cluddy so I kept it like that. Its something of the engine itself however, the xp bar showing up right there. Its not something I chose myself, just made the best of it lol.

I understand the rest however, and will make another version through it when I get back from work tommorow. I'll post it here once completed!

[Shurin]

Ok lets see, I darkened the black part, exchanged the fancy stuff with black bars, equal to the rest of the background black pieces.

Then toned up the grey bar part and gave it a bit more effect to make it come out more.

Then I adjusted the wire in order to give it a bit more of a rounder feeling to it and added more shadow to it.

Took out the exp bar, cause it really kills the overall look of this thing in perticular.

And here is the result... lemme know what u think;
http://img91.imageshack.us/img91/5324/testbarbs5.jpg

[Basil]

the changes are looking good! i like it a lot better without the exp. :D

the little bar connecting the two sides is getting lost now.. maybe make it black. also the beveled symbol loooks really contrasty compared to the lighting on the rest of the piece. it might look better as a decal or just toned down some lastly, the little rectangular mark above the right screen needs a few pixels breathing room below it.