Introduction to Art Direction for Games
In this article I will cover a beginner friendly intro to art direction for video games. Using practical examples from games already out there, I will help you take your first steps to improve the visuals of your projects and give you further resources on how to best continue learning. This is also a documentation of my own learning journey as a programmer, into the world of art direction.
What is Art Direction?
The visuals of a game are of great importance to its success. Every visual element created for a game has a certain impact on its playability, emotional charge and visual beauty. To ensure that all these visual elements align with the goals of the production, and enrich the player experience, is the purpose of art direction.
When we say good art direction, people usually think of beautiful games with gorgeous art style. You might think of Journey or Firewatch. You might want breathtaking visuals to help you sell your game and to create compelling marketing materials.
Although beauty and striking visuals are one of the things that art direction can do for you, it is only a minor part. After all, not every game idea will benefit from breathtaking surreal visuals of a game like Journey, but all games need good art direction. Bad art direction doesn’t just make the game look visually boring, it will make it unplayable. For example, badly designed visuals can confuse the player. Lack of visual hierarchies can cause the player to not see the elements that are important for the game play.
A good direction ensures that during the game play, the arrangement of the visual elements does the following things: communicates the message of the scenes in the game; creates an emotional charge which supports that core message and lastly looks visually interesting and intriguing. The previous sentence is the summary of the whole post. Understand this, and you got a working plan on how to make your games visually more compelling.
How to Art Direct Games
A video game is a series of moving images. The player can manipulate the content of these images through the input methods of the game system. If you art direct every single one of these images, and ensure they work individually and together over time, you have art directed the whole game.
We break up the problem like this because designing a single image is way easier than designing a whole game at once. It allows us to focus on a section, diagnose the visual problems the game has and map out what needs to be done about it.
Games are of course not just 2D images. Art directing every frame of a game is not feasible. However we can take snapshots of the different parts of the game, and art direct those. If you think about it, movies and animations are not all that different. Sure, viewers can’t change the world of the film they are watching, but it is still unrealistic to art direct every frame of a film. That is why filmmakers create story boards and focus on designing key shots from each scene.
You might correctly point out that people don’t play games the way they view an image. People move around, do unexpected things, and their understanding of the game world is build in movement, over time and within the context of the game play.
At its core however the interaction the player can have with the game world merely complicates the design space by adding new dimensions to the possible states the gameplay can be in. Expressed in simpler terms, it just adds more possibilities you need to account for.
The more degrees of freedom your game has, the more dimensions are added to your problem space. Every new input possibilities, freedom of movement, ability to change the world makes it harder and harder to art direct the game. That is why making a gorgeous point and click adventure is way easier than an open world procedural first person shooter where you can fly around and deform the terrain.
If you don’t need to give the player these freedoms for your game to work, you should consider adding constrains to decrease the amount of work you need to do for the art direction. Limiting scope is the easiest trick to good art direction.
At a certain point, all the potential states you need to design for become overwhelming. It becomes impractical to try to go over them one by one. However just because the player can do many things, it doesn’t mean the player will do all those things. All these different potentialities are not equally important.
The real world offers a very high degree of freedom as well. Yet observing people’s movement patterns within various spaces shows that people tend to use a space in the exact same way over time. That means we walk the same walk, sit in the same place and look at the same areas.
This is crucial for architects, interior designers and city planners, because otherwise it would be impossible to design a space. Just like in architecture, art direction for video games with high degree of freedom is about continuously refining the visual elements until they work from all the important perspectives and modes in which we interact with them.
If you have played Counter Strike, you might remember this vantage point from the map Train.
Looking at this environment as you would passively look at an image, there is nothing remarkable about the vantage point. You might even miss it. The designer could actively bring your attention to that area through things like lighting, form language, contrast in colors, etc.
However, we understand images in video games within the context of the gameplay. If you are playing the role of the attacker, your attention will be directed towards the vantage point, even if it is not a particular high contrast area. That is because someone could very well be hidden there. On the other hand, if you are the defender, you will look at that area. You will try to assess if it provides you a good location to defend from.
How we view the game world is heavily intertwined with the gameplay. What grabs our attention in one context, is just background accessory in the next. Also if there is visual ambiguity in the game world, we move around to try to understand it.
Having said all this, this doesn’t mean it doesn’t matter what color we use for the vantage point, how it is lit and what forms we use. Here is an example:
Changing the color doesn’t just increase the discoverability of the vantage point. It also affects how easy it is for the attacker to defeat the defenders, or how favorable certain long range weapons are in this map:
In summary, games being interactive means that the problem space you need to design for is more expansive. How we understand the images in a game is based on the gameplay and what it demands from us. At the end of the day though, games are still made out of images. There is a science to how we see and understand the world. We can play around with the different parameters making up our visual model of the world to communicate specific messages to the viewer, invoke emotional response and hold their attention. Let’s see how that goes.
What is even Good Art Direction?
Good art direction is about good communication (legibility and readability), emotional resonance and visual interest.
Let’s go over them one by one.
Legibility, Readability and Effective Communication
Legibility is about what you understand, when you look at a frame in your game. When we look at images, we try to decipher what we see. We break down the image in smaller elements. We identify these smaller elements and try to make sense of them.
An image has good legibility, if we can effectively read and understand the important points the image should communicate. This means using the principles of contrast to highlight important concepts and affinity to blend out unimportant ones. Boosting the signal, reducing the noise!
At this point you might ask yourself, “what is the main message of a frame of my video game?”. That is a very good question and one you have to constantly answer to art direct.
What the visuals in a frame should do, depend on the gameplay. It changes as the player progresses through the game. So the first question you need to answer is the following: how does the player’s relationship with the game system change as the player goes through the core game loop?
Here is an example from my latest game Puzzling Places. A 3D jigsaw puzzle game where you put together hyperrealistic miniature models in VR.
The core loop above describes the different states the player goes through. In jigsaw mechanic, the player looks at a piece and first tries to understand it through pattern recognition. Then checking in her memory, the player decides if the piece could possibly match an already existing segment of the puzzle. If yes, she attempts to connect that piece. This either succeeds or fails. Success should be rewarded. Failure causes the player to sort that piece somewhere for later use.
Depending on which of these states the player is in, the game elements that are most important change.
For example, let’s look at the receiving reward section. Giving the player a positive feedback through visuals is the most important thing. The unpuzzled pieces in the periphery however are unimportant. Whereas when the player is searching for the next piece, the periphery pieces are the most important. The pieces already completely connected are unimportant!
For each of these states, you need to create a table of importance hierarchy! The importance hierarchy lists the most important visual concepts that communicate what your image needs to convey. For example, for the reward section in Puzzling Places here is what needs to be conveyed to the player:
- Attempting to connect two pieces was successful
- This is a good thing, and the player made progress
- Some info about the connection event (where it happened, how large were the pieces, etc.)
Notice how what the image needs to convey only has a few entries. Images that try to do too many things are doomed to fail! If your gameplay demands too many things from the player at a given time, chances are you have more than an art direction problem. You have a game design problem! You equally have a game design problem if you don’t know your game loop well enough to know what the player needs to see in that section.
For the reward section, at the top of the importance hierarchy is a visual concept that communicates a successful connection with a positive emotional charge. We decided to use an expanding wave to represent that visually.
The expanding ring should have very good legibility and be on top of the visual read hierarchy. That means it is the most prominent thing the player sees on the screen.
The importance hierarchy will inform your decisions regarding shapes, colors and forms of the objects on the screen. You try to bring the stuff on top of the importance hierarchy to the front. This is achieved through contrast and affinity, size on the screen and various other visual techniques. On the other end, you try to hide away whatever is not important. A good art direction is as much about things you decide not to show as the things you show!
Let’s use a real example from the game Transistor to illuminate the points above.
As you are casually going about the world of Transistor, the environment around you and the stories it tells are at the top of the importance hierarchy. After all it is also a narrative game, and the world is an important part of the story being told. So visuals defining the world of Transistor are readable.
The playable character, Red, is also up there in the importance hierarchy. Look at the values and hues in the scene. Through contrast, the legibility of Red is ensured. The hue used for Red is unique for her and it stands out. On top of that, there is enough value contrast between Red and the background, so that you can easily spot her.
You can move around your playable character. What if your character, designed to stand out on a white background, moves to a place where the background is dark? Will she blend into the background and the player lose sight of where she is? The design of Red is pretty smart. There is contrast within the character of Red herself:
Since Red has internal contrast in both value (brighter and darker spots) and hue (red and green), it doesn’t matter where you move her, she will always be visible!
As you move Red around, the importance hierarchy shifts a bit. Since you are moving, it becomes more important to always know where you are in order to properly navigate. This change is reflected in the visuals. The friction between the Transistor and the ground causes sparks to pop up. The high contrast in value, as well as the motion, ensures that the character of Red becomes a better read when she moves around.
Your importance hierarchy is constantly changing as the player moves around and plays the game. In Transistor, for example, in part of the combat, the environment and the story telling part of the world become irrelevant. There, the most important thing is where your enemies are, what blocks you from hitting them, and how far away you are from them.
To reflect this change, the art direction simply and beautifully blends out all the visual world building to a uniform color. It creates a high contrast between the background and important information such as the topology of the battle field.
Notice how what was signal, the world building visual elements, becomes noise during the battle. By removing this noise, the legibility of the image massively improves without the need to do much more!
So how do you know when the player’s situation has changed, and you need to update your importance hierarchy table? You can deduce it from how the game is going.
For example, in the game Stronghold, you create production buildings to gather resources. If you don’t have enough villagers to run the production units, it becomes important for the player to know this. As this moves up to the top of the importance hierarchy, the player’s attention needs to be brought to the buildings. The game uses rotating red stop signs to achieve this.
Sometimes it is hard to deduce from the gameplay’s state that the player’s interaction with the game system has changed. Because sometimes these changes are based on decisions happening in the player’s head! How could we know of that change? We let the player tell us.
For example, in the game Hitman (or many other games such as Assassin’s Creed), there is the concept of the sense. Both games also have narratives. That’s why the world building and the environment design is quite important. One mode the player can be in is the explorer mode. In this mode the player goes around and takes in all the world building and environment art. However, the player might switch to planning or gameplay mode. Here the player tries to understand the information that is relevant for the core gameplay. An example would be where the guards are or which objects are interactable. The player can notify the game of the mode it is in by pressing a button and just like Transistor, the game literally blends out whatever is not on top of the importance hierarchy.
Another example from Hitman is weapon selection mode. During this phase, the weapons become the most important things, so everything else is similarly blended out through reducing contrasts.
The solution above is non diegetic (not of the game world). However you can also have fully diegetic solutions that are more subtle. In first person shooter you can typically switch between the third person camera to over the shoulder or even zoomed in scopes.
Notice how the good art direction here is not merely due to the fact that techniques are used to increase the legibility of the important objects in the scene. It is also to have the wisdom to know that you should visually separate these modes to begin with! Instead of trying to make the same visuals work across all these different player interactions. Once the importance hierarchy list has changed sufficiently enough, you should split it and design a different solution for each.
In my experience, a lack of clear visual hierarchy is the number one reason why most images fail. Creating an image with a clear message on your screen, already brings you a long way. At this step, you have ensured that while your game might not win the prettiest game of the year award, the visuals are at the very least not hindering the gameplay.
Our Visual Mental Model and its Attributes
How do you visually push an element up the ladder of the visual hierarchy of an image? There are many ways, and all have something to do with how we decipher images and understand them. The easiest way to ensure an element is noticed is through the principle of contrast.
The thing that is different, is the one that stands out. On the other hand, elements that are like each other in one way or another are visually grouped together as we read the image. That means using affinity we can push things down the read hierarchy of the image.
You can create affinity and contrast along any of the attributes of our mental model of the world. These attributes are the axis upon which we decipher images and understand them. These are things like color (value, hue and saturation), lines, shapes, light, texture, rhythm, position, size, orientation, etc., as well as higher level semantics such as various categories (utility, cultural, etc.).
Analyzing an image based on how it fares along these attributes or dimensions is to diagnose what is wrong with an image. You understand why certain things stick out or how to make them blend away.
You don’t need to play around with all of these for every image you design. Just keep most of them constant and play around with a few that best suit the purpose of that stage of the gameplay. Art direction is mostly a problem solving process. Most of the time, the parameters you will change are determined by various constrains imposed by your production needs.
Each of these visual attributes could get a post of their own. As a matter of fact I have a specific blog post for color, Introduction to Color Theory for Games, Art and Tech, and have also written about things like texture in my Creating Painterly 3D Scenes: preparing assets for NPR.
In summary, the bare minimum your game’s visuals need to do is to successfully show to the player what she needs to see. What exactly that is, is determined by your production needs (position in the game loop, narrative of the game, etc.). To ensure solid communication, you need to make sure your “visual reads hierarchy” matches your importance hierarchy. That means what the player should easily read, is what has the best legibility in the image. You achieve this by playing around with all the different visual attributes which we understand images through.
Art Direction Checklist Item 1: What should the player see? Make that readable.
Emotional Resonance
Everything we see triggers memories of our personal experiences. Visuals that remind us of specific things, make us feel the emotions associated with those memories.
We want the player to feel emotions which match our production needs. Visuals in Hollow Knight make us feel a certain sense of heaviness. Like a candle, placed in a dark chasm, fighting the wind to burn just a little bit more. This matches the narrative of the game well. But it serves the gameplay and resonates with the experience the gameplay brings to you.
Control makes us feel unsettled. A chaos that seems to follow an order we don’t quite understand. At the same time the spaces extrude power.
The first time I saw someone playing Transistor, by just looking at a single frame, I asked them if this is a game about a city trying to reach utopia and failing at it. Transistor heavily uses Art Deco to support its narrative goals. Art deco is an art movement that started at a time of imperialism, where people thought they had reached the end of history. Art Deco radiates a sense of power and arrogance with its imposing angular shapes. For this reason games like Bioshock use it to explore themes such as utopias and our efforts to build them.
Transistor is not just about the city, however. It tells a deeply personal story of Red and the beautiful memories she has built in various corners of the city. This contrast is felt on Transistor’s use of soft and hard edges throughout the game and the round shapes contrasting with the angular ones.
In summary, evoking emotions is all about associations. As a designer you use visual elements which remind you of your own personal experience and make you feel a certain way. If your audience shares this experience with you, they will also experience the same trigger and hence the same emotions.
This means that shaping emotions is inherently subjective. People from various backgrounds might have different associations with different colors, shapes and textures. Some experiences are more universal than others (sun sets, blue sky, touching rough surfaces) and some less universal (that color used in your favourite Cartoon Network show which reminds you of Saturday mornings).
One important thing to talk about regarding shaping emotions are mood boards! You can collect images that make you feel in the way your project should feel at the end. Then you analyze these images across all the attributes already discussed. You try to figure out the quintessential elements. These elements lead to you feeling the emotions you wish to replicate. Once you figure that out, the rest is just about finding ways to creatively apply these concepts to your game’s visuals.
For example, here is one of the mood boards for Puzzling Places.
We want the players to feel calm, relaxed yet focused. We want them to be satisfied, experience clarity and a sense of meditative flow.
The image on the left, gives me a sense of satisfaction and order. I call it the Marie Kondo, does this spark joy image. On the right, we replicate this feeling by creating geometrically rhythmic placement of the puzzle pieces in the game world.
Similarly the blue-yellow color scheme gives me a sense of clarity and calmness. Very probably due to association with blue sky, so we recreate that color scheme for the game.
In summary, you want what you are saying to align with how you are saying it. The emotions the visuals of your game evoke should resonate with your narrative, audio design and how the game play makes the players feel. To do this, you need to seek out images that make you feel a certain way, and try to understand which part of those images you need to apply to your game art to bring the same emotions to your game.
Art Direction Checklist Item 2: Emotional resonance. Align what you are saying, with how you are saying it through associations.
Visual Interest
Some images are compelling. They hold your attention and keep you engaged.
You want the visuals of your game to be compelling. Both for marketing reasons as well as to keep your players interested. Just like the other sections, creating compelling images is about understanding how we see.
While we are trying to understand an image, we are engaged. Once we figure out everything there is to know about the image, we disengage. The key to visual interest is variation. You can add variations along any of the attributes we discussed before.
For example, in this shot of Transistor, you can see variation of rhythm in the positions of the various lights.
In the below image there is variation in shape groups. Between the triangle, art nouveau-esque round forms and the art deco-esque imposing squares. Narratively these shapes are also motives associated with the different elements.
In this section alone you can see variation in size, texture detail density, color, shape and rhythm.
You can take any game known for its visual beauty and you can easily spot variations in different forms. In the shot below from Journey, you see variation in the rhythm of the landscape, positioning of the graves, their size and orientation and slight color variation on the screen.
After reading so far, it is hopefully apparent to you that these games don’t just look good because they have variations in visuals, but because they have very clear legibility and visual hierarchy (high ratio of signal to noise) and evoke the right emotions in us while looking at them!
Harmony and Chaos
Not any added variation is the type you want in your visuals. Adding a bunch of things on the screen can make your game appear chaotic! Chaos is when we attempt to understand what we see, and get to the conclusion that we have no idea what we are looking at. That means we don’t understand the relationship between the elements we are observing.
Being in chaos makes us physically unwell. Unless that is something you need in that segment of your game, you should try your best to create visuals that look harmonic.
Thankfully creating harmony is a well understood field. As you are adding variations to your game visuals to increase the visual interest of your game, you should make sure that the variations added relate to each other in a simple way which our brain can easily understand. For example, having objects that vary in size with ratios of 1:2:4 can invoke a sense of order while adding visual interests. However randomly adding colors to your scene that don’t relate to each other, will create chaos.
In summary, to add visual interest to your scene, add variations along the attributes already discussed. If the relationships and ratios you introduce get too complicated, your game visuals can get chaotic. This will not just undermine visual interest, but also the emotional tone of the scene, as well as its legibility.
Art Direction Checklist Item 3: add variation to your visuals to keep the player engaged. Keep an eye on your harmony/ contrast meter as you are designing your visuals.
On Motion
So far I have been mostly discussing images, as if we are designing posters. Obviously games are all about movement!
However, motion at its core is nothing but the change in the various attributes we have already discussed! Change in position over time, change in color, change in size, rotation, texture density, line quality, etc.
So time just becomes another dimension you design for. Just as you check how your visual attributes vary across your 2D screen, you check how they change in time. The same workflows and principles apply there too. You use contrast, affinity and information density to ensure your elements are legible across time. You check what the change of attributes across time remind you of and you shape viewers’ emotions by hooking in their personal experiences. And finally you vary these attributes over time to add visual interest while keeping an eye on harmony.
Here is a simple example, our aim is to highlight one of the balls. As stated before, contrast makes things stand out. What is different is the one that is noticed. Here the ball is changing its position attribute over time, so we notice it:
However if everything was moving its attribute overtime, then nothing would be special, and legibility would suffer!
The added variation on the other hand will make the visual interest more compelling. Here is a real example of adding variation. In Puzzling Places, animating small detail, we try to vary the movements to keep it interesting.
How about emotional charge? Certain movements equally remind us of certain things. Consider the The Heider-Simmel Illusion. Looking at the movement of the triangles we assume narrative and emotions. In reality, its just shapes moving around on a canvas.
Games being mostly non-linear, time doesn’t just flow in one path. There are a bunch of different paths it could go. You would need to check all these to design the player’s visual experience.
As mentioned before, this is easier on games with less degree of freedom. At a certain point, where all the possibilities become overwhelming, it is time to prioritize. You isolate the path ways and events that are crucial to your project (gameplay, narrative, marketing, etc.), focus on nailing those down and hope that the visuals between those snapshots will also look good due to interpolation.
On top of that, you should start putting more focus on visual attributes that are more global. That means they remain more constant and relevant through the different perspectives, under the different non-linear path ways the player might choose and different states in the game loop. This means focusing on things like the global colors of the object, their texture density and form language instead of line motif. Line motif here is based on the orientation of lines on the screen from a given perspective, which can easily change with the player slightly moving the camera.
For very important sections you can temporally take freedom away from the player and force them in a state which you can easily art direct for. For example, doorways force the players to go through a certain perspective, which gives you the chance to reorient the player from time to time and control their first impression of certain areas crucial to gameplay or narrative without making a cinematic cut scene.
Art Direction Checklist Item 4: Check how your attributes change in time and check for motion. Prioritize important snapshots across all the possible states the gameplay can be in and focus on attributes that have the greatest impact across the different possibilities.
Politics of Design
So far we have been talking about art direction but not how to be an art director. These two are very different things. I would like to end this post with a short note on this.
Making a creative team is a dynamic problem with no absolute solutions. Truths are in constant flux and you need to refind balance after small changes. So what you read here is merely my current opinion on art direction.
In order to have a chance at designing anything of quality for your game’s visual, the bare minimum you need is an explicit, established path way to clear decision making. Designing visuals looks deceptively simple to those from the outside. Left to the non-designers, you would have a day to do tasks that need weeks and you need to constantly lead pointless arguments to do what needs to be done.
Not many non-programmers in the team think they should have an opinion and a right to participate in the decision making of how the code base handles memory allocation. That discussion is locked behind technical concepts. However, most think they should contribute to the design decisions, despite the lack of expertise in the area.
If the team is not well structured, this can very easily lead to a design by committee dynamic and long hours of the dreaded “I like this, you like that” discussions.
As you might have noticed in this post, art direction is about constant problem solving. Just like any other task, it is about resources and budgets, workflows, goals and expertise. As the art director, the very first thing you need to do is diagnose if there is a well establish system in place to enable good work and if not if you have the power to create one. Not having this, your visuals will very probably fail, even if you have the most talented artists working on the team.
Good systems ensure that the people working on creating the visuals of the game are briefed with clear goals of what those visuals should achieve and the team’s expectation matches the budgets allocated for the task. Separating the aiming from the execution is crucial for those working on the tasks! Once it gets to execution, you should minimize micromanagement and leave the creative decision making of how to achieve the goals to the task owner. Of course, you need to predefine simple metrics of measuring success. The power to decide needs to be paired with accountability. This is crucial for the growth of the individual and the team. Making mistakes is an essential part of innovation. The accountability should not be focused on penalizing mistake, but helping the individual to reflect on them and learn from them.
While there is much left to be said, this post is already long as is. Below you will find various resources that helped me break in to the world of art direction, it might do the same for you.
…
You can follow me on various socials, which you can find on my website: https://ircss.github.io/
Further Resources and Continuing Learning
- Adam DeGrandis, Fast, Cheap and Flashy An Indie Art Direction Adventure, he well establishes that important connection betwee art direction and classical 2D composition: https://youtu.be/rSk8adHotDA
- Miriam Bellard, bringing some lessons from architecture, cinema to games: https://youtu.be/L27Qb20AYmc
- Vision: Color and Composition for Film by Hans Bacher. A brilliant book breaking down the process of seeing and what can be learned for entertainment production: https://www.goodreads.com/en/book/show/36205148-vision
- Framed Ink, a classic on harnessing the power of composition to communicate concept through images: https://www.goodreads.com/book/show/8010707-framed-ink
- Design for Motion: Fundamentals and Techniques of Motion. Covers some of the same concepts but with more focus on motion, and workflows: https://amzn.eu/d/8fH83em
- The Visual Story: Creating the Visual Structure of Film, TV and Digital Media. This book is a bit bloated, and not as tight as the resources mentioned above, but it has a good focus on workflows, analyzing the task through diagrams, etc.: https://amzn.eu/d/hLXRaN0
What I suggested above is the most distilled down resources I could compile. I have around 300 art direction books. From films, to architecture, city planning, typography, games, etc. They are all worth reading. I am sure if you start with the books above, it will just be the beginning of your own personal journey.