I don’t have much experience with GUIs, but I have made some here and I am wondering what GUI experts have to say. Are there any elements that I should add? Should I arrange things differently? Any input or ideas would be nice.
11 Likes
First of all, I think an important thing to point out is the lack of text consistency. The size for “Each universe has different items” is much smaller than the other two TextLabels. It would appear better if the texts in the same position were the same size.
Another thing is the texts’ color stroke. I personally would remove the stroke on all of the text for easier reading. Which could create an issue with the white background. To fix this, you could easily find another solution in finding an item’s rarity; such as making the circles a certain color based off the rarity respectively. Something like that. Consistency here is key.
5 Likes
Another thing I’d like to add is that the ui header is the wrong shade of blue. I personally enjoy the shade of blue used in Death Timer.
2 Likes
The blue at the top and the curve at the top left area of the box looks pretty crisp.
I noticed that in the “Items” section, the Hats appear slightly larger than what would look right. I would recommend shrinking the size of the Hat icons (especially the Adurite Antlers).
I also think that the “Teleports” menu looks kinda boring. There isn’t really anything to look at there, just words. Adding icons or buttons for the worlds would make that section look much cleaner. You could even create icons for the worlds if you feel like it.
Looking at the interface at the bottom left corner of the screenshots, it shows the title of the location the player is in (I think that’s what it is). Removing or redesigning that area might make the screen feel more open, especially thinking about mobile players. Perhaps putting world icons or just putting a bubble around the text and making it smaller would do the trick.
Other than that, the layout looks amazing! Great work!
1 Like
Try doing a drop down text when you hover over the icons in the bottom right. (For aesthetics if you like.)
Make the blue a bit brighter as its a bit strong IMO. The green button that says open and confirm also makes the text a bit hard to see, try adding a text stroke to the text if you want. Also, I feel as though the collect GUI which shows the noobs are a bit too close to each other, you can add padding to make it space out more and some other parts of elements like text near the side.
(Sorry if it came out sounding a bit rude.)
But, overall it seems pretty good 
keep practicing and it work work out well.
Thanks for the input, I’m going to try and take all of these into consideration
2 Likes
I would probably make the GUI less cramped
Based on others’ replies, I’ve created this concept
Note the consistency, use of padding/margins, and the brighter colors. I’ve also opted for drop shadows using dual text labels because I think it looks nicer than the stroke.
I really like this concept. I’ll try to implement it, but, I’ll have to change the text position because it might cover some hats. Do you think I should position it on the top or bottom or else where?
2 Likes
You could do a hover tween to show the text and reveal upon hovering over, might not be best but is an ok suggestion you can try if you like it.
Another place you could put it is under it or, as you see @Muoshuu created, over the icon itself.
As @3rdhoan123 stated, tweening the text in and out of existence when the user hovers over the item would look quite nice, that way the text will only be there when it’s needed. This is what I had in mind when creating the concept.
ooooooo I like that I’ll try to get it done later today
2 Likes
What should I use to have the x and y padding the same on a scrolling frame. I want to use scale, but if the canvas size increases then the y axis gap would become really large. I am wondering if there is a method to do it that does not use offset/scripts. I will make a script if it is the only way.
2 Likes
The design is very neat!
The crate menu with the squares could use a revamp in my opinion like telling if the accessory is a limitedu or a limited or a regular or possibly a offsale chance in your game if you plan to use it.
For the first picture, the only parts of the UI would change is the sizing. The pictures should be smaller so they all fit in and there is no overlapping. I would also make the text smaller and move the ranking on the bottom up a little so it fits. You should also change the top right corner so it matches the top left corner.
For the second picture, all I would do is add a bar in between the different teleport options so it looks more like different buttons you can click and less like a list.
In the third picture all you should change is the width of the paragraph text, so that the word again is not stuck at the bottom. Changing this will make it look like less like a part of the below list, and more like a part of the paragraph.
For the fourth picture I would again make the picture sizes smaller so they all fit in. The “Each universe has different items” text should be a tad bit bigger to fit the size of the other texts in the same area on the previous UI. You can add underlines on the percentages and move the price number up a little bit for an added touch.
In the fifth picture you should once again make the logo smaller and move the text down so that it all fits in the circular icon. You should also add a visible scroll sidebar, or if there is nothing below then shrink it all so that the pictures fit without getting cut off.
1 Like
Besides the UI work that you already have, here are a few things that you might want to experiment with:
-Custom Player List (top right of screen)
-Set TopBar Transparency to 1 (more customization)
-Custom Chat
Games that utilize these things tend to look more developed, unique, and more playable compared to games that stick to the default player UI functions.
Again, these are just suggestions that you might like
Can you judge the updated ones(posted above your reply). Also, ignore the extra large/small hats in the items menu because those are temporary.
1 Like
The UI is looking pretty good but can still be improved.
The view of the items seem a bit inconsistent as one shows the front, maybe the side, and it also doesn’t really show the 3D look of it as it only shows the front of all the items. (Oops, just realized you said something about them, other than that, a suggestion is to show all 3 sides of the item, front, side, and top. or just make it spin which is better IMO)
For the second picture of the item packs, some things could be added to give it some pop, the text style should also be a bit consistent as from what I seen, the “Ultra Pack” title doesn’t have a drop shadow as the title of the shop does yet, in the universes shot, it has drop shadow on the text.
The universes should have the text be equal as its quite odd to look at, one being large yet one being smaller than the other text. (I think Magmaworld is supposed to be Magma World, might wanna fix that space.)
Collect looks pretty alright though the green behind the noobs looks a bit off while also making some hard to see such as the ghost noob.
Rebirth part looks pretty nice and is pretty simple IMO. If you want, add a shadow to the green buttons for extra pop but thats just if you want some. (In the end, really depends on the style you want.)
Sorry if this sounded a bit rude but other than that, nice job!
Apologies, I didn’t catch those.
I really like the changes that you made, it looks a lot cleaner.
The only real issue that I can find now is that the top of the sub-menu is cut off, or it is a scroll and there is more. If it is a scroll then I would once again suggest adding a vertical scroll bar on the right side, just so people understand that you can scroll. If it is an issue with them all not fitting, then I would either re-adjust the entire thing so it can fit that one portion, or just decrease the size and increase the horizontal space in between the icons to make up for it.
1 Like