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.png

…an illusionary 3D interaction…

grim-fandango-interact.jpg

…and a full 3D interaction.

giphy.gif

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.jpg

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.

So much clashing. GET IT??..    :(

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

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:

Plants v. Zombies

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!

The Sims

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.

Hearthstone

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!