Webstudio
Log in

Join the Webstudio community

Updated last year

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.

HHolger
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.
O
H
M
17 comments
OOleg Isonen
gotta see what it looks like with the label buttons, these are actual buttons in reality
OOleg Isonen
I definitely prefer the tuned down border color
OOleg Isonen
Not sure about boldness of the labels, feels like too much
OOleg Isonen
I would almost not bolden them at all
OOleg Isonen
right now labels weight is 500 vs inputs text 400, so slightly boldened
OOleg Isonen
onn one hand its logical to bolden the labels, but on this panel, it becomes too heavy due to the amount of them
HHolger
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.
HHolger
Text set to 500.
Attachment
Board_2.png
OOleg Isonen
I like how it looks
OOleg Isonen
not sure about separator
OOleg Isonen
I think using lines as separators ma look good, overall the UI will still depend on some lines as separators I think?
HHolger
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
HHolger
Was already in the Design I modified.
OOleg Isonen
I think the light line looks best, I would try to make it all the way through to see which one is better
MMrShrek
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?
MMrShrek
Attachment
image.png
MMrShrek
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