One Knight Studio © 2019

  • Yukkafuzz

Creating a UI Style

You'll always notice if a UI looks bad. You might say things like: "It doesn't look consistent with the game" or "it looks flat". But it is difficult, for those not in UI design, to say specifically what makes the design bad, or perhaps more usefully, what to do to make the UI look good.

I had never really done much UI design before taking on this project. Actually, I'd done very little art at all. But part of the fun of this project is to be constantly learning new skills, so when I got to the point where the default button and panel sprites bothered me enough, it was time to do some experimentation.

An early button sprite

I looked at a bunch of different button styles, from other games to websites. I knew the "feel" I wanted - clean, playful, slightly futuristic - but without a background in art, I really had no idea what features of a button or panel implied that feel. And there are a lot of features to mess around with: corner style, border thickness, border shading, fill shading, color, font, font color, hover-over color/style change. With all of these features and little to go on, that meant a bunch of trial and error to slowly refine the style that fit the bill. As seen above, I started simple without worrying about font. No rounding on the edges, and just a clean color in the middle. That produces buttons like you can see below.

Buttons with various background shades using early sprite

Not too bad, considering my experience. I certainly would describe these as clean. But it does not really achieve the playful or the futuristic vibes I wanted. So, I started to try things:

Progression of buttons

The iterations go left to right, top to bottom. You can see some just plain bad buttons - the second in the first row, for example - but as I got further in, I settled on some features. I started with solid fill, and tried several border styles: none, 3-D, top-right. Several of these just don't seem to be a valid button style. I went back to the solid border all the way around, but switched to the border being lighter than the fill, as well as trying flat corners, searching for that slight futuristic feel.

I finally felt like I was getting the "future" in it with the shaded fill. Still, I needed the playful and clean pieces. The two-corner designs accentuated the future-ness, but it didn't feel relaxed or playful enough until the rounded borders. The last piece was making it feel clean against the background, which I accomplished with a simple outline:

The final button with no text.

Now, the button sprite is just one piece of a fully designed button. Next was implementing EXO's color palette suitably into the button. As you can see across the website, I had an orange, a yellow/gold, and a dark maroon to work with, as well as all the neutrals. Since the game has lots of black, in somewhat realistic space, I figured bright neutrals should not be too prominent. Using that as a starting point, I created a bunch of test buttons.

Color sampling buttons

A couple of these were insta-nope for me: top left, yellow+orange - it clashes too much and the yellow background looks wrong against the orange color, and the gray+orange in the middle bottom, which didn't have quite enough contrast for my liking. For the rest, it took putting against the background in the game to truly decide.

Which did you pick? For me, the orange fill buttons are just too much against the dark background. Between the other two, it's a little tougher, but considering orange is my favorite color (and perhaps some other factors), I chose the gray fill with orange text.

Finally, no one wants their buttons to use Arial! So I went to the ever-handy Google Fonts and searched for candidate fonts. All the fonts there are free and open source, so it's quite convenient for projects getting off the ground. I mostly searched for monospace and sans serif fonts, since those can give futuristic vibes. I ended up with a few, and slapped them on the buttons to decide!

The font options

Knowing I'm looking for playful and futuristic, can you guess? A lot of subjective factors can sway you, and I have quickened a lot of the choices here; there are font sizes and bold/italic options to consider as well. I ended fairly happy with my resultant buttons, and I underwent the same process, albeit faster (font choice was no longer necessary), for the panel style and other UI styles across EXO. This doesn't mean these styles can't be improved later, but for now, enjoy!

Final button in context