Join the Webstudio community

Updated 9 months ago

Grouping inputs and their titles

At a glance

The post discusses an overpainted version of a UI design, where the titles have been moved closer to their corresponding inputs to emphasize their relationship. Community members discuss various aspects of the design, such as the boldness of the labels, the use of separators, and the overall appearance. Some community members prefer a more subtle approach, while others suggest using lines or dividers as separators. There is no explicitly marked answer, but the community members provide feedback and suggestions to refine the design.

Here's an overpainted version with Titles moved closer to their inputs to emphasize that they belong together.

Grouping doesn't look ideal in sections with several stacked inputs. The Title currently sits a bit closer to the Input it belongs to, yet this to me does not look deliberate enough

The reason for the current choice is likely giving some breathing room for colour coded Input Titles, which is a valid concern, too.

Tried sharpening low contrast borders slightly, too.
Attachments
Board_1.png
Board.png
O
H
M
17 comments
gotta see what it looks like with the label buttons, these are actual buttons in reality
I definitely prefer the tuned down border color
Not sure about boldness of the labels, feels like too much
I would almost not bolden them at all
right now labels weight is 500 vs inputs text 400, so slightly boldened
onn one hand its logical to bolden the labels, but on this panel, it becomes too heavy due to the amount of them
Hehe, I tried to replicate the original boldness with the screenshot I had. I only had the choice between 500 and 600. Getting bolder was not my goal.

Indeed, I even decreased the title size to match the text size in inputs. So I tried to de-emphasize the titles.
Text set to 500.
Attachment
Board_2.png
I like how it looks
not sure about separator
I think using lines as separators ma look good, overall the UI will still depend on some lines as separators I think?
I find Dividers less harsh, when they don't take the full width. Dividers at any rate require extra spacing

If the distance is sufficient, one could also leave them away, without breaking the panel into cards.
Attachments
Artboard_1_copy.png
Artboard_1.png
Was already in the Design I modified.
I think the light line looks best, I would try to make it all the way through to see which one is better
It could be done in such a way that the light lines are there but only to divide the groups that can be collapsed and expanded?
Looking at the designs from @Holger , it looks like there a thin even lighter outline to the inputs. It might not be possible to move the labels closer to the inputs themselves without reducing the click-area of the labels.
Attachment
image.png
Add a reply
Sign up and join the conversation on Discord