Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

2D All the way! / UI Design

Author
Message
NeX the Fairly Fast Ferret
19
Years of Service
User Offline
Joined: 10th Apr 2005
Location: The Fifth Plane of Oblivion
Posted: 23rd Apr 2009 01:56 Edited at: 23rd Apr 2009 01:56
Link
I'm trying to make some UI for a video game. I am aiming for something that looks a little polished but isn't annoyingly over the top. Graphic design isn't my thing, I'm hopeless at it so I need to know if there's anything naggingly awful about this.



One thing in particular I'm not sure about is the transparency on window backgrounds. Is it too much? Will it get irritating or is it good polish?

Attachments

Login to view attachments
Back to top
Profile PM Website
AndrewT
17
Years of Service
User Offline
Joined: 11th Feb 2007
Location: MI, USA
Posted: 23rd Apr 2009 03:21 Edited at: 23rd Apr 2009 03:23
Link
I personally like the transparency. The only thing I notice that could be fixed is that the text and 'X' button on the window are aligned right at the top, it almost looks like a bit is being clipped off--maybe moving them down a bit could help. All in all though it looks good. Nice job.

i like orange
Back to top
Profile PM
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 23rd Apr 2009 09:37
Link
looks pretty good to me, nex. some thoughts:

1) i would make the text a bit smaller. leave a couple open pixels around it or else it will look crammed in there.

2) the borders on the item buttons are pretty thick, too. i'd swipe a pixel or 2 inside and out.

3) Menu Titles (ie, "Load Game" in the layering test image) needs to be moved down a couple pixels (and with smaller text as mentioned).

as far as the transparency, i think it looks pretty slick but seeing it in action might be a different story. maybe leave the window with focus as you have it now but any other windows you could darken or fade more which would help make the text in top-most window more visible (ie, consider the overall contrast so (current) things stay legible).

Back to top
Profile PM Website
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 23rd Apr 2009 11:04
Link
Personally I'd get rid of the borders altogether, I think the buttons on their own would look pretty nice without the borders. You could still keep to the window system, but maybe just colour the buttons to suit each different window.

I never like the look of curved buttons and square borders, continuity is very important and I think that having round borders only when you need them would raise the bar. Perhaps have drop shadows on each button, along with the transparency, I think it would look very professional.


Health, Ammo, and bacon and eggs!
Back to top
Profile PM Email
NeX the Fairly Fast Ferret
19
Years of Service
User Offline
Joined: 10th Apr 2005
Location: The Fifth Plane of Oblivion
Posted: 23rd Apr 2009 20:50
Link
Thanks for the comments. I am going to reduce the font size, make the borders less obvious and rounded and add spacing between window objects.

Back to top
Profile PM Website
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 23rd Apr 2009 20:59
Link
please show the updated version when it's ready, nex? also, what are the 4 red-ish gradient lines above the top menu?

Back to top
Profile PM Website
NeX the Fairly Fast Ferret
19
Years of Service
User Offline
Joined: 10th Apr 2005
Location: The Fifth Plane of Oblivion
Posted: 23rd Apr 2009 21:01 Edited at: 23rd Apr 2009 21:05
Link
The character test screen showing through.

Here's a screenshot from ages ago before I added borders.



Attachments

Login to view attachments
Back to top
Profile PM Website
NeX the Fairly Fast Ferret
19
Years of Service
User Offline
Joined: 10th Apr 2005
Location: The Fifth Plane of Oblivion
Posted: 24th Apr 2009 22:15 Edited at: 24th Apr 2009 22:16
Link
How's this look?



Total reinvention pretty much.

Attachments

Login to view attachments
Back to top
Profile PM Website
NeX the Fairly Fast Ferret
19
Years of Service
User Offline
Joined: 10th Apr 2005
Location: The Fifth Plane of Oblivion
Posted: 24th Apr 2009 22:31 Edited at: 24th Apr 2009 22:31
Link
Here's a demo for you to try. It needs extracting and maybe OpenAL, can't remember. The buttons at the moment just open and close windows because this is a menu test. The window and its contents should also resize perfectly.

WARNING: This file is provided under no warranty or garuantee, implied or otherwise. Use at your own risk! I can't code in procedural C for toffee!

Attachments

Login to view attachments
Back to top
Profile PM Website
AndrewT
17
Years of Service
User Offline
Joined: 11th Feb 2007
Location: MI, USA
Posted: 25th Apr 2009 03:31
Link
Impressive! I like all the animation you've included in it--the window opening/closing looks very smooth as well as that little hand that follows the mouse. Nice job.

i like orange
Back to top
Profile PM
Virtual Nomad
Moderator
18
Years of Service
User Offline
Joined: 14th Dec 2005
Location: SF Bay Area, USA
Posted: 25th Apr 2009 11:24 Edited at: 25th Apr 2009 11:25
Link
nice, nex. definitely polished. the pointer i didn't care for much (i don't think it matches the menu. maybe a little light reflection or "lens flare"-type effect on the left side of the button would be more appropriate?), but the menu itself is slick.

Back to top
Profile PM Website
NeX the Fairly Fast Ferret
19
Years of Service
User Offline
Joined: 10th Apr 2005
Location: The Fifth Plane of Oblivion
Posted: 25th Apr 2009 12:32
Link
Might replace the hand with a stylised arrow or something. It's only there because it's meant to be usable on systems without pointers.

Thanks for your comments. I can see how much they have improved what was a naff design.

Back to top
Profile PM Website
Burning Feet Man
16
Years of Service
User Offline
Joined: 4th Jan 2008
Location: Sydney, Australia
Posted: 26th Jun 2009 09:06
Link
Looking good!

Perhaps you could clarify the window title a little more, by adding some contrasting element to the window options. Bold text, different background colour or shade, that should do the trick.

Awesome stuff!
Back to top
Profile PM Website
Back to top

Login to post a reply

Server time is: 2024-04-26 06:56:48
Your offset time is: 2024-04-26 06:56:48