Skip to content
Start free
Get App

Visual Communication: Why Game Art Matters

Explains why visual communication matters in game design, using Gestalt psychology and affordance theory to show how interface and environment visuals guide players.

Key Takeaways

  • Visual communication is essential in every game, regardless of whether the developer considers themselves an artist.
  • Understanding why interface and environment layouts work, not just copying other games, lets developers make informed design changes.
  • Gestalt principles like visual hierarchy, grouping, and proximity shape how players interpret what they see.
  • Affordance theory helps ensure objects visually signal their function, reducing player confusion.

What the video covers

  • Game art serves two roles: aesthetic (beauty, style, mood) and visual communication (conveying how the game works).
  • Visual communication overlaps game design and must be considered from the very start of a project, even in mechanical prototypes.
  • Poor visual signals, like a treasure looking red, spiky, and flashing like a hazard, can break gameplay by confusing players about mechanics.
  • Environmental clues such as whether doors are accessible or walls are breakable are forms of visual communication.
  • Cognitive design theories from graphic design, UX, and product design can be applied to games, since game design is not purely data-driven.
  • Gestalt psychology holds that people perceive the whole composition first, and relationships like grouping, proximity, and placement shape how an image is read.
  • Visual hierarchy, a Gestalt principle, determines order of importance, such as making titles larger than body text or highlighting key game resources.
  • Affordance theory (James J. Gibson) holds that the appearance of an object gives clues about how it can be used.
  • The speaker demonstrates these ideas using the HUD of their game Dirt World, grouping hearts and keys versus coins and crystals to imply relationships.
  • Animation, such as a number lerping upward when treasure is collected, and high contrast are tools for directing player attention and communicating feedback.

Chapters

  1. 00:00Introduction: Game Art vs. Visual Communication
  2. 01:28Why Visual Communication Matters from the Start
  3. 02:46Cognitive Design Theories Overview
  4. 04:00Case Study: Dirt World Resource HUD
  5. 05:46Gestalt Psychology and Visual Hierarchy
  6. 08:11Affordance Theory and Environmental Clues
  7. 10:48Feedback, Animation, and Attention Direction
  8. 12:42Closing: Principles Behind Interface Design

Answers

Questions about this video

Why does the speaker say visual communication must be considered from the start of a project?

A mechanical prototype with visuals that mislead players, such as a treasure that looks dangerous, can break the gameplay because players cannot understand the mechanics. Visual communication is tied to game design itself, so it should be addressed early.

What is the role of Gestalt psychology in the Dirt World HUD example?

Gestalt psychology explains how the grouping and placement of resource icons imply relationships. Keys and hearts are paired in one corner and coins and crystals in another, all within a single bar, suggesting the whole line is related while the pairs are more closely related to each other.

What is affordance theory and how does it apply to games?

Affordance theory, from psychologist James J. Gibson, holds that people infer how things work from how they look. In games, this means visual cues like door or wall appearance can signal whether something is accessible or breakable.

Full Transcript — Download SRT & Markdown

