How to make extremely Clean UI while keeping good UX

Introduction

Hello, I am @Dev98799 and I am doing a tutorial on clean UI and UX. By clean I mean UI that won’t disgust the user, I see these multiple times in games and I hate it. I do sometimes see great UI but UX that is like hell, extremely laggy and I can barely navigate. I am not going to point out and give links to bad examples but I will use screenshots without giving the name of the game. I will infact give some great examples that look good.


Tutorial:

UI vs UX

UI tends to go more about design and looking good, while UX is accessibility, functionality, and not a cluttered design. Keeping these both in balance is your goal that I will help you reach.

What makes Clean UI and Good UX?

A lot of stuff do, like colors and gradients that go well together perfectly, padding that makes sense, shadows in the right place, strokes that look nice, fonts the aren’t ugly (I think you know which ones I am talking about). And for UX quick accessible non cluttered and well layered UI.

Colors

Okay now that we have finished the introduction I can now actually show you how to do this. First up I will talk about colors, when you make a UI you want to keep a constant color scheme, but how do we think of one. Well adobe has a really good one here for free! Also if you want to do a black background color I would recommend RGB (35, 35, 35), and if you are wondering about the roblox color theme you can see their entire UI theme here. Anyways here are some screenshots of me using adobes color tool:

This one looks really cool and could make a pretty good theme when combined with black.



This is more of a “cute” color scheme and would go very well with white

Layout

When making a good UX, you need a memorable and non cluttered layout

Memorable

For an memorable UX one example is in a login page the Sign Up and Log In are always in the top, if you do not keep one their the user will be confused and will not know where to login or signup.

Primary and Secondary

Let’s say we have a Finish button and a Cancel button, like shown below:

Now if we are the user, both the buttons look really similar and we might accidentally click the wrong one so let’s change it so the cancel button does not have a background like shown below:


And just to make this even cleaner let’s give them colors


See the difference? It’s a big difference and can make a huge difference.

Fonts

(fyi: this is not apart of the layout section where Memorable and Primary and Secondary were)

Font Styles

Okay when you are using a font, my biggest pet peeve is over expressive fonts. For example:


:face_vomiting::face_vomiting::face_vomiting: WHY?

Okay honestly, do not use fonts like this as your primary font unless you want to get hate, you could use this font maybe for like a background object, like a book which isn’t supposed to be read it and it would look pretty cool having a font like that but as a primary font?!?!

For a font I would recommend Gotham
(and its weights) for literally everything, to me it is literally the perfect font, but like @Qinrir said there are more and so here are some that I found that aren’t too over expressive:
IMG_0221
But these aren’t all and there are way more that do look good. Just try to avoid ugly over expressive fonts.

Color

Also do not use the wrong colors over the wrong ones. Like yellow over white, you will need to zoom in to read it.

See the difference, the top one you can barely read but the bottom one is so clear and could be read from a good distance unlike the top one.


Edit: Thanks @ChickwensRule for recommending the coolors contrast checker, here is some footage in how I used it:

Strokes

(again this is not apart of the fonts section and is it’s own section)

Take a look at the 3 rows, one of them only uses a stroke, one of them does not use a stroke, and one of them uses a clean mix. You see the difference each one could be used in its own style, my personal favorite being the last one with the stroke being slightly darker, and also adding a bit of transparency will make it look better. It is something you have to play around with.


Also this one looks pretty cool and is done well.

Gradients

Now how about a gradient, sadly I don’t think the app I use for making these images support gradient strokes so I will take an example from Vercel’s Landing Page:

OH MY GOD THAT WAS ABSOLUTELY PERFECT! The big text with the gradient and the button with the stroke matching it lets you know that it’s primary and looks so clean. But imagine if all of the text had a gradient, that would look so ugly, so don’t use gradients as your primary and everywhere, maybe a stroke or highlighted text is where you can put gradients into text at most. Later in this tutorial I will have a part in gradient but oh my god is that clean.

Icons

(once more this is not apart of the strokes part)

Icons are a huge part of UI. You don’t want large overly colored icons that have its own color scheme, I would recommend a flat, vector icon that is one color usually white. Google has a great set here, and the icons are fabulous, here is a screenshot:


