UI Design - In need of feedback [UPDATED]

Recently I have got into UI design, and would love any feedback you can give. Also UI ideas would be greatly appreciated.

Heres my work:







14%20pm


Sorry for the watermarks but my clients said I could only upload with the watermarks.

Thanks to anyone who gives feedback! It’s very much appreciated!

3 Likes

This is the right place to put it don’t worry!

Good job on the UI but I believe this bar could be refined (Blue & Green) image
Would be good to compliment the design you’ve got going on throughout your UI. You can make it circular on either ends.

Personally I don’t like the idea of translucent UIs, it doesn’t look modern in this case

image
This is quite “shouty” you could at least remove the underlined text and coat “VOTE NOW!” with a circular body image using the slice property.

Good job on the UI overall! :+1:

2 Likes
Summary

Some things I would consider changing here:
Change the horizontal size of the title background so it matches the other background.
Make the font either a different color or bold, so the title stands out.
Try experimenting with 9-slice, maybe upload your own. Your corners look a little blurry.

Summary

The edges of the background of the images don’t contrast well with the main background. (Also it doesn’t match the style of the first and third images you posted.) I would recommend making it white like the others.

Also I noticed you’re using different fonts across the frames, I recommend using the same font family throughout your game.

Other than that, @uJordy gave some good advice.
I like that you used an actual image of the gun instead of using the name of it.
Margins also look quite alright across your UI.
Nice UI, keep practicing.

2 Likes

Thanks for the advice. I have no clue how to use slice though.

1 Like

These were my first two UIs ever. Thanks for the feedback. In terms of corners, I use roundify. Not sure if there’s anything better. As I said to uJordy, I dont know where slice is, or how to use it. They’re also not all for the same game.

You can use this tutorial for more information. It basically makes it easier for you to use your own UI assets and make it into your own sizes without it looking stretched or worsening in quality.

image
I think its best you align this top bar with the body of the frame because it looks a bit odd.

Good use of assets for the Quests UI, just be careful that it can be easily hard to see black when there’s no background frame behind it. Its best you put a frame behind that so its easily seen, if not make use of the TextStrokeColor3 and TextStrokeTransparency image

If you use White as the TextColor, Black (0,0,0) as the TextStrokeColor and 0.75 on the Stroke transparency gives a decent effect:
image

3 Likes

Oh that looks really good. Thanks a lot.

1 Like

Updated - 3/1/19

I like the last UI too, looks clean. Nothing to say about the design of it, however, something to say of the icon itself is its black outline. Because of how Roblox processes the upload of pictures, it makes these black outlines. Its easier to see on a white background.

image
You can tell the slight black outlines which would be better to conceive if you zoom in to see the individual pixels.

You can use this tutorial to remove this issue

1 Like

Thanks, but that wasnt the issue. The image I took from google had a slight black outline.

I’m sure you can still use the same thing to remove the issue

Id probably have to go into an image editor to do it.

1 Like

Yeah GIMP

Updated - 3/3/19

Really good looking User Interface if I do say so myself!

Updated - 3/3/19

1 Like