Style Panel Beta Feedback

[DISCVRD (Marcel)]

Hey

First up, I really love webflow, the idea behind it and your passion for this product - keep it up!

I tested the new styles panel beta while working on a new project. I like that the design gets a little more modern but I feel like its putting looks over functionality on a few specific parts.

The dropdowns - I actually switched back to the old version of the style panel just because of this change. Having dropdowns instead of simple buttons is a pain for me. Having to click twice really slows me down while working. If I misclick the wrong dropdown item, which sometimes happens , I have to click 4 times to change one setting.
I understand that you might have done it because you wanted to label the option for easier understanding. It’s a good idea but in my opinion, it could be done better. Maybe implement a switch where users can switch between buttons with just the icons or a dropdown with labels beside the icons. Beginners would maybe use the labels while getting familiar with the style panel and more advanced users would have an advanced option that simplifies the style panel by removing labels and giving quick access to everything without having a description beside it.

That way it might be easier for beginners to learn and become familiar with webflow and offer a quicker workflow for advanced users as well.

State switching - I know this isn’t new to the style panel beta but it’s a wish I had for a long time now. It’s another example of the issue I addressed before this. To change a state of an element (hover, active, …), you have to open a little dropdown every time. I would love to see this become a list of buttons, something like the old display buttons. That way it would be quicker to change between states.

Style Panel Navigation - As new functions are getting added, the style panel gets bigger and bigger. You already provide navigation for the panel tabs, that lets you change to the interactions panel, the element settings, and so on. I would love to have a vertical navigation menu for the styles panel. I’m not a big fan of scrolling up and down the styles panel all the time, so a little vertical navigation bar with buttons, that quickly scrolls you to a specific group of functions would be nice and time-saving.

If I have more feedback or ideas for the new style panel, I will update this post.
Hope you can take something out of it.
Either way, webflow is a great product and you guys should continue the great work you are already doing. I think graphical user interfaces will replace all code in the future, so you’re on the right way.

Have a good one,
Marcel

PS: If you want, I could provide you with some layouts of what I’m envisioning when I find the time. Helping great products like this one grow and become the best version it can be, is one of my greatest passions.

[dram (Alex Dram)]

@DISCVRD

To change a state of an element (hover, active, …), you have to open a little dropdown every time. I would love to see this become a list of buttons

A million times this! One of the most used actions for me is adding small feedback hovers to the interactive elements and that takes too much time clicking the dropdown (trying to aim at the tiny ‘states’ button), clicking the state, and doing everything again to return to the normal state.

I’d love seeing ALL most commonly used elements being 1 click away, and unfortunately latest beta goes even further from this with dropdowns for the most used element options.

[radmitry (Dmitry Ra)]

Thanks for posting this @DISCVRD

Totally agree, all these dropdowns…it seems like the aim was to save some space, but actually when I switch between current and beta, it takes just the same space vertically on the toolbar.

The position toolbar is odd, espcially with this X bumping out your face

Positioning of background images in Style beta is very inconvenient. I liked how you can drag the image up and down, left and right freely but dragging the adjust buttons…new one is something odd.

[Ali_Abbas]

First off, thanks for implementing most of the requests that people have been having with the new style panel.

I have been using it and am noticing another issue that needs to be fixed. The Spacing UI (margin, padding) used to be very intuitive, but now it’s frustrating to use. For example, it’s hard to click the values and I often accidentally click on the bar making the value go up by one. The previous version made it clear that you were clicking on the value and not on the drag-bar because the value and the drag-bar were separated. In this new version the value is right on top of the drag bar. Please revert the spacing UI back to the original. The Center Element button is also missing. It takes much longer to center an element now.

I went ahead and redesigned the old spacing ui to make it take less vertical space so now it’s just as tall as the new ui. This is my request:

[Marci (Marcel)]

Is anyone UI/UX related and responsible on the Webflow team reading here?

There’s so many borders, no whitespace and ton’s of inconsistencies now. Sometimes you can scrub values like in padding, but not for font sizes.
Experiencing exactly the same pain over here and to me they’re turning their “IDE” into a React nightmare that’s not really enjoyable. (Still having occasional UI crashes and focus issue with popup dialogs that got poorly implemented).

Waive all my Webflow payments for a year and I’ll write an in-depth analysis