d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Graphic Design > Game User Interface > Thread Two
Add Reply New Topic New Poll
Member
Posts: 3,797
Joined: Jun 27 2011
Gold: 5,006.00
Apr 30 2015 10:12pm
Thanks for the criticism in the previous thread found here:
(http://forums.d2jsp.org/topic.php?t=72408261&f=105)

All of your advice lead me to my newest work!
Tell me what you think please, keep the criticism coming if needed!



(Watermarked)
Member
Posts: 13,425
Joined: Sep 29 2007
Gold: 0.00
Warn: 20%
Apr 30 2015 11:20pm
Why are your highlights on the menu titles not centered with the text?
Member
Posts: 4,678
Joined: Jul 7 2007
Gold: 9,529.00
May 1 2015 07:29am
looks far better than the older versions, but again the lighting is off, better, but still off. Some things to consider:

- Unless you show secondary light sources, it is assumed there is 1 light source, all light should be coming from that source and should be obvious visually.
- You longer backgrounds have an indirect light source coming from the top, your buttons have a direct light source spotlight from the direct middle, and your inventory slots have light from an upper left indirect source.
- Your login screen has different lighting on it's background then the rest of your menus, not sure why. Stay consistent in UI design unless there is a solid reason for a change (to call attention/grab user focus).
- Your buttons text does not seem to interact with light, and they all vary in brightness.
- The bright red lining on your buttons is far too bright, where is it getting the light to be this bright? What material other than an actual light source is causing this to appear to bright? If it is a light source, it should protrude some light to it's surrounding as any other light source would do.
- Shadows being cast from a direction taper off near the end of the shadow, think about that on your longer menu's backgrounds.
- Your font choice does not match your design pieces IMO, this doesn't really say delicate to me, not to mention you want clarity on menu's and very thin text does not provide that in most cases.

Menu's generally void having abnormal lighting in most games going with a simple light direct lighting or completely ignoring lighting altogether, not only to prevent distraction and keep the user/player focused on their actual goals, but also to keep it simplified and clear to a user.

The main thing I can say is when using lighting, be consistent. I have said this at least a few times in my responses but I guess it just keeps going over your head or you don't understand what I mean perhaps. Anyways, this is still much better than your older attempts, the style is slightly better established and it has a better overall feel. Also, I am not the only one with opinions on how things should appear, if you like something the way it is or whoever you are making this for likes something the way it is, that is fine. I am just trying to give general tips and advice.
Member
Posts: 3,797
Joined: Jun 27 2011
Gold: 5,006.00
May 1 2015 08:22am
Quote (Tetu_880 @ May 1 2015 08:29am)
looks far better than the older versions, but again the lighting is off, better, but still off. Some things to consider:

- Unless you show secondary light sources, it is assumed there is 1 light source, all light should be coming from that source and should be obvious visually.
- You longer backgrounds have an indirect light source coming from the top, your buttons have a direct light source spotlight from the direct middle, and your inventory slots have light from an upper left indirect source.
- Your login screen has different lighting on it's background then the rest of your menus, not sure why. Stay consistent in UI design unless there is a solid reason for a change (to call attention/grab user focus).
- Your buttons text does not seem to interact with light, and they all vary in brightness.
- The bright red lining on your buttons is far too bright, where is it getting the light to be this bright? What material other than an actual light source is causing this to appear to bright? If it is a light source, it should protrude some light to it's surrounding as any other light source would do.
- Shadows being cast from a direction taper off near the end of the shadow, think about that on your longer menu's backgrounds.
- Your font choice does not match your design pieces IMO, this doesn't really say delicate to me, not to mention you want clarity on menu's and very thin text does not provide that in most cases.

Menu's generally void having abnormal lighting in most games going with a simple light direct lighting or completely ignoring lighting altogether, not only to prevent distraction and keep the user/player focused on their actual goals, but also to keep it simplified and clear to a user.

The main thing I can say is when using lighting, be consistent. I have said this at least a few times in my responses but I guess it just keeps going over your head or you don't understand what I mean perhaps. Anyways, this is still much better than your older attempts, the style is slightly better established and it has a better overall feel. Also, I am not the only one with opinions on how things should appear, if you like something the way it is or whoever you are making this for likes something the way it is, that is fine. I am just trying to give general tips and advice.


You're hard to please. :P
I focused more on lighting, truly.
Guess i'm just not getting it exactly right.

Personally I like how the font looks and goes with the elements.
Thanks for pointing out the login screen problem.. not sure how I didn't notice, anyways I've fixed that so far.
Guess i'll see what I can do about improving lighting so far and then move on to more components.
Thanks for the help again, tetu.
Member
Posts: 34,977
Joined: Jan 28 2005
Gold: 4,910.00
May 1 2015 09:13am
Was the cut corners intentional or a result of using the expand selection of PS? I think this would've been better made in AI. Also, the inner glow on those inside corners is distracting. I recommend making the inner glow more subtle, then using inner shadow to give a little directional lighting. Again, if this was built in AI, then the stroke around the shapes would be consistent, rather than using the expand selection or leaving room for user error. Lastly, use a different font for sure. The variation in width of letters is distracting. Research another sans serif option. Gotham is a good example that has more consistent widths throughout the font.
Member
Posts: 4,678
Joined: Jul 7 2007
Gold: 9,529.00
May 1 2015 09:15am
Like I said, you definitely shouldn't aim to please me, I'm just giving general tips and advice on how I would approach it. I very rarely am able to meet my expectations either, whether it be due to time constraints or poor execution. The main thing with lighting i guess it, you need to know how it affects a material you are using. Like the top ribbon effect you are using, what material is the ribbon? Is it matte cloth? Is it a more shiny ribbon material? look at real world items with that material and put them in the same lighting scenario you have in your design, use this as a reference not just what you might think 'looks cool' or is flashy. For the shadows on your background, you have massive shadows on the side which would indicate it is rounded on the side and then drops instantly by a large margin to a point where no light can tough it and stays that depth for a couple mm. That just doesn't make sense. Hold up a plastic container top that has a raised edge, look at how the light hits it and what shadows form. With your lighting, above lighting perpendicular, there will be a large shadow under the top raised edge because the least light is hitting there, there will be very subtle small shadows on the sides running down, and the top surface of the bottom raised edge will be will lit. Also, remember shadows aren't a static color, they start dark and get lighter due to light seeping past the initial obstacle.

Lighting is tricky, but it's the absolute most important to correctly achieve skeuomorphism, it's also the first thing the eye will pickup as being out of place or 'off.' It takes a long time to familiarize yourself with how to implement proper lighting so don't feel bad that you haven't got it down yet. Even when you do get directional lighting down then there gets to be the more complex attributes of lighting like refraction and reflected light, using different colors than white based on what objects could be reflecting/outputting light, and using multiple light sources in one piece. Just keep up the practice, it's the only way to improve.

All in all, you ARE showing progress, and that's what matters. You should feel good about that, as so many people have come to this forum, and thousands of other forums, looking for input and getting mad at critique instead of learning from it.
Member
Posts: 3,797
Joined: Jun 27 2011
Gold: 5,006.00
May 1 2015 11:14am
Quote (ericswanson_19 @ May 1 2015 10:13am)
Was the cut corners intentional or a result of using the expand selection of PS? I think this would've been better made in AI. Also, the inner glow on those inside corners is distracting. I recommend making the inner glow more subtle, then using inner shadow to give a little directional lighting. Again, if this was built in AI, then the stroke around the shapes would be consistent, rather than using the expand selection or leaving room for user error. Lastly, use a different font for sure. The variation in width of letters is distracting. Research another sans serif option. Gotham is a good example that has more consistent widths throughout the font.


Cut corners were unintentional but I decided that I like the look of it.
Not experienced in AI at all so I stuck with PS.

Font change is unanimous I suppose.
Go Back To Graphic Design Topic List
Add Reply New Topic New Poll