I’m trying to make UI design more consistent in my game
Usually I would hire people to do graphic design for me, especially for UIs, but a lot of the people I would hire for this in the past ghosted me or are busy. Plus it reduced flexibility since I would need to ask someone what I wanted etc.
I’ve always been kinda bad at creating UIs; I can get positioning done good for them, but actual layout, like making them look aesthetic, etc., has always been an issue, since the UI will always look bland and boring.
Another thing I want to do is have is create images for buttons to open up bigger frames, but I have no idea how to do that either besides looking up some icons on google that may or may not be consistent.
What are some tips and resources, to keep UI colorful, interesting, simple as possible, and consistent?
My Advice for the game you have created would have to be:
Don’t Try To Over Complicate It
I know this is easier said than done but it can easily be overlooked, for instance right at the start where you select a country, try shrinking the icons slightly so they aren’t as in your face
Don’t Under estimate ‘Blank Space’
You Imo have done this pretty well and kept a fair amount of blank space so the player can not only see the game but they also won’t feel intruded or bombarded on constantly. On the other hand too much blank space can also have the same effect.
Proper Scaling
Building off of the point above scaling can help you with fixing blank space. This could be as simple as increasing the size of some icons by a margin or so and It helping finish your UI’s overall aesthetic.
Screen Borders
Having an small edge of ‘Blank Space’ around the border of your screen can help give the buttons and icons a more layed out feel.
Colour Palettes and Emotions
A good place I use for colour palettes is https://color.adobe.com/explore. I use it for mood colours as the colours used in a game’s UI can give a specific sort of feel to the game for instance an fps might be dark grey and red as a sort of angry/blood and gore genre whereas the green you have used can give an emotion of abundance which is where players would feel at peace or rest and in a secure place.
There are many more tips and tricks out there but If you follow these 5 then you should be set for a while until you start doing really advanced stuff.
EDIT:
I also use the Ui Design plugin, there are two types the full version and the lite version I have the full and it is super helpful, you can round off sharp corners on ui, even the roundify plugin could do this but Ui Design can give you so many more options, it is this and Interface Tools is a good one, it has plenty of pre made gradients and icons that you can use.
I thought that the bigger the flags, the more visible they are, meaning that would be better, no?
Yeah, I’ve been trying to add more aspects to the game, like switch teams, lock your team to friends only, etc. but knew that would lead to a lot more blank space being used, so I opted for chat commands. That seems pretty outdated to me, especially when mobile and console players can play, so maybe I should just use the GUIs.
How are the sizes in my game?
Honestly I always avoided borders for some reason lmao, they always just looked too blocky and retro for me.
Maybe green isn’t the best color for a military game
I will certainly check that UI design out though! Thanks for the feedback
The flags could do with a little X shrinking but other than that they are great, they just seemed stretched out to me, thats my personal opinion though.
2/3. I do like those aspects however I feel if you were to increase the size of the icons as they are like the size of a system tray icon on my laptop and they were pretty hard to tell what they were without clicking on them.
The borders don’t have to be chunky or even physical just literally a thin slither between the buttons and the edge of the screen, the emulator can help with this a lot in studio.they just need to be at least 5 pixels between the edge and the buttons, imagine a flow of air going around the screen that is the player’s focus, having the gaps would allow the air to pass through but don’t make the gaps to large obviously
Green could be a good colour depending on what other colours it is complimented with, A quick google search gave me this palette and to me it gives off that sense of it being military.
I do have to say when using palettes ensure you pick a primary colour from it and then rank the others then use them accordingly as if you have equal amounts most of the time it can seem quite cluttered, I know this isn’t always the case but in most circumstances and especially when starting out its best to have an order.
Overall what you have done with the UI is quite inventive for a tycoon In my opinion and as the game builds steam you will get more and more experience doing this, as they say practice makes perfect, Keep it up!
I’m just learning UI’s and hopefully will get better by practice but on Photoshop and even in studio. I look at existing games for inspiration especially with layout and colours.
This forms a base for you to create your own UI/Replenish the UI you have.
It usually takes me a few times with moving image labels and different buttons (on studio) or in Photoshop where I play around with colours and layers.
edit: After playing your game in question, I believe there is a few basic necessary changes to the UI.
The icons for Crates, Shop, Donate and Radio should be rearranged to be Shop, Crates, Radio, Donate. As its more pleasing upon the eyes especially if you make the icons slightly larger and have them in a grid format with a top 2 and a bottom 2.
Your kill display (forgotten the word) is great but having it slightly smaller and logging the kills? might appear better to players especially positioning it well on screen. Same goes with the stats being recorded at the top of the screen.
I usually end up scouting ones on google images, then tweak them or redraw and paint over them to what I want.
Otherwise you have to learn how to illustrate/paint via tablet or as I mosty do, use the photoshop shapes such as Spheres, rounded rectangles and others.
