What makes a UI have that polished and crisp look, and how do I get that?

I’ve been browsing and playing some games with some awesome UI done in them. I’m a UI developer and I make average to advanced UI’s for people who hire me and myself of course.

Here is some of my GUI’s I have made - ImagineLeqtric - Builder Portfolio [For Hire]

Some games that have clean, and crisp UI in them are:

I’m wondering on plugins, other platforms, and tricks I could use to make cleaner looking GUI in games. Thank you for reading.

1 Like

Most people use adobe illustrator, it allows you to draw in vector, rather than raster, meaning that no matter how much you zoom in, it will always look crisp, the other option is to just do it in a normal drawing program, but set the resolution to around 300+ pixels per inch and make the canvas pretty big :slight_smile:

2 Likes

I’m a very UI-savvy person and I focus on the most intricate of details when it comes to UI, so here:

Consistency

Your UI should have a theme and should look consistent throughout your game. For example, if you use rounded-corners here, then you need to use it almost everywhere else to make it look like it’s part of one game. However, do not make it monotone. You can change up the colors, positions, and layouts ever so slightly to make them have variation.

Satisfying UI Animations

This includes anything from hover effects to your shop UI opening. Make them seem specialized in their way while preserving consistency. For example, for a button that gives you rewards for the round, you can have a stash of coins spread out slightly when hovered over and put back when the hovering stops. Another thing for acquiring mass number items such as 50 coins, you can make several coins move from the button to the coin display in the corner to give the user a sense of satisfaction. Also, make sure you don’t use linear animations too often because they look quite boring. Quick, asymmetric, and irregular animations are key.

Audio

Audio can be satisfying to listen to, especially if you get a ton of coins, then you can have several coin dropping downs when the coins move to the coin counter. Audio brings your UI to life in another dimension, i.e. in sound and not visually.

Flexible UI

If the style of your game is fun and cartoony, you need to make sure your buttons and everything doesn’t just stay in place being static. Make the major buttons shine using a gradient shine effect, or make them jiggle a little every once in a while. Also, when you open major UI frames such as opening a shop, make certain elements appear after. Don’t tween everything in from the top, it just looks like you’re sliding a piece of paper from the top. Make it look like you’re passing a 3D diorama giving your UI some depth.

Just look at Angry Birds 2’s UI online or download the game yourself to see, because oh man, the way they made it, it’s quite juicy to press buttons!

I don’t have a set app to use, but one thing’s for sure: get an image editor or art creation app that allows anything beyond basic creation, whether it be free or not. Most of my UI creation doesn’t go beyond Google Drawings (depending on your game style). For example, Islands has rectangular UI, meaning they technically don’t need high-feature app, though it’d great to have if they make changes later on.

9 Likes

I believe this should go in #help-and-feedback:art-design-support

5 Likes

Does Roblox support vectors isn’t it just pixels?

4 Likes

Still, with SVG you can export it at any quality level meaning it generally is higher quality then images designed in a PGN formst since you cannot ‘create’ quality buy you can draw shapes more accurately.

1 Like

thank you for this! very helpful for those learning the fundamentals of UI design

Agreed. Very helpful response that I will take to notice.