This is the base UI for an admin menu I’m currently working on, anyone have any suggestions on how I could make it look nicer?
8 Likes
I don’t know what
This
Is but it dosent fit in that well.
Great but that texts are not good , u can try different font
2 Likes
I love the shading and the shadowing. The color scheme compliments the admin panel. However, I would suggest that you change the font. Apart from those aspects, the admin panel looks great.
Keep up the good work! 
1 Like
Nice work! I like the greyscale colour scheme and the font suits the style of the UI quite well, in my opinion. Here are a few suggestions I’ve put together, let me know if you find them useful!
Alignment
While the text at the top of the Admin Panel is perfectly centred, the alignment of each empty box is slightly off. I’ve tried my best to demonstrate this in the diagram below. As you can see, the coloured arrows represent the space between edges, which we’ll come to in the next heading, and the white lines represent the axes on which each row or column rests.
Other than the gaps between rows and columns, there should be no empty space between the resting lines and the boxes if they are aligned correctly, assuming they are all the same size. As we can see in the top-left box (Box 1/9), this is not the case.
The simple way to fix this is to use your software’s “Align” tool. If you have trouble finding this tool, let me know what software you’re using and I’d be happy to help you find it.
In Photoshop, vertical alignment can done by doing the following:
- Select the shapes you wish to align
- Choose Layer > Align + Vertical Centres
(For horizontal alignment, simply select “Horizontal Centres” once the Align tab is open)
Spacing
The spacing between each row and column is also slightly off. I’ve tried my best to demonstrate this in the diagram too, with each coloured arrow representing a different space. When corresponding spaces are compared, we notice that they are not equal. Ensuring corresponding spaces are of the same size should help make your UI more professional and appealing to the eye.
To fix this in a quick and simple way, I’d suggest doing the following:
- Align Column 2 to the centre of the Admin Panel
- Decide on a horizontal spacing size, e.g. 10 pixels
- Create a temporary box of size 10x10 (or whatever size you chose in Step 2)
- Duplicate this box and place one instance on each side of Column 2
- Align Column 1 to the edge of the 10x10 cube on the left of Column 2
- Align Column 3 to the edge of the 10x10 cube on the right of Column 2
- Delete all temporary boxes
- Repeat this process horizontally to equally space each horizontal row
Ambiguous Shapes
Finally, I think it may be beneficial to remove or change the colour of the three rounded, white shapes at the top of the panel. At the moment, it’s unclear what their purpose is. If they’re simply an aesthetic touch, I’d suggest changing them to a different shade of grey to differentiate them from the intractable boxes.
Conclusion
You’ve done a good job so far and with a little extra work, I think you’d be on track to making an awesome Admin Panel. I hope you find my suggestions and advice helpful. I put quite a lot of time into them to ensure they were as practical and informative as possible. Let me know if you have any further questions! 
7 Likes
I would make it less “bubbly”, unless that is the style of a specific game you are using it in. Definitely use Source Sans or something like that.
Thanks for your suggestion I will definitley improve that as know I can’t not look at it without seeing the gap.
Thanks for the suggestion
I like the general format of this Admin Panel, although since Admin Systems are more serious elements of games, I would suggest a change of font, preferrably to a more formal font (not too formal). I would also suggest that with this UI in particular, you move away from “bubbly”. Good luck!
The font is too hard to see. I recommend font like Roboto, Source Sans and Segoe.