00:00
Speaker A
Most of the people who watch this channel are either making games or have the intention of learning to make games at some point. And you're all going to have different levels of art and technical skills. Some of you might be predominantly programmers and you don't really
00:16
Speaker A
make art for your games. You source your assets from somewhere or whatever. And some of you might be more artists gradually learning to code so that you can put your ideas into a game engine.
00:26
Speaker A
Today I want to talk about visual communication in games and it's kind of one side of what art in games does. We've got game art which is meant to make a game beautiful, give it a unique style, create an emotional mood. That's important and the degree to which you're able to do that in
00:44
Speaker A
your game is going to depend on your art skills and so on. But then there's this other side which is visual communication. And this is important in every single game. And even if you don't consider yourself an artist and you're using art assets from somewhere else or you're hiring contractors
00:59
Speaker A
to make art for your game, you really need to understand this because this is the overlap between game design, like designing the the mechanical interactions of your game and making it fun, and the visual element. Not only is visual communication really important,
01:14
Speaker A
it's important from the very start of a project. Because if you make a mechanical prototype and you give it to someone and they're really confused because you made an item of treasure, but it was red and spiky and flashing and that communicated to the player that it was dangerous and they
01:28
Speaker A
should avoid it. The gameplay is broken because the player can't understand the mechanics, right?
01:32
Speaker A
So, that's the overlap we're talking about here. Um, some other examples of visual communication in games can be things like environmental clues about whether a door is accessible or uh whether a wall is breakable or all of that kind of stuff. They can also be elements of
01:49
Speaker A
the interface which tell us what to pay attention to at any given time. So, I'm going to be talking about some theories of cognitive design that are used very broadly in graphic design. They're used in web and UX. They're used in traditional product design. And it's the sort of stuff that
02:05
Speaker A
you would learn on a university course in any of these subjects that involve some element of designing things that people look at. So theories of cognitive design are how we design things so that they work with the natural tendencies of the human brain. Now game design isn't a science. No
02:23
Speaker A
matter how many CEOs of companies want to make games by just looking at data and going, "Oh, 7% of people like this game feature and only 3% of people like this game feature." You generally can't design games entirely that way. But what we can do is bring in science from other disciplines
02:41
Speaker A
and use it here, which is what graphic designers have been doing for the last 60 or 70 years.
02:46
Speaker A
The main theories I want to talk through are visual hierarchy which is an aspect of gestalt psychology. The second one is affordance theory which is when people look at things they get clues about how they work based on how that thing looks. That's affordance theory. And it's important to
03:03
Speaker A
have like a base level understanding of all of these things because game design overlaps with everything the player can see on the screen. And I don't know if you're aware of this, but they're called video games for a reason. You look at them and you play them. Even if your game
03:18
Speaker A
is really fugly programmer art, if players can't understand what they're looking at, they're not going to be able to play the game. There's a there's a fundamental relationship between interacting with the game mechanics and understanding them visually. That's why
03:32
Speaker A
they're called video games. So, I'm going to give you a quick example from the game I'm currently working on. This is Dirt World. It is a procedural puzzle platformer, although that's not really that important for what we're doing here. I'm just going to use this as a
03:45
Speaker A
quick example to talk about the kind of thinking that goes into visual communication in games. So, first off, let's just ignore the game world and talk entirely about those resources we see up at the top of the screen. Now, they are kind of in a line. Over this side, you've got keys and hearts.
04:02
Speaker A
And hearts are kind of obvious. If you run out of them, you're dead. The keys also relate to a lose state of the game because if you run out of keys, you can't draft any more rooms and that's
04:11
Speaker A
kind of a a soft way of losing the game. And then if we go over here, we've got coins and crystals which are easily recognizable as some sort of currency. Now, these things are all together in a bar at the top of the screen, and that implies to a viewer that they are related to each other,
04:28
Speaker A
but they're also apart from each other. So this suggests that the stuff that's over in this corner is similar in a particular way and the stuff that's over in that corner is similar in a particular way. And this is how we generally organize interfaces. Now you might hear all
04:44
Speaker A
that and think, so what? That's where those things usually go. They're usually along the top. All you need to do to know that is play games and kind of copy what they do. And for the most part, that is
04:55
Speaker A
a pretty decent strategy, especially if you're copying good games. But if you don't know why things are done the way they're done, then if you do need to make any changes, you won't understand the original logic of why those things were where they were. So why do we put that stuff up there?
05:17
Speaker A
There's a school of psychology that started in the early 1900s called Gestalt psychology. So it's used in graphic design for magazines and posters and things which predate video games.
05:29
Speaker A
And a lot of the conventions that come from that Gestalt theorydriven graphic design feed through into video games and how we design things like interfaces. The baseline idea of Gestalt psychology is that when humans look at something, they take in the whole context. And
05:46
Speaker A
the reason why this is helpful for thinking about games is often when we make games and when we make art assets for games, we're super zoomed in on that one thing. We're super focused. But what Gestalt psychology encourages us to do when we're thinking about graphic design and visual art is
06:01
Speaker A
to think about the whole thing first. When Gestalt psychology is applied in graphic design, the idea is to think about the overall composition and how the different parts in that composition relate to each other and then that will give you a sense of how people will read the image. So the idea that
06:18
Speaker A
the title of something is bigger than the rest of the text is an example of Gestalt principles.
06:24
Speaker A
We're saying that this thing is more important and then that is directing someone's attention to that thing before that thing. It's creating like an order of importance in a game context. We can also think about stuff like interface. We have that row of stuff along the top. You intuitively understand
06:40
Speaker A
what that stuff is from playing other games. But the theory here is that even if you hadn't played other games, you would still create associations between these things based on how they're positioned. They must all be related to each other because they look kind of similar and they're in a
06:55
Speaker A
row. It's all like an icon with a number next to it. We've also got this pairing up in the top left of the hearts and the keys and this pairing up in the top right of the coins and the crystals.
07:07
Speaker A
And that suggests that this entire line of things is related, but these two things are more related to each other than they are to the other two things. These are all Gestalt principles that get applied in graphic design. like pairing things together, putting them in specific places,
07:24
Speaker A
all changes how someone understands what they're looking at. If you want a deeper dive on this, I've done a video lecture on it previously. I'll put a link in the description. Perhaps the most important entry point to Gestalt thinking when you're doing visual design is the idea of a visual
07:40
Speaker A
hierarchy. And you can see this just by looking at any poster. The person who made that poster has gone through some process of determining what's most important for people to look at first. So there might be a big image to draw the eye and then there might be a big title. They're basically
07:56
Speaker A
saying look at this first and then there are other decisions made to make things seem more or less important. So there is an information hierarchy of how important is different information and then that is translated by the graphic designer into a visual hierarchy. So the graphic designer will use
08:13
Speaker A
their understanding of human tendencies to say right we want people to look at this then look at this this information is unimportant so we put it down here and make it very small. This can come down to anything as simple as like the contrast of your character on the background. I deliberately
08:28
Speaker A
chose this very obnoxious bright teal for the character in my game so that it would be easy to see where they were on the screen. And I don't really use that color for anything else apart from the keys, which are another important thing. When there's one on the screen, you need to see it and
08:42
Speaker A
go and collect it cuz it's like the most important resource in the game. So, by deliberately creating a very high visual contrast there, I'm messaging to the player, this is what you should be paying attention to right at this moment. I think when people start making games, they get very caught
08:56
Speaker A
up in what's realistic and how would this look in reality. And that is important for certain types of immersion. But the kind of visual communication I'm talking about is important from day one. Like from the first mechanical prototype you make. If you give a mechanical prototype to someone
09:11
Speaker A
and they can't tell what's supposed to be a treasure and what's supposed to be an enemy and stuff like that, you're not really going to get an accurate sense of how they play the game because they're not getting accurate information about what things in the game do. The thing about
09:24
Speaker A
making games is we also have movement on screen, which is one of the cheapest ways to make people pay attention to something is to like animate it or flash it or whatever. So, in my game right now, I'm going to run over these juicy emeralds. And if you just look over at the the number up in
09:40
Speaker A
the top, it doesn't immediately jump 50 every time, even though that's what the emeralds are worth. It counts up. That's a really common thing you would have seen in lots of video games. But the reason it's done is so that the player can see the movement out of the corner of their eye
09:56
Speaker A
and know that the variable has changed. Because if the variable just suddenly jumps every time, they're not going to have been paying attention and they're not going to know it's changing. The difference in numbers is maybe not as important to the fact that the player just needs to know
10:08
Speaker A
that the number is going up. Making sure there is an animation there and the number goes and lurps from the original value to the new value is a way of visually communicating to the player that they just collected some treasure. We can use movement, we can use contrast, we can use
10:26
Speaker A
variations in color to draw the player's attention to things. Game mechanics only work if the player understands they're there. If the player doesn't understand how the mechanics work, those are just kind of rules that are operating like under the hood of the game. The game mechanics are the rules
10:41
Speaker A
that the player actually understands, can see and operate directly like the controls in a car. A health bar gets chunked, character takes damage, and we flash a bit of the health bar before we drain it. And that helps you to see that that change has happened. In both of those methods,
10:58
Speaker A
the currency animation, the health bar chunking, we are using visual contrast and movement to draw the players attention to something that is occurring that they need to know about. But visual hierarchy also applies to game environments. So elements like movement, lighting, they can all be
11:14
Speaker A
used to draw the players's attention to something, maybe in order to prevent them getting lost, or it could be to deliberately distract them if we want to create a secret or something like that.
11:24
Speaker A
Visual contrast is still going to play a role in determining what players pay attention to and we can achieve that through texture, color, lighting and so on. We can also use movement. So we can have objects like windb blown flags, flashing LEDs, spinning ventilation fans to draw attention
11:41
Speaker A
to particular places. The basic idea of gestalt psychology is that people take in the whole of an image and they draw inferences from how things are arranged in that image. The most important part of Gestalt psychology for you to understand here is the idea of a visual hierarchy which is
12:03
Speaker A
simply that elements of your game are going to draw more or less attention depending on how they look. And that applies to things in your game world and it applies to things in your interface.
12:33
Speaker A
Did you know that this channel is funded by Patreon? By signing up to my Patreon, you can receive the following benefits. Socialize in the Discord with myself and other people who share a creative ethos. Take part in monthly supporter streams where I play test your games and tell you
12:53
Speaker A
why they're rubbish. Get a warm fuzzy feeling in your soul by financially supporting this channel, ensuring that I don't have to go back to working in a university or creating horrendous Skinner boxes at a free-to-play games company. I've just opened a new tier on the Patreon. And
13:12
Speaker A
this is for people that don't like this channel and want me to stop doing what I'm doing. For £10,000 a month, you can get me to stop making content indefinitely. the channel will stay up, but if someone pays that £10,000 a month, I will not make any more content the whole time their
13:29
Speaker A
subscription is active. But if you like my content and you would like to support at a lower rate, then those lower tiers are available and they do not cost £10,000 a month. Thanks. Now, back to the video. The second theory I want to talk about is affordance theory. And if Gestalt psychology
13:49
Speaker A
is most commonly used in graphic design, then affordance theory is most used in product design like things that we physically use like this mug with some lovely reindeer on. Affordance theory comes from cognitive psychologist James J. Gibson. Uh 1979 book the ecological approach to
14:08
Speaker A
visual perception was the last sort of thing in this chain of research that he did. It was also used by his partner Elellanena J. Gibson who was a expert in literacy and child development and you would also heard of affordance theory if you read any of Don Norman's work. Don Norman wrote
14:25
Speaker A
the psychology of everyday things and the design of everyday things. Those books are basically used as textbooks for product design and for digital design for games, apps and web. So Gishnalt is about how things look and affordance theory is more to do with how we use physical products.
14:44
Speaker A
But the thing is video games, they're video games. You look at them and you play them. So they're simultaneously visual media and an interactive product, which is why both of these ways of thinking are helpful. The theory of affordances encourages us to think about how something looks
15:00
Speaker A
and the information that that provides about how it functions. In traditional product design, we'd use this to explain how the usage of my lovely mug is implied by its shape. Right? It's got a handle on it. It's got an empty space in it. Even if you'd never seen a mug before, you could look
15:21
Speaker A
at that and intuitit what it was for. And this is basically what affordance theory is about. [Music] A drinking vessel affords holding a liquid and being held by a person while they drink it. A door handle affords being held and turned and is generally positioned at a comfortable height to
15:41
Speaker A
do so from. There are lots of examples of this that you can think about in terms of designing game environments or levels. So for example, if we have the design problem of why can't the player open certain doors, okay, we can create like a visual clue as to why some of the doors can't
15:59
Speaker A
be opened and we can create a story rationale for that as well. So lots of post-apocalyptic games have rubble everywhere creates a very easy way to block a door or we can have like a post disaster where there was some sort of plague and we can weld the doors shut. Right? That's an example of
16:17
Speaker A
where the environment designers for those games were thinking in terms of affordance theory. They were thinking, how can someone look at this door and immediately know that it can't be opened?
16:27
Speaker A
Affordance theory can help us to understand how players are going to recognize things from the real world in the game and how that's going to influence how they interact with them. It can also help us to understand how players bring information from one game to another. When players
16:43
Speaker A
look at objects in games, their understanding of how those objects work is going to be a mixture of what they know about the real world and the broader conventions of video games as well. Uh, another thing my game has is these crystals, these blue crystal shards. And there's various
17:01
Speaker A
ways of collecting these. If I just take this carrot home to the wizard, he will give me some crystal shards as a reward. See? Just throws them out. eats them out. Didn't give me many there cuz he doesn't like carrots that much. There are various ways of getting the crystals
17:17
Speaker A
in this game and they have a bunch of different uses in the game. And I can go and collect the crystals that fell from that asteroid as well. The crystals have had a bunch of different art styles. And I ended up settling on this because I wanted something that looked valuable, but could
17:34
Speaker A
also plausibly be dug out of a rock or found in an asteroid. That might seem like a very small thing, but it is the kind of thought process that you need to go through when you're deciding on things
17:45
Speaker A
in your game because even if you don't make the art asset look nice and beautiful, players are still going to have assumptions about how that game object works based on how it looks. So, the bit where this crystal looks nice and shiny and has this little VFX behind it isn't that
18:02
Speaker A
important to get right early on. You can work that out later in your project. But the fact that the crystal is some sort of like naturally occurring jaggedy crystal is actually quite important for visual communication in the game because that lets us know that there's a way of procuring these from
18:19
Speaker A
like blowing some rocks up or something like that. This is what a affordance theory is all about.
18:27
Speaker A
And look, I know some of you are more practically minded. And that means that when people wheel out the theory, there's a tendency to see it as academic word salad, but the point here isn't really to learn or use these terms. I'm not saying you need to go around talking about affordance
18:44
Speaker A
theory or gestalt theory. It's more to understand the fact that there is a a set of principles behind why professional interface designers and professional art directors arrange things in the way that they do or choose the iconography they do. It's not just vibes and copying other games.
19:05
Speaker A
There is a rich history of scientific inquiry into how people perceive images. And if you understand how that stuff works, it will make your game development easier because you'll be able to make decisions much more quickly about how a thing should look and where it should go. [Music]
Topics:game designvisual communicationgestalt psychologyvisual hierarchyaffordance theoryUI designgame artindie game developmentcognitive designHUD

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play
Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools

