Animation for the Creative Industries Second Year Vertical Slice Project

Graphical User Interface & Branding

I am working with Jon – one of the game design students on my team – on the GUI. He is learning UX as part of his course, so he’ll be doing the Figma/UE implementation, and I’ll be on the graphical/art side.

Inspo (click for link to board)

I looked at a lot of inspiration for the GUI from other games, specifically Gris and Ori and the Blind Forest. I made sure to apply key theoretical graphic design principles such as grids and hierarchy, whilst sticking to our style guide in terms of colour, texture and font.

This video was really useful in explaining the difference between UI design and other types of design. It reinforces the importance of consistency of the style guide – including typography, iconography and shape language. UI should act as an ecosystem, and cover level selection, loading screens and startup screens. “Layout is critical because it affects the way a user understands what’s on screen, [and how] quickly the viewer is able to navigate. And in games, we often need to give critical information really quickly.”

Here are some iterations:

UI Iterations

Another key part of the UI was fonts, logos and general brand design. I worked hard on this and came up with some solid fonts (see AI file here).

Brand Artboards
POS Logo Iteratios
Logo on Grid
The Logo (Orange)
The Logo (Green)

I ended up going with an altered version of the Tech Demo font. I made the Os look like Mark 15’s eyes.

In the process, I also came up with some in-universe logos for the facility, which I named AutoCorp. For this, I used the Midnew font. I continued the Mark 15 eye motif. I was able to use this on assets later and in the game as decals.

AutoCorp logos
AutoCorp Outlines

Additional Backgrounds/Logos:

Leave a Reply

Your email address will not be published. Required fields are marked *