Join the Webstudio community

Updated 2 months ago

UI suggestion for Webstudio. I hope it helps!

At a glance
The post shares a Figma prototype for a web design tool called Webstudio. The comments discuss the design, with community members providing feedback and suggestions. Some key points:

- The design is generally well-received, with comments praising the modern and nice "vibe".

- However, several community members point out technical limitations and challenges in adapting the design to the actual Webstudio software, which has different requirements and constraints compared to tools like Figma or Framer.

- Specific issues raised include the use of an infinite canvas, the breakpoints and icon layout, the limited space for tabs and controls, and the overall complexity of the Webstudio UI compared to simpler tools.

- The community members suggest that while the design has some positive elements, adapting it to Webstudio would require significant work and may not be the best approach. They recommend focusing on improving the existing UI based on smart principles and adaptive design.

Useful resources
O
M
37 comments
I like a lot about this design !
whats the inspiration framer?
do you want my input on this or was it little fun with no intention to experiment more?
A little, yes, but in general I looked for references in Penpot 2.0 (Open source Figma alternative), Framer and Webflow
It would be interesting to give your opinion, the idea was more of a design suggestion. But a few tweaks could make all the difference!
A lot of this won't work from technical stand point.
  1. you copied from software that uses infinite canvas, webstudio uses responsive canvas, you don't have space for resizing handles
  1. breakpoints with those icons don't work when you have ability to change breakpoints in any way, there is also no real world definition of what's mobile whats tablet, webflow's approach to this doesn't really work if you have full flexibility and also isn't actually correct at all, the icons are mostly misleading
I think it would be easy to adapt to the current model (removing the idea of infinite canvas from the concept, which is something I particularly like).
  1. top left space next to the logo has different elements right now - selecting a page which allows you to select pages in preview mode too.
  1. icons on top left won't make sense in webstudio, big gap between figma/penpot and building real software
  1. 3 tabs: pages, layers, assets - won't work because we need many more tabs, tabs don't scale well in such narrow space
Many of these points can be achieved, as Framer does, but I believe the problem is the work that would be required to do so.
Framer has a much simplified UI compared to webflow/webstudio
I don't think it has all the things we do
or things we intent to have
Yes, even one of the points is that some features are very hidden because of this
e.g. framer has infinite canvas and shows all breakpoints at once, that changes a lot of things

e.g. our breakpoints selector is made so you can not only have any breakpoints, but they are also structured in a way that always shows where is which and indicates currently active one
I think there is a chance to improve our UI but not by slapping framer on it
Its much more nuanced
To say positive things about your take
  1. generally the vibe feels modern and nice, (wouldn't go for this color though)
  1. good catch on the chevron next to menu logo, we were planing to add it too, many don't realize ther is menu
In terms of colors, do you think it would be interesting? Or design style, without having to change the structure. Regarding icons, borders and others
  1. the size/scale button - we were ourselves a bit torn between current and positionig it next to breakpoints, I don't remember the exact decision there, might need to think again
I am not very happy with our icons and I am not sure why exactly, maybe they are too thick.
By the way, is there any estimate of when the animation presets and the resources for them will arrive?
I can only say we need to fix/implement a bunch of other things first, even more fundamental than animations, so not in the next 3 month
Right! And also because of the way it was built it's not that important, as we can animate the class using html embed or css
borders, colors, some spacing can be changed easily once we know what we want to do
There are also other challenges in the style panel, like compactness of the controls, taking too much space and too much visual noise in the style panel because of all the borders that I would like to address.
Also the settings panel with variable input widths for short and long content looks like shit in some cases, e.g. vimeo component
Attachment
image.png
These are bigger issues that bother me
Our problem there is that we want to keep it automated. Meaning not build special UI for each field, so we need to build it based on rules and info we know about each field. Because custom made UI for each property is not possible when you have hundreds of different configurations.
It has to be based on smart principles and adaptive design
Add a reply
Sign up and join the conversation on Discord