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!

Simplicity… When, Where, and How?

Okay, so now that we’ve laid out what abstract image making is, let’s look at how it’s applied in contemporary American culture.

One really cool cultural read on abstraction is the perception of images that are usually made up of simple shapes. Depending on a few very subtle factors, a simple abstract image can give off two completely different vibes: Sleek/professional or child-like.

Can we appreciate that for a second? Based on a few little tweaks, an image can be read in completely OPPOSITE ways. You can see it clearly from Disney, who wants to be read as both professional and child-like, depending on the situation.

disney

The way that this is achieved can be broken into two . The more handmade and personal the subject looks, the more it’s associated with “child-like”. Conversely, the more machine-made and impersonal the subject looks, the more it’s associated with “professional”. To accentuate this machine-made effect, lots of straight/uniform lines are used and as much of the face is omitted as possible (the eyes are almost always the first to go).

The line between these two forms of abstraction are also incredibly fine. Below are some examples of this. Left is “professional”; right is “child-like”.
36396662-restroom-iconsstock-vector-man-and-women-icon-set-180381572business-people-avatars_23-2147498740165927514-mobico-icons-human-generation-gettyimagespeople-avatars_23-2147501881young-people-avatars_23-2147504397

It’s interesting to see how this plays out in the fine arts. Since much of it has moved toward abstraction with the rise of photography, it makes a lot of sense that the perception of it whiplashes between “conceptually sophisticated” and “my child could do this”. Depending on whether or not the viewer was exposed to the “sophisticated” concepts that re-contextualize abstract work with meaning (that’s usually exclusively held within upper class culture), the default interpretation of non-machine made abstract work is commonly “child-like”.

abstract
Link to the quiz

Emojis also face a conundrum from the same dichotomy of abstract image making, but expressed in a different way. More than ever, we are communicating through writing, which inherently has a degree of separation that causes crucial aspects of conversation like tone of voice to be lost. Emojis are the perfect shorthand to express that piece of information with minimal effort, however, because they look personable and friendly, emojis are often times seen as “childish” to use in professional settings.

Bar these (and I’m sure other) exceptions, generally with the rise of computers and automation, the impersonal and clean cut has become representative of progress, technology, economy, state of the art, and sleek. This can be seen in the rapid move toward simplifying logos in companies that want to brand themselves as such.

logo_comparison

I want to end by mentioning that it’s a bit of a misguided notion to think of minimal treatment as an all-purpose improvement. Though our current prevailing culture as a whole values “tech/sleek/progress”, we have to be aware of when those principles are inappropriate for a situation and when it calls for more literal and organic imagery. Examples can be drawn from when a brand or theme wants to evoke the opposite meaning of “technology”, “economy”, “state of the art”, and “sleek”.

Some themes include “play”:

…”Natural/home-grown/not over-processed”:

051

…”Traditional/Old/Vintage”:

…And “spectacle”:

On that note, it’s important to remember that just because abstract image making (at least in current American culture) holds this sort of meaning right now, it is always subject to change. These are just some observations I’ve made so far, but who knows how abstraction will be used in the future!

Anyways, I hope you found this as interesting as I did. Thanks for reading!

When Pictures and Language Combine

In my last blog post, I talked about how image making is just one big love letter to the human experience. Now I want to get into what language that letter might be written in. To do so, let’s start with abstraction.

So what exactly is abstract image making? For the purposes of this blog, I’m going to define it as the creation of images that are characterized by nondescript and often simplistic shapes. Because of these qualities, it has the capacity to be easily recognizable, relateable, and/or reproducible, all excellent traits for facilitating communication. This is especially evident in early languages where writing and drawing frequently meant the same thing.

ancient-egypt-hieroglyphics

But communication requires not just form, but meaning. Sooo… how do you build meaning into an image? Especially highly abstracted ones? Like words, reading an image requires a learned vocabulary and must be related to by borrowing from common visual/human experiences. It could be a common natural experience:

fire
Note how the icon takes the most important characteristics that define the subject and exaggerates it.

Or a man-made one:

Note that because experiences associated with a nation can vary widely (as opposed to something as universal as “fire”), a flag might mean something completely different to different people.

Speaking of repetitive association, one interesting subset of abstracted imagery is the alphabet (or really any other modular visual system, like sheet music). Each letter is purposefully designed to hold little to no meaning on its own so that a combination of its form can be used as an empty shell to fill with meaning.

 

Because of this, the line between the written word and icon are understandably blurry. At first it might not seem that way (at least for English) because we think of it as “reading” words and “seeing” pictures, however research has shown that we seem to process familiar words similarly to the way we process icons. Below, you can see it illustrated in a passage:

