Webflow — Navigation Panel Redesign Concept
I've been using Webflow for a while now and love it. I especially love the recent rebrand and UI refresh. Lots of improvements all around.
As I use the Navigator quite frequently, I think there's room to potentially improve the communication of hierarchy and scannability of nested elements. I was motivated to take a stab at how this might look in practice. Certainly a lot of edge cases to consider as well as several key challenges:
What kind of visual tools might we use to communicate depth and hierarchy effectively?
How might we avoid obstructing the user's flow state and primary jobs to be done with any new patterns we introduce?
How might we ensure any new patterns introduced are accessible?
There's much more to consider, but to get the conversation going, I thought it would be fun to take a pass at this using degrees of neutral grays to communicate depth, subtle indentation and some key color to communicate hierarchy and layer types (there's a lot more to explore here especially).
As a bonus, I included a distinct "Add Layer" button to the Navigator panel which is intended to add a simple div block to the end of the list. If this concept hits, I'd love to explore a way to maybe configure this button to add a specific layer type depending on the type of content you're designing for.
What do you think of this concept? Is this an improvement or does this make things more confusing?