they have some thousand for everything you will need. I highly recommend them. There is also Font Awesome which has an exceptional landing page by the way that I want to show you


You see the good font and font weight, the amazing color scheme, the icons that look so clean, and it’s very clean art style. This is a great example on UI.

Blurring

(again it is its own topic)
Blurring is something really hard to do, but this is something really cool that I found that might help by @ImSnox New ui blur [fully automatic], one way blurring is used is in some websites top bar as shown in the image below from cosmicjs.com:

It looks so clean and looks way better than just having a solid background for the top bar, it does look a bit to light for a blur and maybe a stronger one would look better but it still looks way better than a solid color.

Shadows

Shadows can make mediocre UI look fabulous, for example these are some shadows:


You see the difference? The first one doesn’t stand out and just looks normal but it progressively begins to show layers.

And also look at this:

You just want to click it, and you can see that it is above the background and gives the interface a sense of depth.

Now how can you do this?

Let’s image we have a UI object, currently without a shadow

Technique #1 - UI strokes

Using a UI stroke with a transparency that is a NumberSequence that goes from 0-1 in a linear fashion (a linear fashion would be 0, 0.1, 0.2… 1) and a thickness around 2 and the color being a perfect black RGB(0, 0, 0) should give you results like this:

Technique #2 - Duplication

This one isn’t like a “realistic” shadow but more of a fun/cartoon styled one.

Okay so now for this let’s just imagine we have a frame


Let’s duplicate it and add a small offset and make sure it’s ZIndex is less that the original

(I slightly modified the colors so you can see which one is which)
Now let’s make it black (or any color really) and add a transparency (depending on your style)

The color, transparency, rotation, and adding a UICorner could be played around with and you could get results like Pet Sim X’s UI:
IMG_0231

Technique #3 - Using a drop shadow texture

It took me a while but I found a really good texture

texture

It may look invisible if you are using devforum in dark mode but you can right click it and save it, simply place it behind a frame by making its ZIndex less than the frames and make it slightly bigger and you should get results like this:


And after a bit of work, using the same texture you can get this:


From a distance you probably would want a less powerful shadow (you can adjust it using the Transparency property) and it will look really :hot_face::hot_face::hot_face::hot_face:

Technique #3.5 (edit)

This one is like the previous one but I found a new texture and properties you can use:
IMG_0247
IMG_0248


Simplicity

One of my biggest problems with UI is having a lot of items in one place, it gets really confusing and looks ugly even for beautiful UI. Let’s say we see this beautiful website
IMG_0242
And then we scroll a bit… and…


WHAT THE WHY IS THERE SO MANY BUTTONS AND NONE OF THEM SEEM TO FIT :face_vomiting::face_vomiting::face_vomiting::face_vomiting:.

Maybe this isn’t the best example but this one should show you
IMG_0244
WHY!?!? WHAT AM I SUPPOSED TO CLICK!

Just try not to make Ui like this, collapsible menus will be your best friend in cleaning up UI. Also try and make dividers which for black backgrounds are slightly lighter and for white backgrounds slightly darker like:


You see how you can clearly tell where the title ends and body starts, perfect.

Gradients

Colors

For the colors I would just recommend using the color contrast checker and adobe color theme maker listed above my personal favorite mix is purple, blue, green.

Using with a blur

Look at this image:


This is from @blve_hxrizon’s Product: exe | Modern Admin Panel, Simplified! which is an absolute UI masterpiece, as you can see the background is blurred but below it is a very light purple-green gradient, you see how nice it looks!

Using for shading

Gradients aren’t a bad option for very very light shading and might make a huge difference, for example imagine a ui with a square that’s a constant color, then imagine if from one corner to another it gets darker very slightly. That would look beautiful even tho it is so hard to notice.


more coming soon…

I am still working on tweens, padding, and way more.

66 Likes

