For a product just shipped, I needed to separate a single horizontal toolbar into 2 distinct parts: the first for file operations, the second for editing/navigation operations.

Because I added the file operation buttons last, I hadn't added the code to paint the gradient on these for the '3d' effect. It then occurred that these new buttons had a subtle 'sunken' quality that helped differentiate them from the rest.

The other 'benefit' seems to be that the right part of the toolbar appears as if it could slide over the top of the left part (to reduce clutter). Does this work, or does it seem too contrived for what's a simple toolbar?

The toolbar:

enter image description here

1 Answer 1


The images on the right would indicate to me an inactive state or some sort of sub-dominance to those to the left; it doesn't indicate that it can slide. That is my subjective opinion of course, but generally convention is that inactive states are greyed or faded and that's the metaphor you're messing with here. Be careful.


Increase by 2 or 3 px the distance between the function sets

Use different background colours to indicate different functionality a la windows ribbon.

hope this helps!

edit: I also note that your LHS icons are very colourful. I would guard against that and use colours to delineate different functions

  • I see what you're saying about the inactive state, it's unfortunate that I took the screenshot when there were so many disabled icons, but I see now that some of the lhs icons are too bright. It's obvious now that I need to look at this design again.
    – pgfearo
    Sep 12, 2011 at 15:16
  • Agreed. Sinking the buttons confuses the metaphor of the button itself, where clicking is 'pushing' the button and the sunken look gives it a sense of being pushed. I wouldn't give up on playing with this idea, but tread carefully on established ground. Sep 12, 2011 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.