FEEDBACK REQUESTED: Looking for stylization tips over my Menus

Garry's Mod coding
#1

Hi there! I’m looking to get feedback on the menu panels for the gamemode I’m writing. My past UI has primarily focused on functionality over form. This time around, with functionality knowledge in-hand, I want to develop a UI that looks a lot nicer and flows a lot better. What I have so far is rudimentary aesthetically, but functions well. If anyone in the community would like to suggest some changes to help make the UI look nicer, any tips at all would be appreciated. And before you say anything, I am aware how awful dermaDefault and Color(175, 175, 175) looks when it’s applied to 90% of everything, but that’s why I’m here. Critique away.

EDIT: removed links, code is no longer up-to-date with current menu

I suppose linking the menu code also means people may scrutinize the code itself. If you see something bad, feel free to share. I’m ready to be ripped to shreds for bad coding habits.

To start off, this is the first menu you will see after you select a team. It’s a role-based shooter gamemode (as if we have enough of those, but hey, its what I want to make). Before a player can start playing, they must select a role, which changes what sort of weapons and equipment is available to them throughout the game.

Features include:

  • Soft clicking on button mouse-overs and button selection
  • Auto-updating role selection as you increase your in-game level.
  • Auto-updating enemy and team role information (will only display “No information to Display” when there are no enemies or teammates - currently WIP)

This next picture shows the highlighting that occurs BOTH when you select a role (click on it once) and when you hover over it. This is disabled for locked roles.

Features:

  • Selecting a role enables the two buttons at the bottom of the menu
    – Includes the same soft clicking sounds and highlighting as the role buttons
    – The left button describes the role and my intention with them
    – The right button tells the user what armor type the role comes equipped with

Clicking on the “armor” button (the right-side button) will open up this menu, where all of the armor types are described, in detail, and how health/damage mitigation/movement is effected by each armor type.

Features:

  • All armor types can be seen and compared
  • Similar clicking/highlighting functionality as the buttons described above
  • Lists the following: (WIP)
    – Damage mitigation (to the head, body, arms, and legs)
    – Starting and maximum health
    – Walk speed, run speed, and jump power

Clicking on the “role’s description” button (the left-side button) will open up this menu, where all of the roles will be described more elaborately.

Features:

  • All roles can be seen and compared
  • Similar clicking/highlighting functionality as the buttons described above
  • Lists all weapon availability, based on weapon type (as mentioned above, weapon types will be limited by class, so, for example, a recon-type class won’t be allowed access to shotguns and heavy machine guns)
    – Currently WIP, may need to extend this panel out a bit

Finally, the meat of the menu (so far) is the Loadout menu, where players can equip different primaries, secondaries, equipment, and different attachments for most of them (I’m currently using Knife Kitty’s DOI/INS2 weapon pack for the gamemode.)

Features:

  • (WIP) Shop button in the upper right hand corner of the menu opens up a shop where in players can purchase new weapons (only available to certain classes) and attachments for those weapons
    – Currently undecided if attachment purchases will be on a per-weapon basis or not, each has its pros and cons
  • (WIP) Quick-swap your purchased weapon by clicking on its model in the left hand side
  • (WIP) Quick-swap your purchased attachments by clicking on their models underneath the weapon’s model and information
    – In spaces where no model is equipped, a default icon is grayed-out indicating so
  • (WIP) Weapon information that is better (or worse) compared to its default values will appear green or red, respectively
  • (WIP) All weapon information is dynamically updated as you equip/de-equip attachments
  • Also has the same soft clicking and highlighting as described with the buttons from above

That is all I have for now, I’d like as much feedback/many suggestions as possible. So far it works really well, but I think it looks positively awful.

#2

Everything on the left feels so smushed. Try adding some padding. As for the right side, the floating text is very random. I think this would work a lot better if it just used icons to describe what the class can and can’t access. If the class can access something, keep the icon the way it is. If it can’t access something, dim the icon a little bit.

I’ve noticed in your code you aren’t using docking, too. You should look into that, as it will make laying out your UI a lot easier.

Panel:Dock

#3

Yea I was sort of thinking the same, the information is a bit crammed, both vertically and horizontally (“signated Marksm”).

As for the text, I have it centered at 25%, 50%, and 75% of the description width, and 1, 2, 3, and 4 / 5’s of the description’s height. I suppose I ought to left-align the text but I don’t have the capability of creating unique enough icons for your suggestion.

And as for Docking, how good is it really? Every developer I’ve spoken to has said to stay away from Docking.

[editline]18th October 2017[/editline]

Also I want to clarify that there are 3 options available in the weapon type descriptions: “Full,” “Partial,” and “No” (which really ought to be “none”). A light and dimmed icon doesn’t quite work with 3 options.

#4

It’s not perfect, but it is still excellent to use. Whoever told you to stay away from it has no idea what they’re talking about. I recreated your panel in only a minute.

[lua]local frame = vgui.Create(“DFrame”)
frame:SetSizable(true)
frame:SetSize(600, 300)
frame:Center()

local sidebar = frame:Add(“Panel”)
sidebar:Dock(LEFT)
sidebar:SetWide(200)

local main = frame:Add(“DPanel”)
main:Dock(FILL)

for i = 1, 8 do
local button = sidebar:Add(“DButton”)
button:Dock(TOP)
button:SetText(tostring(i))
end

frame:MakePopup()[/lua]
Docking also works with resizing. You can change the size of the frame, and the layout will stay the same.

And even though there are 3 options, you can still use icons. You just need to make partial ones different than the other 2. Maybe a little “!” icon in the corner of the icon? It’s ultimately up to you, but that floating text alone just does not look good to me.

