What can I do to improve my GUI?

Hi!

I’ve made a menu GUI. This will be availble for all the players in the game and they will be able to find out Frequently Asked Questions, Teleport to a game, etc. I would like to know how I can improve on this GUI. At the moment, I currently have 2 buttons on the left and expecting to put 2 more below the buttons. I am also going to Tween the GUI and buttons at the end, which isn’t displayed on the image provided.

6 Likes

Awesome GUI! I love the colors and style, looking great.

  1. I would make the music icon and the ? icon the same size.
  2. Move both aforementioned icons up a bit.
  3. Make the ‘Main Menu’ text a bit more bold (maybe change the font, idrk).
  4. I would definitely make the ‘Training Center’ and ‘Applications’ text more noticeable than the ‘Teleport’ text.
  5. In the right column (with the teleport buttons), I would space out the buttons equally (so that the distance from the top to the first button is equal to the first button to the second).

Overall, I think you’re on a great track! Good luck!

5 Likes

Hello!
Adding on-to my friend up there ^^ You can also add an admin GUI for admins, which can detect administrators by making a script, after making your script you may add the names and so on add some commands, if you want me to do it for you just DM me on discord

  • and3w / thegamerplane#0007
    Hope this helps your games! This also contributes for your new game! And for the administrators! :smiley:
3 Likes

Thanks for replying!

I haven’t really thought of an admin GUI, but since you gave me an idea, I will try adding that to my game. :slight_smile:

1 Like

Thank you for replying!

I will try making the icons the same size.
I am not exactly sure how I should make “Training Center” more noticeable than “Applications”. I’ll probably try another font or increase the size.
Finally, for the main menu thing, I will try making that stand out. Again, I’ll try changing the size of the font.

Thanks for helping!

1.Too rounded, I mean the buttons. Use 5px instead.
2. Do unify everything, font should be the same including the imagebuttons.
3. Round the “Teleport” button, 5px size.

Edit:
The GUI is pretty good but can be improved more.

2 Likes

Building off of what was commented, after standardizing the sizes of the Music and FAQs symbols, I would recommend throwing a square border on each (one layer behind), to portray them as clickable buttons in an unsubtle manner. It would better match the theme of your buttons on the right-column.

2 Likes

I’ll probably rework on the buttons first then add the border. Good idea anyways!

Okay! So far, I have this. I haven’t done any work on the Music and FAQs button yet but rework on those later. I will try finding another font to use for “Main Menu” as well.

Thank you all for giving me some suggestions to improve this.

2 Likes

I don’t like the Columns of the GUI and I really hate how the FAQ “?” Icon isn’t as big as the music icon. The text on the “Admin” and “Menu” icon are touching the sides of the holder and the UI isn’t spaced out evenly, as well as below the Applications GUI there is a lot of space I’d recommend you fill the space up, and above the training center id also recommend moving it up to have the same amount of pixels on the side and the top.

1 Like

I like the design of the GUI. A way to improve it is to add effects and a close button and maybe center the text of the title in the Training Center and Application frames. Otherwise, they’re good! :+1:

1 Like

Looks good so far. The three things I instantly notice are:

1) The Music and FAQs icons should be the same size and be spaced from each other (currently they are partly clipping)
2) The Music and FAQs text (which I assume are images) and the other text are different fonts, one being a cartoonish font and the other being a sci-fi font.
The cartoonish font is bold while the sci-fi font is thin, plus these styles are kind of the opposite of eachother. Additionally the cartoon text is all caps while the sci-fi text isn’t. Perhaps try to be more consistent with the text style (unless that is what you are going for).
3) Either disable TextScaled on the buttons in the lower right corner or adjust the size so that the text size looks the same (if you’re sizing your UI with scale and aspect ratio constraints).

1 Like

I am getting a newer FAQ icon uploaded. Anyways, thanks for the suggestions.

1 Like

Thank you for the suggestions! :slight_smile:

Actually, I have one more suggestion. The column is too thick, 2-3 px is enough.

1 Like