Upvote Upvoted 2 Downvote Downvoted
1 2
What Makes A Good Hud?
posted in Customization
1
#1
0 Frags +

I am in the process of making a hud and I would like to know what makes a hud a good hud. I am assuming that it is a mix of preference, colour schemes and information in the right places but I don't have much experience with this and I would like some tips.

And if you have some tips on colour schemes please inform me ;;;;;))))))

I am in the process of making a hud and I would like to know what makes a hud a good hud. I am assuming that it is a mix of preference, colour schemes and information in the right places but I don't have much experience with this and I would like some tips.

And if you have some tips on colour schemes please inform me ;;;;;))))))
2
#2
-18 Frags +

http://i.imgur.com/D3j1KMx.png

i like the yahud color scheme and outline on my damages numbers. rather have a better in game than a gimicky main menu.

[img]http://i.imgur.com/D3j1KMx.png[/img]

i like the yahud color scheme and outline on my damages numbers. rather have a better in game than a gimicky main menu.
3
#3
31 Frags +

ok heres the problem, a lot of people care more about the menu and the aesthetic of the hud rather than the actual game ui which is fucking retarded because you're only gonna see the menu for like 1 minute and see the game ui for like half an hour.

personally i would say focus like 80% on the ui and 20% on the menu / aesthetic and please don't make another smesihud that shit's awful
the only huds i've seen that have a good aesthetic and that the game ui is good are notohud and all the yahuds
i personally like using this website for colour schemes

ok heres the problem, a lot of people care more about the menu and the aesthetic of the hud rather than the actual game ui which is fucking retarded because you're only gonna see the menu for like 1 minute and see the game ui for like half an hour.