#5

“Who told me to stay away” is actually a multitude of people who, I guess, preferred the ability to do exactly what they wanted instead of relying on the system to margin off everything. IDK, I might try it in the upcoming menus I make but right now I’m quite comfortable with setting X/Y sizes and positions manually, and I’m worried trying to work with Docking may mess me up a bit. IDK, though, I’ll have to see.

Regardless, I appreciate the criticism. Maybe a mix of both text and icon would work best, but again, I fail to have the means to create such icons, don’t have the know-how, despite having the tools necessary.

Is there anything else you can think of? The grey on gray on black on white gets old and dull, in my eyes, but it’s consistency when I can’t think of a good pallet and design so it looks better than a fuckin’ rainbow.

#6

I’ve been there. vgui seems harder to code than a simple surface.DrawRect.
However vgui got a lot of benefits. Mouse interface, text-box, easy scale/edit and even an option hide the menu (So you don’t have to destroy it each time you close it) … ect
A lot of people say “stay away” simple cause they don’t know how the panels work.

If you want your own design on the panels. You can use

PANEL:Paint and

PANEL:PaintOver to draw them.

There are many websites that have icons people can use. e.g http://game-icons.net/ (cc-by) just know what licenses you’re using and if you have to place credit for icons.

Learn and create palette’s https://material.io/guidelines/style/color.html
https://material.io/color/
Creating a table of colors, starting with the lightest and end with the darkest. Even if you don’t use the whole spectrum, its still easier to switch and try different colors.

#7

Thanks for the links! I will surely utilize them, they look like they’d help a ton.

As for your first set of comments, what you see in my pictures is fully functional, it isn’t just a bunch of painted rectangles and text. Not entirely sure what you mean by “vgui got a lot of benefits,” as every panel you create is based out of the vgui class/library, so that would mean everything I’ve created so far is based out of the vgui library.

If anyone still has comments I’m open, especially regarding formatting or new functionality (maybe the role/armor description shouldn’t be a separate window?)

#8

Add me on steam :slight_smile:
I love talking about vgui stuff!

When I get home I’ll post a few tips on this thread related to your current menu :heart:

#9

Request sent! I look forward to it.

#10
  • Snip -
#11

I’ve just about finished the role selection menu and I’d like some feedback from anyone willing to provide. I deleted my last post because it was lazy and only contained a video. Here’s some more pictures and explanations:

First window you see is this one here:

I’m utilizing icons as representations for much of the content in this new menu, I think it does a good job but the pictures are all pixelated.

Here’s an example of some soft feedback the menu provides, light clicking noises and button highlights:

Not anything fantastical, and in this case I think less is more.

Here’s is the full role description menu. The “weapon access” and “armor information” information sections were previously in their own, separate menus (and at the time not displaying properly).

Something to note: the “availability” color underneath the weapon type changes based in its availability to the role.
Also, at the bottom, I was able to continue to display all of the different armor types that exist without it taking up much room

In this picture, I’ve selected a different role from before, and now you can see a similar stylization with the armor information text color, to that of the weapon availability seen above

Armor information color is based on a comparison to the Standard Armor, so any role that comes equipped with standard armor will see all armor information as white

I also added a small animation to re-center the “Select a Role” and “Role Information” frames (since they are separate panels entirely), the animation of which can be seen here:

The animation won’t play if you select a new role, it instead just replace the old panel with the new one.

Also to note: I used CoD MW2’s font for this menu, but I’m worried this all looks to arcade-y, like it’s a menu for a laser tag gamemode or some shit.

Lemme know what you think! Good, bad, ugly, anything in-between.

#12

That looks pretty good compared to what it used to be, only tip I could really give is that I’d like to see more utilization of different colors. But if that’s not the style you’re going for than this is amazing and you should stick with it.

#13

I’m aiming for a more gritty FPS gamemode with a minimalist attitude (think like Insurgency), and I sort of imagined a “dull,” or dark, color theme the most fitting.

The scheme (extremely dark blue, blue, light blue, and white) actually changes to reds when you join the Red team (I suppose I can provide a snapshot of that), but the tone remains consistent across both schemes.

Thank you for the compliment, though! I feel as though it’s a big improvement since the first as well, so I’m glad to see people share my sentiment.

#14

Here’s what it looks like red:

856×783 85.3 KB

#15

I also got the little “I” information icons working in the top right hand corner of the menus.

This is what shows when you press the top Info icon, and it gives the player an (essentially one-off) message about how roles work in this game.

1171×237 76.2 KB

The information panel will move alongside the “Select a Role” panel when it does its animation when you select a role.

I’ve also managed to include a short little role description in the “Role Information” panel information icon. This is what it looks like together.

1184×325 80.6 KB

Quite happy with it.

And of course, I’m looking for criticisms and critiques, so I’ll listen to anything anyone says.

#16

The icons look rather sharp, maybe go into photoshop or anything similar and add a gaussian blur behind it to increase its “smooth” ness, you could also mess around with materials second parameter.

#17

Yea that’s the problem when you resize 1024 x 1024 images into 80 x 80. If anyone knows of a surefire way to easily fix the pixelation, I’m listening.

#18

Invule is not saying it’s pixelated. Invule’s saying the image goes from black to white very abruptly and to add a slight blur to make it a more smooth transition from black to white.

#19

I’ve never done anything like that before, and the gmod wiki doesn’t provide a list of available “second paramters” for Materials().

If anyone’s got any links I’ll take a look.

#20

You’ve got to take the icons into Photoshop or any other photo editting software and soften the icons around the edges is what he’s saying.