Unconventional UI in Video Games

So this is a little post that I wanted to put up to showcase a special form of image making: Video games and interactive digital media.

The reason why interactive digital media is special is because it offers a space to utilize both abstract and structural aesthetic. What exactly does that mean? I means, it can seamlessly move between a flat interaction,

flat-ui

 

…an illusionary 3D interaction,

grim-fandango-interact

 

…and a full 3D interaction.

giphy

 

Amaze balls! But with all this freedom, where do we even begin in terms of delineating interactive elements from non-interactive ones?

A good place to start is to look towards physical games– where 2D and 3D elements have mingled together for centuries while still having to delineate interactive and non-interactive elements.

crossshotsetup-copy

Okay, but how do you maintain this digitally? Looking at the image above, looks like parts of the board are illustrative– or dare I say skeuomorphic? And 3D?? It seems to also be breaking the limited color palette rule with clashing colors!

As you can imagine, thinking about this strictly in the realm of 2D as you would design for a flat surface, becomes a bit of a mess. So first let’s start with acknowledging the nature of games. Because game elements are oftentimes sitting on top of a very busy backdrop filled with colors, a common technique to make game elements easily readable is to mark them with giant blocks of vibrant (and often clashing) colors.

Image result for american football team jersey colors
So much clashing. GET IT??.. 😦

The same technique can be seen in video games where incredibly simple interactive elements are placed within very busy/rendered scenes:

heavy-rain-playstation-3-ps3-196.jpg
Heavy Rain

 

Another way of delineating between interactive and non-interactive elements is to create a sense of dimensionality. One way of doing so is to use thick edges to accentuate the boundaries between interactive and non-interactive elements:

pvz3
Plants v. Zombies

 

…which, if you think about it, is just a highly abstracted drop shadow. Speaking of, drop shadows are great for creating dimensionality when layering game elements on top of each other!

05
The Sims

 

And last but not least, you can tie all of these techniques mentioned above with one of the greatest strengths the digital interactive medium provides: Movement.

giphy
Hearthstone

 

So yeah, these were just some of the ways that I’ve noticed how games influence UI design in unexpected ways. I hope you found them as interesting as I did. Thanks for reading!