Mobile app version of vmapp.org
Login or Join
Michele215

: Critique: Color/Depth for Compact Left Navigation I have a compact left navigation menu that I've developed but I can't seem to get the coloring/depth just right with the different levels it

@Michele215

Posted in: #Color #Critique #InterfaceDesign

I have a compact left navigation menu that I've developed but I can't seem to get the coloring/depth just right with the different levels it has.

At the basic level it looks like:



When you expand the second level:



The last menu expand ( typically not used ):



I want to illustrate a clean menu, I've played around with removing the shading and going all flat with a pop of blue like:



but wasn't happy with the last menu subset. I'm shooting for a blue/dark grey color scheme like:



Any suggestions on how to accomplish the shading on the nested menus?

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Michele215

4 Comments

Sorted by latest first Latest Oldest Best

 

@Phylliss782

Ended up using some gradients to create the effect and adding a bit of pop with the highlight effect, thoughts?

10% popularity Vote Up Vote Down


 

@Murray976

The main 'issue' (not really an issue though) that I have with the depth is due to the divider lines in your submenues:



The drop shadow is underneath the lines, when it should be on top (with some transparency applied to it), which causes the lighter line to appear even lighter.

I'd try that first, moving the shadow to the top. However, something else that might help is to get rid of some of the lines complexity. When you remove them entirely, the depth looks much more realistic, because there are less levels to it:



So instead of lines with a shadow, you could have plain solid ones:

10% popularity Vote Up Vote Down


 

@Goswami567

Use very slight gradients, from left to right, in each column of your views. This will give you the delineation you're seeking.

10% popularity Vote Up Vote Down


 

@Martha945

Honestly, I like the first ones (the blueish ones) as-is. The only suggestion that I have is to make both drop shadows match. Right now, the right one is smaller and darker.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme