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:
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:
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:
Technique #3 - Using a drop shadow texture
It took me a while but I found a really good 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
Technique #3.5 (edit)
This one is like the previous one but I found a new texture and properties you can use:
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
And then we scroll a bit… and…
WHAT THE WHY IS THERE SO MANY BUTTONS AND NONE OF THEM SEEM TO FIT
.
Maybe this isn’t the best example but this one should show you
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.
