Feedback for a builder UI layout

I’ve created GUI that is meant for a building tool that will be a set layout for how the elements will be positioned and sized where I then decorate it since I’m not that skilled with UI and went with a layout then decoration approach.

I’m also here considering the user-friendliness as I am trying to achieve the most simple and easily understood UI I can.

Block is the shape of the part.
Type is an interchangeable value correlated to the part that gives it an attributed property.

These two properties ^ here are changed by pressing the button correlated to them or their respective hotkey which changes Block to Cylinder to Ball and similarly so for Type with different values (except I didn’t set something for Type for now so it just says Type).

The frame shows the properties a part has relevant to what I want. Shape, Type, and Material will use a click and select similar to that button you click to search all categories in the DevForum.
image

Pressing Color opens a separate frame that I plan to be to the right of the frame for a color wheel and describes the Color3 property of the part.

More details

The entire thing is crafted in Studio and no third party software has been used to create any GUI elements. I might consider using Adobe XD though if I should use any third party software for UI elements that I can’t make in Studio like blurred objects.

Text Size

All text is using TextScaled & TextWrapped except for the Color button. There is a UITextSizeConstraint for some objects like Cast Shadow, Transparency, and Reflectance.

Screen View


Here is the layout:


Now, your feedback.

2 Likes

I like the idea. Simple and nice. How would the buttons work? Like Shape and Type. Is it going to tween the whole gui or overlap the other button? If that question makes sense.

2 Likes

I like the layout. It’s simple and straight to the point.

One suggestion I would like to see is if you replace the button with icons rather than using words because of the wonky font size (you can use Interface Tools). Also, I would assume you’re using zSlice for your rounded corners, you should switch over to UICorners to make the rounded corners more smoother which is in BETA.

1 Like

Actually, I am using UICorners. There is no 9-slice involved.

The reason I am using text is because I can’t make icons myself. I wish I could use icons but then I have to know how to actually make them which, I don’t. I guess I’ll give Interface Tools a try.

@daslick it just changes the text on the button when you click on it. For example, pressing the part where its Shape is gonna change from Block to Cylinder to Ball and again. It basically changes the text to what shape you will have. No tweening or GUI movement involved.

The interface tool plugin comes with a variety of material icons. From scale icon, to typeface icon, and so forward. I’m not a programmer myself, but you can use a ‘imagebutton’ if you want the image to have a button (it works the same way as a textbutton)

Some examples of icons that are contained in the Interface Tool:

1 Like

I specifically can’t find any of them that’d be good for Position, Size, or Rotation which I’d like to represent in icons atm.

I however don’t have a way to turn Shape or Type hotkeys into icons since they have interchangeable text unless all the shapes had icons and I can’t find any real icons that represent the Roblox shapes like wedge, block, ball, and cylinder.

I also notice the Search feature is horrible at actually finding things I want. I can put in block and get a cup or X.

1 Like

I love how it is straight forward and not like other Ui’s where it is super confusing to operate them. The keypad idea to could help people without mouses operate it too. I love it. Maybe add some color though, and maybe fix the font, and border. Other than that, I feel like this is great and other games/plugins with a building tool should implement the simplicity like this! <3

1 Like

Thank you for your insight, what do you mean by fix the border & font? I realize I might be using inconsistent text using font bold or light SourceSans but it’s not two different fonts.

1 Like