Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I'm trying to design a node tree/navigation, which uses colours to denote the types of the tree node (which I thought was a useful pattern) and am struggling to find a way to show the active node because of the use of the colours.
This is for a web application that must support IE8+ amongst other modern browsers.
Does anyone have any ideas?
This is the tree:
One option is to add an outer stroke to the selected node. A few quick ideas:
You can keep the color of the nodes and add a prominent color not used in the tree like this:
Use the node color as the outline color and use another color as the new fill. This is more prominent and keeps the original color:
You could take the idea further by highlighting the selected path through the node tree. This may be harder to implement depending on how the web app is built, but maybe not.
Or for a more subtle effect you can use the node color as the outline and remove the fill color:
Maybe making the Active branch a lighter color and adding a shadow (à la Material Design):
