A lot of changes going on -- learning about typefaces and typography

Note: The nutrition/energy/mineral icons that pop up when the resource tab is clicked are placeholders. The original game showed icons when the resource tab is clicked, so I needed to have something pop up when I had my tab clicked, but the priority of making great icons for something like that is at the bottom of my list right now.

Old Style Sheet

My previous conversation with Dave about the happenings of this project, he made a big point that I still have a ways to go on reigning in the inner glows and outer glows everywhere. He wants everything to feel more crisp and controlled. I should also start thinking more about the type sets that I've been using because the current ones that I have feel a little "juvenile" or "kiddish". He suggested I look for some advice from people with more experience in graphic design. Colors are also getting kind of muddy and not as saturated as he'd like. The divider lines in the UI are also too strong and are commanding almost as much or more attention than the titles, so I need to either get rid of them or knock them back quite a bit. The information I have under Energy Allocation also needs to be organized in a better way. It just needs more structure and be less floating text.

I spent a fair chunk of time going out and looking for more typefaces that look more thought out than googling "good free typefaces". And just in general going back and working in all of these suggestions into the style sheet before I start implementing the changes everywhere else and animating them.


New Style Sheet

So in this new style sheet, what I've done is I've taken out all outer glows for the vast majority of things. Reducing all glowed strokes to 1px, and almost all inner glows to 2px with the exception of the inner glows of the Nerve Staple button, which I left because I think A) it draws significance to it, and B) I think it looks really cool. I've also gone in and added some a little bit of texture to everything, pulling some reference off of Andre-L Huynh's "No Way Out" UI designs.

Typefaces/Families I'm looking at and why (I'm not traditionally a graphic designer so take all of this with a grain of salt and the knowledge that things like typefaces are still a learning process for me) -- 

Really really digging the DIN family of fonts. One caveat here is that real fonts cost money, a luxury that I don't necessarily have with my college student budget. I found a free font that is essentially FF DIN Pro. I think I've settled on a family of fonts for all basic information. It's clean and it's really legible. The letters aren't too round, and the spacings aren't too wide.

I really like the Futura family of fonts. I think that they're really clean. I think that the Oblique version of Futura could work well as a Header/Title font, but part of me feels like it's too round to fit the more geometric aesthetic that I have going on. So I'm still on the outs with that one. It's a contender maybe for headers/titles.

ISOCT looked cool when I saw it on the web, but in use it's too light and can't be read.

Looking for something for a button typeface...I'd like something that doesn't look overly cheesy and sci-fi. I like the footprint and legibility that Dyno and Aero Matics have. I think Aero Matics might work better for things like buttons, because it's slightly boxier and will fit that space better.


https://www.artstation.com/artwork/y40yQ -- Work done by Andre-L Huynh

Civ Beyond Earth

Civ Beyond Earth

Endless Space

Another thing I'd like to implement in the next pass are some shadows/gradients to help the UI pop out against the background, because I do think a weakness that my UI boxes are running into is that the cyan/blue edges are transparent and can get lost against the game world.

Civ Beyond Earth