New Style Panel Feedback

The change in style makes it more difficult to see properties. I circled two example areas. In the old version, I can clearly see what is selected by the darkened button. In the second, the dropdown at a glance looks the same no matter which option is selected.

Looking at it further, I think one of the biggest difficulties with the new design is the misuse of contrast. In the first, dark denotes a selection and everything else is 50% grey. In the new design, there is no change in contrast for selected options, and the alternating contrast throughout makes it difficult to read (design should convey meaning, and it no longer does in the new design).

I guess I’m having trouble understanding why something that wasn’t broken is being “fixed”.

edit Maybe part of it is that the combined panels were taller before, and now the dark headings (Layout, Position) etc., really break it up, and are the same color as editable fields.

7 Likes

Agreed — it would be nice to have an Arrange button on the color palette which would display all swatches in a vertical list.

From there, you could drag-and-drop to sort — or click buttons to sort by hue / brightness / swatch name / whatever.

Would also be great to import swatches from Adobe CC, Sketch, etc.

1 Like

Reporting a few visual problems with the fonts dropdown:

screenshot

(click image to view uncropped)

  1. red rectangle
    Long font name runs off the righthand side of the viewport

  2. yellow rectangle
    Graphik font displays incorrectly in list (erroneously displayed as a serif typeface)

  3. blue rectangle
    Long font names stack up vertically and overlap

——————————

Also, please bring back:

  • math / calculations in Style Panel fields !
  • incremental padding & margin adjustment ! Can increase by 1 unit at a time in the current beta, but can’t reduce.
  • the center element button ! Could it just go in the center of the margin & padding controller? There’s just a blank space there now !
3 Likes

icons with the lines should need to be a square box… because also an image can be bigger at the right side… look to my suggestions


What do you think?
simular icons but with image hide/show included!
Students need to know overflow is also for pictures!
thanks to make it more visual understanding!
Karel

@stateless thank you for clearing that up for me. The big reason why we moved to the dropdown is to give us more room to share helpful tips with our users (especially those who are not as familiar with Webflow as the group here). We are exploring how we can maybe add a few quick actions through Quick Find to help make this transition better.

@timcaffin Thanks for the bug reports. I reported them up. BTW I don’t think we’ve ever allowed you to decrease by 1 unit. It’s a nifty idea though, wanna share it in the wishlist?

@KarelRosseel82 Thanks for the inspiration. I’ll move this up to our design team.

1 Like

@FilipSipos, z-index now has a limit of 9999999

3 Likes

Harder to use. I like the old panel just fine. :confused:

1 Like

Same thoughts here as well.

Frequently used tasks have been put behind nested UI or gotten a lot more complicated, I’d much rather scroll for days vs increasing the amount of clicks needed. That’s asking for early carpal tunnel syndrome.

Also, what is up with the new overflow icons (amongst others)? I can’t make head nor tail of them. IMO the previous icons where very descriptive compared to these.

Overal the new interface has made my job a lot more complicated. For something that was never asked for, whilst there are many QoL updates hundreds of users have been practically begging for the last year(s).

Please consider this as “though love”; I love Webflow and make a large part of my bread with it, but I hate to see it become the new Wix.

Edit: Almost forgot, but please bring back the ability to use math in the panel’s value inputs.

Sad to say I’m feeling the same way. :frowning: Having everything front and center in the previous version was much more efficient workflow-wise for me. Too many clicks now and I echo the confusion around the overflow icons. My brain keeps seeing them as text centering options … :stuck_out_tongue:

Thanks for the explanation!

I agree with Dram though, I think 2 lines of icons or even just leaving out the top used ones and have a “more” icon for others would be much better for the workflow than using the drop down. We use these actions way too much to be hidden on a drop down all the time.

And please, bring back the center icon (0 auto) on the margin and padding part, it was super useful!

I also quite liked the display buttons with the devices, it made it very easy for a non-dev person to understand and work with Webflow.

1 Like

Absolutely agree here. I’m feeling this contrast when I’m working with the panel and I need to overthink when to stop. I used to be able to clearly see where I am without reading anything, now I find myself working slower looking for the options. There’s definitely something about the contrast and selection consistency that is causing a longer cognitive processing.

I hope they fix this!

1 Like

Hi everyone! A few updates:

  • The fix for the background positioning issues has been shipped. There were a lot of edge cases and we think we got all of them, but would you be able to test and let me know if you still see any problems?
  • Overflow will be seeing new icons. You should see these in your designer by tomorrow the latest.
  • Math inside the inputs are coming back. It’s in QA now and will hopefully also ship today or tomorrow
7 Likes

:+1:I can see the new icons.

43%402x

6 Likes

The scroll icon look more like “expand vertically” or something to that effect. Old icon depicted those “always on” scrollbars in a more familiar fashion.

3 Likes

With the new panel if we select any positioning that allows us to change element’s position (all but static) and change top, right etc position these changes will not reset after we alt-click the position title (to clear styles). This results in being unable to quickly clean all positioning from one or another states, and forces us to alt-click every position number to clear everything which again adds more and more clicks.

This is what I mean:

old
com-video-to-gif(1)

new
com-video-to-gif

3 Likes

For those who requested for bring math back into the inputs, well you have it. You can now do math in the inputs in the new style panel!!

@dram thanks for that bug report! I sent it up to our engineers. Keep in mind that top, bottom, left, right values won’t do anything unless position is set to something else outside of static. In other words, it won’t affect the position of your element, though it does add unnecessary code weight.

5 Likes

Well, there you have it, more reasons to fix this behaviour :slight_smile:

I do also because students has more problems to understand to find everything.

I second this. It should be about avoiding clicks, and you quickly learn the symbols.

1 Like

I also agree. The old UI allowed for quicker access (less clicks) and better visual feedback.

1 Like