More from Indie Game Clinic

View All
What is Fun? A Game Design Introduction — Transcript28:58
What is Fun? A Game Design Introduction — Transcript
4,619 1 English
Can an Idea be TOO Unique? [I Review Your Games] — Transcript19:44
Can an Idea be TOO Unique? [I Review Your Games] — Transcript
3,820 1 English
Their Games “Failed” – What Did They LEARN? (Design Prof Reacts) — Transcript33:30
Their Games “Failed” – What Did They LEARN? (Design Prof Reacts) — Transcript
6,400 1 English
Your Game Must Do These 2 Things — Transcript23:31
Your Game Must Do These 2 Things — Transcript
4,736 1 English
Develop Better Games, Faster, with “Design by Constraint” — Transcript49:33
Develop Better Games, Faster, with “Design by Constraint” — Transcript
9,637 1 English
Game Mechanics & Systems Thinking — Transcript39:25
Game Mechanics & Systems Thinking — Transcript
7,224 1 English
Something Is Wrong With My Dog… — Transcript17:25
Something Is Wrong With My Dog… — Transcript
2,543 1 English
How Did Humans Start Using Cocaine? — Transcript13:08
How Did Humans Start Using Cocaine? — Transcript
2,296 1 English
Queens of England — Transcript26:47
Queens of England — Transcript
4,321 1 English
An Introduction to Academic Writing — Transcript7:35
An Introduction to Academic Writing — Transcript
1,033 1 English
Market Mechanics Ep 25: How I Find A+ Setups — Transcript25:17
Market Mechanics Ep 25: How I Find A+ Setups — Transcript
4,937 1 English
1V2 CLUTCH! | I Took On 2 Players Alone!Aur titles: 1V2 IMPOSSIBLE CLUTCH — Transcript4:44
1V2 CLUTCH! | I Took On 2 Players Alone!Aur titles: 1V2 IMPOSSIBLE CLUTCH — Transcript
590 1 English