Show off your UI designs

I changed the time and speed of the animations in my game, I hope it is better now…

1 Like

The animation time is great now, I love it.
I’ll go give it a full review new.


MAIN MENU
Suggestions

  • When you click the speaker in the bottom left you should move it right a little so it just makes the “volume bars” appear instead of moving the speaker left.
  • When you hover over a button it should have some sort of animation on the button and/or the text that comes out of the bottom of the button.

GAME LIST MENU
Suggestions

  • The text that says “List” looks out of place, try moving it a little closer to the home button.
  • The Game List Menu icon in the top right corner whilst on the menu is not alligned with the white box.
  • The padding around the bottom white box is not equal, you should fix this.
  • Shrink the text a little, when emojis are in the name of a game because of the size they are very low quality.

Bugs

  • When you are scrolling up & down in the ScrollBox you sometimes get put into first person.
  • The ScrollBox is too long leaving quite a lot of whitespace

INFO MENU
Suggestions

  • The text is a little too big, it is too “in your face” and obnoxious.
  • The “My other games” section looks empty, the two buttons to the games “Welcome to visvisjes profile” & “Free build” don’t look like they are under that heading and it took me a moment to realize they were actually the games - I was close to saying here to not have the section empty.

MORE MENU
Suggestions

  • The text is a little too big, it is too “in your face” and obnoxious.
  • The link in the box is too close to the edge, make the text a little smaller.

SETTINGS MENU
Suggestions

  • There is quite a lot of whitespace on this entire UI that should be removed or filled with something.
  • The toggle boxes are not straight and once they are clicked you see it move.
    • You should add a tween animation to the box, it’s a little too sudden at the moment.

SEARCH MENU
Suggestions

  • The ‘Last Result’ box is empty on the first time you run the search box - hide the title until it has conent underneath it.
  • The magnifying glass is very low quality once it’s zoomed in, you should get a higher quality image or hide it.
2 Likes

yo thanks for the full review, some issues are known doh I will try to fix it in the future!

Here are some explonations or questions.

MAIN MENU

  • the volume speaker I didn’t notice at first this should be an easy fix.

GAME LIST MENU

  • I was planned to make thee text smaller and add another section at the left side where you can see full detail on the game where you click on
  • thanks for telling me the bug of the first person view
  • the scrolling frame with the white space is weird because I just changed it today and in studio there isn’t this white space, I will try to look for a solution

INFO MENU

  • I don’t quit get it with the 2 games but I will try to change it

SETTINGS MENU

  • The white space is ment for more settings in the future but if you don’t like it then I will make it smaller
  • I am looking for new toggle buttons because at the moment I made it that there are 2 images with these buttons and when you click on one the other will dissapear and then you have the problem with these “moving” images

SEARCH MENU

  • the last result box, I will try to fix it with datastores where it will save your last result for the next time you join back
  • the magnifying glass is great quality but Roblox compress it so much that you can see the individual pixels and I don’t think I can change that. I also don’t want to remove the glass…

I will reply on this when I made these changes!

2 Likes

Yeah, I understand your pain. That happens, you’re best just making your own or using an existing framework’s like Roact.

2 Likes

Some simple stats UI that I’ve worked on :smile:

5 Likes

It’s a little hard to see what is going on since it’s so zoomed in, could I see it as it would be if it was in a normal game?
Also, the circle with the pixel art coin symbol is too close to the bottom so it looks off-center.
What’s the dark gray line at the borrom for? I think this is the cause of the issue there.

2 Likes

Here Is the UI in the normal form.

1 Like

It’s a little big and “in-your-face”, make it a little smaller, I also feel like it’d fit in more in the bottom left hand corner.

TODO list:

  • Remove the rounded dark gray box at the bottom.
  • Make everything alligned vertically.
  • Make the box smaller
  • Move the box to the bottom left.
2 Likes

I have been working on a main menu based off of ‘Tom Clancy’s The Division 2’, I made it completely in Roblox Studio, and plan to use it for an SCP game.

https://gyazo.com/20c167e6f3b1c419af614533fff46270

I am also making different UI’s with the same theme, such as the player list you can see in the top right.
I would appreciate any feedback or recommendations you have on my post here.

51 Likes

How were you able to get that affect with the camera focusing where the mouse is with the tween?

2 Likes

Some more GUI’s i made:

And a ripple GUI:
ripple2

29 Likes

I unintentionally created a feel similar to Windows 10 when I built this full-screen UI, so then I made all the bars and panels transparent.

UI Style: Cartoony glass?
Programs Used: Roblox Studio
Pictures:


3 Likes

Probably storing a cframe, and getting the mouse’s position each frame and then performing this

local starterCF = CFrame.new(0,0,0)
local mousePos = Vector2.new(100,50)
cam.CFrame = startCF * CFrame.FromEulerAnglesXYZ(mousePos.X / 10, mousePos.Y / 10) -- 10 is just a smoothing number which would have to be changed
4 Likes

image
Contrast issue.

2 Likes

It’s just a concept and the colors aren’t right. It was mostly to test how much I could do with tweening.

1 Like

Based on an iPhone X with different button placement and a custom Apple logo (Roblox logo with a bite out of it). Yes, I know Rople doesn’t sound that good. : )

Don’t copy pls

11 Likes

Here’s an update on the support items inventory.

3 Likes

Don’t forget the iconic iPhone X notch.

2 Likes

the new update added UI gradients!
image

doesn’t look nice but it demonstrates it ok.

noice99

Click here for the release notes.

11 Likes

It isn’t supposed to be a copy but thank you for the suggestion :smiley:

1 Like