personally i would say focus like 80% on the ui and 20% on the menu / aesthetic and please don't make another smesihud that shit's awful
the only huds i've seen that have a good aesthetic and that the game ui is good are notohud and all the yahuds
[url=https://flatuicolors.com/]i personally like using this website for colour schemes[/url]
4
#4
9 Frags +

Like I don't give a shit about the actual TF2 menu at all

Just have it clean and have all the necessary buttons right there that I need, I don't want to have to go digging for shit

ingame ui:

- Minimal hud (3D player icon optional)
- Clean font (I like omphud for this)
- Visible damage numbers (I love notohud's numbers)

I personally like a colorful ubercharge meter that drills it in my head that I have uber and I shouldnt die

Like I don't give a shit about the actual TF2 menu at all

Just have it clean and have all the necessary buttons right there that I need, I don't want to have to go digging for shit

ingame ui:

- Minimal hud (3D player icon optional)
- Clean font (I like omphud for this)
- Visible damage numbers (I love notohud's numbers)

I personally like a colorful ubercharge meter that drills it in my head that I have uber and I shouldnt die
5
#5
17 Frags +

no tf2 font

no tf2 font
6
#6
15 Frags +
gloryno tf2 font

the tf2 font is lit tho

[quote=glory]no tf2 font[/quote]
the tf2 font is lit tho
7
#7
5 Frags +

it's definitely 100% preference and depends on your audience. Who are you making it to appeal to? Comp players? Pubbers? Yourself? Weebs? Everything will change depending on that. There really aren't any "set" rules of hudmaking.

The site smesi linked is good for colorschemes, I prefer coolors myself though.

What makes a hud a bad hud is pretty obvious though. Poor font selection, shitty colorschemes, information in weird places (my health is in the upper left corner please help). etc.

If you want my personal pet peeves though:

-tf2 font (STOP THIS MADNESS PLEASE)
-information in corners
-boxes on health/ammo
-TanLight
-default TF2 assets (especially things like main menu icons since they're in this terrible off-white color and are really bit-crunched and pixellated. use an icon font like Sosa)
-default borders on elements (those stupid off-white corners on the scoreboard and shit, god why do they exist? they look so bad)

it's definitely 100% preference and depends on your audience. Who are you making it to appeal to? Comp players? Pubbers? Yourself? Weebs? Everything will change depending on that. There really aren't any "set" rules of hudmaking.

The site smesi linked is good for colorschemes, I prefer [url=http://coolors.co]coolors[/url] myself though.

What makes a hud a bad hud is pretty obvious though. Poor font selection, shitty colorschemes, information in weird places (my health is in the upper left corner please help). etc.

If you want my personal pet peeves though:

-tf2 font (STOP THIS MADNESS PLEASE)
-information in corners
-boxes on health/ammo
-TanLight
-default TF2 assets (especially things like main menu icons since they're in this terrible off-white color and are really bit-crunched and pixellated. use an icon font like Sosa)
-default borders on elements (those stupid off-white corners on the scoreboard and shit, god why do they exist? they look so bad)
8
#8
1 Frags +
fahrenheight- Clean font (I like omphud for this)

Do you mean easy to read fonts or fonts that have minimal pixelation?

flatline-information in corners

Would you have a problem with the name of the map/timeleft/whatever in the corner on the scoreboard?

[quote=fahrenheight]- Clean font (I like omphud for this)[/quote]

Do you mean easy to read fonts or fonts that have minimal pixelation?

[quote=flatline]-information in corners[/quote]

Would you have a problem with the name of the map/timeleft/whatever in the corner on the scoreboard?
9
#9
0 Frags +
XenThePybrobla bla bla
  • I'm pretty sure he's talking about easy to read fonts, some examples are Roboto and Code
  • thats completly normal and fine
[quote=XenThePybro]bla bla bla[/quote]
[list]
[*] I'm pretty sure he's talking about easy to read fonts, some examples are Roboto and Code
[*] thats completly normal and fine
[/list]
10
#10
5 Frags +

Health and ammo in the middle, readable damagenumbers.

Health and ammo in the middle, readable damagenumbers.
11
#11
2 Frags +

In my opinion, the usability and functionality of the HUD is by far the most important. So you should focus on the in-game UI. It's important that the most crucial information is also the most visible which typically suggests that HP/ammo should be in large font and more towards the center. Not necessarily completely centered, just not tucked away in the corners. Keep in mind that it's also important to be able to see as much of the battlefield as possible. It's a balance you have to strike.

I'm gonna disagree with Flatline on a few things here, but it's all personal preference. I think having boxes behind important number fields like HP/ammo increases readability by providing a dark background for you to read them on. And while TanLight is not very pretty, it doesn't strain your eye as much as pure white would.

I also like to have some team-coloured background on the screen to remind you what team you're on in case you forget. In my HUD I have a few thin lines along the edge of the HP/ammo background but I'm seriously thinking of getting rid of those. What I'll stick with is having the team-coloured background of the playermodel in the bottom left corner. It doesn't have to be very obstructive. I just like it there to identify what team I'm on.

Also, a black background with a team-coloured stripe could make the information more consistently readable instead of alternating between red/blue backgrounds. That could make for inconsistent reading. Not that it's likely to make a huge difference, but it might be worth keeping in mind.

These are just my opinions. I'm by no means a big authority on this.

Oh yeah, fuck those default borders with the off-white edge. Screw those. Get rid of them whenever possible (if you also don't like them, it's up to you of course).

EDIT: Animations also help convey important game state info like overheal/low HP/Uber charged/hitmarker etc. Those are important (hitmarker is very much optional). Some are annoying like the spy disguise silhouette or the intelligence pickup one. You might want to get rid of those.

In my opinion, the usability and functionality of the HUD is by far the most important. So you should focus on the in-game UI. It's important that the most crucial information is also the most visible which typically suggests that HP/ammo should be in large font and more towards the center. Not necessarily completely centered, just not tucked away in the corners. Keep in mind that it's also important to be able to see as much of the battlefield as possible. It's a balance you have to strike.

I'm gonna disagree with Flatline on a few things here, but it's all personal preference. I think having boxes behind important number fields like HP/ammo increases readability by providing a dark background for you to read them on. And while TanLight is not very pretty, it doesn't strain your eye as much as pure white would.

I also like to have some team-coloured background on the screen to remind you what team you're on in case you forget. In my HUD I have a few thin lines along the edge of the HP/ammo background but I'm seriously thinking of getting rid of those. What I'll stick with is having the team-coloured background of the playermodel in the bottom left corner. It doesn't have to be very obstructive. I just like it there to identify what team I'm on.

Also, a black background with a team-coloured stripe could make the information more consistently readable instead of alternating between red/blue backgrounds. That could make for inconsistent reading. Not that it's likely to make a huge difference, but it might be worth keeping in mind.

These are just my opinions. I'm by no means a big authority on this.

Oh yeah, fuck those default borders with the off-white edge. Screw those. Get rid of them whenever possible (if you also don't like them, it's up to you of course).

EDIT: Animations also help convey important game state info like overheal/low HP/Uber charged/hitmarker etc. Those are important (hitmarker is very much optional). Some are annoying like the spy disguise silhouette or the intelligence pickup one. You might want to get rid of those.
12
#12
1 Frags +

Whatever you like. Many people have different preferences as to what is ugly, and what is neat. Make it tailored to your tastes.

For me personaly, I like clean looking ui's with health and ammo close tothe crosshair.

Whatever you like. Many people have different preferences as to what is ugly, and what is neat. Make it tailored to your tastes.

For me personaly, I like clean looking ui's with health and ammo close tothe crosshair.
13
#13
-1 Frags +

smesi makes a good hud

smesi makes a good hud
14
#14
3 Frags +

No massive ass boxes around the health and ammo, its just annoying and clogs the screen up.

No massive ass boxes around the health and ammo, its just annoying and clogs the screen up.
15
#15
2 Frags +

The scoreboard needs to be small, minimal and transparent where possible to facilitate people actually using the damn thing.

The scoreboard needs to be small, minimal and transparent where possible to facilitate people actually using the damn thing.
16
#16
2 Frags +

color.adobe.com

color.adobe.com
17
#17
7 Frags +

Sorry for the wall but:

What a lot of hud devs, new and old I think, get caught up on is sticking with a design choice for the sole reason of having that design choice. ie "I'd really like to make a hud that uses outlined health and ammo numbers, so I'll do that and then figure out how to make it look good after the fact." But if you're not used to working backwards like that, it's probably going to look like shit. And even if you are used to doing that, it'd probably still end up worse than if you started with a general idea of something that looks nice and fine-tune it with "should I use dropdown shadows / blurred shadows / outlines / box bgs / some other variant" once you're at a position where you can start to determine which would be the best choice. Sometimes this choice will be made for you for technical reasons, but usually this is where the personal preferences come from.

Basically, design choices are means to an end, not the ends themselves. It seems pretty obvious worded out but it's not all that common truth be told. The personal preferences here aren't so much "I like outlines" but more "I like the effect that outlines create." And the three main effects that each choice would involves are mostly: is it functional/usable, is it consistent and/or intuitive with the rest of the hud, and does it look good?

Functional / usable has been mentioned a few times so far; you want people to actually be able to use your hud and have it be easy to play with.

Consistency is what separates a decent hud from an amazing hud. Does everything not just look like it could all be in the same hud, but does everything work together so well that it couldn't fit better in that hud? Intuitive is the same idea; does it all make sense together? Are people seeing what they'd expect to see based on everything else your hud does?

Being actually visually appealing though is probably the most important of the three. No matter how much people say functionality is most important, we all know that a new hud that's functional but looks bad isn't going to get anywhere, the only ones that can get away with it are updates to old huds that came from back when functionality really was #1.

And a lot of people say "what looks good is personal preference" but I think too many people take this too far and to mean that they can do anything. There's some very universal ideas on what looks good and what doesn't, and personal preferences rarely mean the difference between good and bad, more often than not they just mean that what looks good to one person might be great to another. And vice versa, what looks bad to one person, probably looks like absolute garbage to other people. Bottom line here is that if your hud looks bad or meh or whatever to you, you need to fix that badly because it's going to look worse to nearly everyone else. There is a reason why probably a third of the huds that hit this site get treated like shit, and it's usually because they do, from nearly everyone's perspective, look like shit.

You can go on a lot about how to make something look good. You can use popular colorschemes to try and help, but really just as long as you realize that 255 0 0 255 is a terrible color, you'd probably do decent. It's hard to find a font that's not already used and looks good (I still don't get why people like the default font tbh), but cleanliness is key for fonts usually, though there are some tiny things like how you like your 1s that are entirely preference. Positioning, mostly just make it readable and differentiate between vital / less involved / nearly irrelevant info (health and clip ammo should be big and visible, reserve ammo and meter bars shouldn't be as pronounced, and most huds completely get rid of the 2d class icon, for some basic examples).

tldr: choose things that make it more functional, more consistent, or better looking (usually all three) but don't go saying "I'd like to have this in my hud" until you can fully see the positives and negatives of using it or not.

Sorry for the wall but:

What a lot of hud devs, new and old I think, get caught up on is sticking with a design choice for the sole reason of having that design choice. ie "I'd really like to make a hud that uses outlined health and ammo numbers, so I'll do that and then figure out how to make it look good after the fact." But if you're not used to working backwards like that, it's probably going to look like shit. And even if you are used to doing that, it'd probably still end up worse than if you started with a general idea of something that looks nice and fine-tune it with "should I use dropdown shadows / blurred shadows / outlines / box bgs / some other variant" once you're at a position where you can start to determine which would be the best choice. Sometimes this choice will be made for you for technical reasons, but usually this is where the personal preferences come from.

Basically, design choices are means to an end, not the ends themselves. It seems pretty obvious worded out but it's not all that common truth be told. The personal preferences here aren't so much "I like outlines" but more "I like the effect that outlines create." And the three main effects that each choice would involves are mostly: is it functional/usable, is it consistent and/or intuitive with the rest of the hud, and does it look good?

Functional / usable has been mentioned a few times so far; you want people to actually be able to use your hud and have it be easy to play with.

Consistency is what separates a decent hud from an amazing hud. Does everything not just look like it could all be in the same hud, but does everything work together so well that it couldn't fit better in that hud? Intuitive is the same idea; does it all make sense together? Are people seeing what they'd expect to see based on everything else your hud does?

Being actually visually appealing though is probably the most important of the three. No matter how much people say functionality is most important, we all know that a new hud that's functional but looks bad isn't going to get anywhere, the only ones that can get away with it are updates to old huds that came from back when functionality really was #1.

And a lot of people say "what looks good is personal preference" but I think too many people take this too far and to mean that they can do anything. There's some very universal ideas on what looks good and what doesn't, and personal preferences rarely mean the difference between good and bad, more often than not they just mean that what looks good to one person might be great to another. And vice versa, what looks bad to one person, probably looks like absolute garbage to other people. Bottom line here is that if your hud looks bad or meh or whatever to you, you need to fix that badly because it's going to look worse to nearly everyone else. There is a reason why probably a third of the huds that hit this site get treated like shit, and it's usually because they do, from nearly everyone's perspective, look like shit.

You can go on a lot about how to make something look good. You can use popular colorschemes to try and help, but really just as long as you realize that 255 0 0 255 is a terrible color, you'd probably do decent. It's hard to find a font that's not already used and looks good (I still don't get why people like the default font tbh), but cleanliness is key for fonts usually, though there are some tiny things like how you like your 1s that are entirely preference. Positioning, mostly just make it readable and differentiate between vital / less involved / nearly irrelevant info (health and clip ammo should be big and visible, reserve ammo and meter bars shouldn't be as pronounced, and most huds completely get rid of the 2d class icon, for some basic examples).

tldr: choose things that make it more functional, more consistent, or better looking (usually all three) but don't go saying "I'd like to have this in my hud" until you can fully see the positives and negatives of using it or not.
18
#18
8 Frags +

m0re clone, bam. you're done

m0re clone, bam. you're done
19
#19
0 Frags +

What JarateKing said

also, https://material.google.com

What JarateKing said

also, https://material.google.com
20
#20
-2 Frags +

In the end, do what makes you happy but consider feedback on your progress, try new ideas in Photoshop.

More inspiration:

http://www.teamfortress.tv/33387/wavesui

http://www.teamfortress.tv/33871/mkhud

http://www.teamfortress.tv/15467/medhud

http://www.teamfortress.tv/8247/show-your-hud-modifications

In the end, do what makes you happy but consider feedback on your progress, try new ideas in Photoshop.

More inspiration:

http://www.teamfortress.tv/33387/wavesui

http://www.teamfortress.tv/33871/mkhud

http://www.teamfortress.tv/15467/medhud

http://www.teamfortress.tv/8247/show-your-hud-modifications
21
#21
0 Frags +

hud crosshair like fog's or ya's

hud crosshair like fog's or ya's
22
#22
-1 Frags +
flatlineIf you want my personal pet peeves though:

-tf2 font (STOP THIS MADNESS PLEASE)
-information in corners
-boxes on health/ammo
-TanLight
-default TF2 assets (especially things like main menu icons since they're in this terrible off-white color and are really bit-crunched and pixellated. use an icon font like Sosa)
-default borders on elements (those stupid off-white corners on the scoreboard and shit, god why do they exist? they look so bad)

we can all agree the pixellated teamcolored backgrounds with the rounded borders are awful, but i'm just curious, what's wrong with the tf2 build font and tanlight?

[quote=flatline]
If you want my personal pet peeves though:

-tf2 font (STOP THIS MADNESS PLEASE)
-information in corners
-boxes on health/ammo
-TanLight
-default TF2 assets (especially things like main menu icons since they're in this terrible off-white color and are really bit-crunched and pixellated. use an icon font like Sosa)
-default borders on elements (those stupid off-white corners on the scoreboard and shit, god why do they exist? they look so bad)[/quote]

we can all agree the pixellated teamcolored backgrounds with the rounded borders are awful, but i'm just curious, what's wrong with the tf2 build font and tanlight?
23
#23
0 Frags +
IntellectualflatlineIf you want my personal pet peeves though:

-tf2 font (STOP THIS MADNESS PLEASE)
-information in corners
-boxes on health/ammo
-TanLight
-default TF2 assets (especially things like main menu icons since they're in this terrible off-white color and are really bit-crunched and pixellated. use an icon font like Sosa)
-default borders on elements (those stupid off-white corners on the scoreboard and shit, god why do they exist? they look so bad)

we can all agree the pixellated teamcolored backgrounds with the rounded borders are awful, but i'm just curious, what's wrong with the tf2 build font and tanlight?

the tf2 fonts all have no baseline. it's really annoying to work with (and why i don't like broesel or m0re). also, they're heavily stylized, which while good for tf2's artstyle, isn't good for a hud where you're trying to be clean and minimalist

TanLight is just gross. It's the color of milk combined with sand.

[quote=Intellectual][quote=flatline]
If you want my personal pet peeves though:

-tf2 font (STOP THIS MADNESS PLEASE)
-information in corners
-boxes on health/ammo
-TanLight
-default TF2 assets (especially things like main menu icons since they're in this terrible off-white color and are really bit-crunched and pixellated. use an icon font like Sosa)
-default borders on elements (those stupid off-white corners on the scoreboard and shit, god why do they exist? they look so bad)[/quote]

we can all agree the pixellated teamcolored backgrounds with the rounded borders are awful, but i'm just curious, what's wrong with the tf2 build font and tanlight?[/quote]

the tf2 fonts all have no baseline. it's really annoying to work with (and why i don't like broesel or m0re). also, they're heavily stylized, which while good for tf2's artstyle, isn't good for a hud where you're trying to be clean and minimalist

TanLight is just gross. It's the color of milk combined with sand.
24
#24
7 Frags +

aight man good design is thorough and consistent. every detail matters.

and yo for colors, dont use some pallet someone else made and posted on a site. make your own. whatever they posted on the site might work for their design but not yours.

whether or not you recognize it, color is all about emotional response. certain colors stimulate certain emotions, like reds are associated with anger, blues are calming, yellow is associated with happiness.

use muted tones for large areas that need some color but that you dont want to feel overwhelming.
use vivid colors in moderation as highlights
use contrast in moderation as another way to highlight

aight man good design is thorough and consistent. every detail matters.

and yo for colors, dont use some pallet someone else made and posted on a site. make your own. whatever they posted on the site might work for their design but not yours.

whether or not you recognize it, color is all about emotional response. certain colors stimulate certain emotions, like reds are associated with anger, blues are calming, yellow is associated with happiness.

use muted tones for large areas that need some color but that you dont want to feel overwhelming.
use vivid colors in moderation as highlights
use contrast in moderation as another way to highlight
25
#25
0 Frags +

Good color scheme and contrast, no flaws, simplicity, clean and easy to read fonts with minimal pixelation.

Good color scheme and contrast, no flaws, simplicity, clean and easy to read fonts with minimal pixelation.
26
#26
1 Frags +

HudAchivementTracker crosshairss

HudAchivementTracker crosshairss
27
#27
-2 Frags +

if it wasnt a good hud it wouldnt be sittin here discussin it with you would it

if it wasnt a good hud it wouldnt be sittin here discussin it with you would it
28
#28
0 Frags +
toads_tfif it wasnt a good hud it wouldnt be sittin here discussin it with you would it

>>>/r/tf2

[quote=toads_tf]if it wasnt a good hud it wouldnt be sittin here discussin it with you would it[/quote]
>>>/r/tf2
29
#29
-1 Frags +
yttriumtoads_tfif it wasnt a good hud it wouldnt be sittin here discussin it with you would it>>>/r/tf2

yeah i was going for the absolute bottom of the barrel there

[quote=yttrium][quote=toads_tf]if it wasnt a good hud it wouldnt be sittin here discussin it with you would it[/quote]
>>>/r/tf2[/quote]
yeah i was going for the absolute bottom of the barrel there
30
#30
0 Frags +
toads_tfif it wasnt a good hud it wouldnt be sittin here discussin it with you would it

And I dont have to look cool, I have to be clever, dont I?

[quote=toads_tf]if it wasnt a good hud it wouldnt be sittin here discussin it with you would it[/quote]
And I dont have to look cool, I have to be clever, dont I?
1 2
Please sign in through STEAM to post a comment.