teaser-scrambledtext-01

In fact, typography and logo design are built on top of these principles.

i_text

Interestingly, because of this splitting between text and icon, some concepts are easier to convey through text, and others through iconography. This is why situations that require getting the quickest, clearest read oftentimes utilize a combination of different forms of image making.

th_427

Sometimes, what started off as an abstract image paired with text might even garner so much cultural relevance through repetitive association that its meaning becomes ubiquitous. When this happens, the text is often times dropped, because it’s safe to assume that everyone already knows what the image means. By examining which concepts and icons receive this sort of treatment we can really start to see what defines a particular culture.

mcdonaldsmcdonalds_logo

Below is a really simplified flowchart summarizing the ideas discussed above.

Abstract Image Making - New Page.png

 

Falling in Love

Have you ever looked up at the night sky and been bamboozled by the size of the moon? Where it just looked so big it seemed like it was engulfing the earth, every etching and crater so crystal clear that it looked like it was carved by kids chucking rocks at it? Well, it’s happened to me. In fact, once I was so awed by how bright big ol’ Cheese Face was in the sky that I decided to document it by snapping a picture of it. When I excitedly looked at my camera to see how it captured the beauty before me, I was dismayed to see something like this:

blue_moon

 

If you’re interested into diving into the subject of how we process sight/vision biologically, a really good book to read is Vision and Art: The Biology of Seeing. Be warned: A technical but good read.

I never really understood the standby advice to “draw from observation” until that moment. No one had really explained to me why it was so important and it honestly seemed like dumb advice, especially since using photo reference was so convenient. But looking at the sad photo, it suddenly became very apparent how easy it was to unknowingly strip away the very thing that you think is beautiful by leaning on something that’s presumed to be “correct”.

Objectively speaking, the photo reflected a legitimate reality with accurate renderings of scale, light, and color (as sensed by the lens of the camera), but it ultimately failed to express what I personally found so entrancing about the experience. That “thing” that I found so entrancing is the secret sauce of great image making. In a word, it’s love.

Love? That’s it? How sappy! How corny! Too simple! But isn’t it?? And the kicker? This appreciation for life is entirely intrinsic. That thing that you are enamored with could literally be anything and it will inform everything about how you approach image making whether you like it or not. Why? Because you’re a prisoner of love!

And like any good romance, there are bound to be challenges that must be faced. Many forces will try to convince you that your love is “not correct” or “stupid”. Here are some ideas that you might have to contend with:

  • “I wish I were as good/in love with the world the same way as X artist.”
  • “Everybody knows X is considered the most respectable form of art.”
  • “The world doesn’t need another drawing of/like X.”
  • “How can I completely change my style to be accepted by this cool group of people/instituion?”

Some or all of these thoughts might run through your head, but denying what really draws you into image making is like voluntarily declaring eternal love to the chum standing NEXT to your true love. The insincerity always shines through and you might just be changing yourself in pursuit of a bad time.

Until the question “To what part of life do I honestly craft love letters to?” is answered, I found it best to not lean too heavily on an outside interpretation for the answer. However, once the question IS answered, art and technology created by others become indispensable tools to help express that love.

So what might the different kinds of love look like? Here are a few that I just thought off the top of my head:

You could be in love with the way that light plays with its surroundings.

18j15nhw7opwajpg
Assassin’s Creed Concept Art

Or the expressiveness found in movement.

tumblr_n83rf22hqn1s2rx4co7_400
“Duet” by Glen Keane

The balance in type and graphical elements.

burundi_murambi_fy16_ko
Starbucks Reserve Branding

Elegance in simplified forms.

tumblr_n7tbulrwhy1tw3vf6o1_1280
By Ena Kim

 

Punch out vibrant colors.

psychedelic-pop-art-album-covers-26-lola-who-fashion-music-photography-blog
Ted Health and His Music Album Art

The beauty in patterns.

5x5-pattens1
Islamic patterns

The intricacy of machinery/engineering.

transport_modular_helicopter_2010_by_karanak-d5t0t4e
By KaranaK

Or hell, how about how cool hair/cloth/swoopy things are?

tumblr_static_96qa8h51o7c40ww0k4gk44k84
By Clamp

 

It could literally be anything. And the best part? There’s no right answer except the one that feels right to you! 🙂 So go, FOLLOW YOUR HEART!

I’ll end with a video of four artists from The Sleeping Beauty crew painting the same tree in different ways. Thanks for reading!