Hello everyone! This is the first post / guide in the UI Style Guide Series by @notseventysix.
In this series, I’ll be covering almost every UI Style seen in ROBLOX games, introducing them to you, explaining how they’re made, and finally taking apart a UI from the style and going through it step-by step. My goal at the end of one of these tutorials is to teach you how to learn a style, level up your portfolio, and add some sparkle to your games.
Let’s start with the basics. Minimal UI. Sleek, good looking, and often described as “clean”. Mostly easy to make, (and probably one of the easiest styles to learn). A good choice for beginners that don’t want to go the traditional route of cartoony cash-grab simulator UI.
Example
After taking a look at these UI, we notice a few things that stood out.
- Not many colors. Usually a simple black or simple white. When there is color, it tends to be soft and well maching.
- Not much to look at. Only information that the user needs, and wants to see is displayed. No funny gimmicks, no useless information.
- Straight to the point. We can immediately notice what the website is for.
- Flat. No sparkles, no effects, no shadows, no borders (stroke), etc, completely different from cartoony UI.
DO’s of minimalistic:
- DO use simple colors such as black, white, light blue, and soft red.
- DO have a clear goal & button for the user to navigate to
- DO design a UI that doesn’t hurt the users eye, and doesn’t confuse the user on where to look at.
DONT’S of minimalistic:
- In most cases, DON’T have flashy gradients or bright lights.
- DON’T add special effects, useless text / buttons, or shadows / outlines.
- DON’T focus on adding the most to the screen, rather focus on the UX (User Experience) of it.
- In most cases, DON’T have overly rounded corners or outstanding features.
Simplicity
The website only has one main button on the screen. There are a few side buttons, up on the navbar, but don’t distract where the user is looking at and is clearly not the main button to press.
The artist emphasises that this button is important by making it contrast the background (yes, white on a black background is contrasting), and adding a small wireframe / effect underneath it. (no, this is NOT what I meant by “don’t add effects”. This is a good example of an effect that is GOOD to use in minamalistic design. It’s simple & doesn’t contrast from the rest.
Clean & Eye Candy
Not only is this website easy to navigate, but it looks GOOD. The colors work together, it doesn’t burn your eyes to look at (ahem roblox light theme…), and it doesn’t confuse you to look at it. This is a great example of what you want to acheive with this style.
Into the more advanced subjects, it also looks good because there’s a lot of empty space, or whitespace to it. The text isn’t crammed with the buttons, everything is evenly spaced out, and it feels more breathable.
Straight to the point
All the information you need is provided to you straight upon arrival. You can navigate to the page you want, you can find how to call the company, you can find out how to email them, you can learn about the company, and you can immediately begin booking. The user does not have to go out of there way to search for anything, it’s immediately provided for them.
On-Topic and Self Explanatory
When you look at the UI, you can tell immediately what the website is for without reading all the text on screen. By looking at the images, we can infer it’s got something to do with home, decoration, or living. By reading a few words on the header (which is clearly visible, good,) we learn that it’s a remodelling company for homes.
This is the end of the topic. Please let me know if I missed anything. This is my first time creating a guide, and I’d love to hear from you guys!