Really cool tutorial but cmon there are wayyyyyyyyyy better fonts than gotham and with the new SO MUCH FREAKING WANTED FONT UPDATE Monsterrate, Quicksand, Raleway and I dont even know how many fonts look amazing. Also for a clean mix if the stroke is a bit translucent it would look wayy better. And gradients are only good as an accent and with that title gradient in my opinion it doesnt look that perfect. Also googles icon are very low quality would be better getting from other sources or making them yourself. Also good and clean ui animations are also important.

3 Likes

To help with ensuring clear readability for text with various colors, I would recommend using a contrast checker (ex: Color Contrast Checker - Coolors).

1 Like

you spelled “Montserrat” and “Railway” incorrectly, but I do agree with you


Replying to the topic:

Why use Third Party tools for clean UI??? I’m not really a UI Designer, but I’d perfer the Roblox UI Designing over Third Party Tools

3 Likes

No I did not:
image

1 Like

Thanks, I added that into the tutorial.


Replying to @Qinrir

Thanks I will be adding some of the stuff you said into the tutorial and also I am working on a tweening part.


It’s because roblox lacks some of these tools, and these tools will generally help in all aspects, they aren’t just made for web design I am pretty sure app designers also use it and the only 3rd party tools I think I have listed are just places to get icons and color tools.

And also there is no problem with using 3rd party tools as long as they benefit you, for example figma is a 3rd party tool and many roblox developers.

3 Likes

Thank you, @bitsplicer, for sharing this insightful tutorial on creating a clean UI and ensuring good UX.

It’s crucial to strike a balance between UI and UX, and your tutorial emphasizes the importance of achieving both aesthetics and functionality. Your tips on color schemes, memorable layouts, and distinguishing primary and secondary actions are invaluable for designers striving to create user-friendly interfaces.

Moreover, your guidance on fonts, contrast, strokes, and gradients provides practical insights for enhancing the visual appeal and readability of UI elements. The examples you shared truly demonstrate the impact of these design choices.

The inclusion of icons, blurring, and shadows also adds depth and polish to the UI. By incorporating these elements effectively, designers can create interfaces that are both visually pleasing and intuitive for users.

Keep up the fantastic work!

2 Likes

Cool also what I do to make shadows without using a texture is I use a dropshadow with a transparency using the formula: 1-(1/size) where resolution being how many frames I want then I just clone the frame increasing the size one pixel everytime until I have reached my size goal but it can be quite lengthy and would be better for a script to do.

2 Likes

Just added Simplicity, an edit to the shadows topic, and Gradients. Yesterday I added Shadows.

Thank you so much for all of your support and I will update this tutorial often. I currently am working on a tweening part that will also cover spring animations.

I think you are confused on what figma is for. Nobody (should) use Figma as a UI designing tool and then export, it is used to rapidly prototype designs for you then to make in your target platform.

This is somewhat right. UX is not about functionality and accessibility. While those are desired effects of proper UX design, UX design is simply making sure the user journey is without major setbacks and the design is easy to comprehend by the user. This wireframe design (just the layout & format) is then to designed into a complete system.

There are industry standards, this doesn’t mean that the user won’t know if you do something different (unless you have terrible UI)

Just a reminder to not use bright green and red, this causes accessibility issues, instead choose a primary color that goes with your design, and blue is a good alternative to red (red is avoided most of the time due to colorblind concerns)

Opinion: When using a stroke, usually I make the background color lighter (or darker if you’re on dark mode). The colors on the first row are also insanely bright. This can cause issues

SF Icons is also worth taking a look at, it is very nice as well.

Something worth noting: I’ve personally ditched using shadows, I use the material design technique of adding small tints of the primary color. Something like this:
image

4 Likes

Something more to add. The call-to-action should be clearly visible. So the “CONFIRM” button would be a brighter color (your accent/theme color?), while “DECLINE” would be just a simple secondary color that doesn’t stand out as much, like a gray that you use for most buttons to keep a consistent design.

Now, you can ignore everything I said if you are developing UI for Roblox and not a website. While that would be aesthetically pleasing, I honestly think the majority of the Roblox player base is going to prefer giant rainbow buttons.

Source: Did web development for many years and read some UI/UX ebooks

2 Likes

Yes, unfortunately “Adopt Me”s have taken over.

Either what you said, or a text button as a secondary button, or even placement which is risky but can still look nice:

image