Designing UI

While working on my Senior Capstone I have been doing a lot of work on designing UI. For anyone not familiar with game design lingo UI is short for User Interface, there are many things that can classified as UI but most of the time UI refers to any element that tells the player something about their stats for example: health bars, ammo counters, and speed gauges. There are many types of UI and deciding what type of UI to use depends on what kind of game experience you want the player to have. Designing UI may seem like an easy task but UI is one of the most important ways the player gets feedback so it is important that a game has clear UI that does not clutter up the screen.

Getting Started:

When starting to design UI the first thing I like to do is make a list of all the mechanics that require UI elements, this gives you an idea about how many different UI elements you are going to need. Once I have figured out what UI elements that I am going to need I organize them based on how important they are to player feedback. The image below is the list that I created with my artist for our co-op mech game, we made a list of what each player needed to see and organized it by importance.


When this list is complete I begin thinking about what type of UI will best fit each element. There has been a lot of research done on type of UI and currently it is accepted that there are four types of UI which are: Diegetic, Non-diegetic, Spacial, and Meta. Each of these types of UI are useful for different game play experiences and I will discuss what types of UI work better for different games.


Diegetic UI is a UI element that is in the game world (the player character would be able to see it) an excellent example of this is in the Dead Space games. The main characters health is displayed on his back so the player can always see it, all the other UI elements are also on the characters armor so the player can always see their stats but the screen is not cluttered by the UI. Diegetic UI works really well in horror games because it doesn’t clutter up the screen giving the player more room to see whats going on around them. Games that have a heavy focus on realism are also good choices for diegetic UI because the UI elements being visible to the character makes sense.


Non-diegetic UI is the most common form of UI and it refers to UI elements that only the player can see. A good example of non-diegetic UI is World of Warcraft. This form of UI is useful in FPS and RPG games since the player has a lot of stats to keep track of. Non-diegetic UI is good for player feedback because the player can always see what their health, ammo, and other stats are at. The drawback of this form of UI is that the screen can get cluttered if there are a lot of UI elements, it is very important to be aware of how much of the screen is devoted to the UI.

Spacial UI:

Spacial UI is a UI element that exists in the game world (like diegetic) but the player’s character does not see it, an example of this is in Left 4 Dead the player characters have outlines around them that can be seen through walls. Spacial UI is commonly used to complement other UI elements, like in Left 4 Dead the players heath, ammo, and equipment is Non-deigetic but the players are outlined using Spacial UI.


Meta UI are elements that are not spatially visualized for the player the most common form of meta UI is in the Call of Duty series the player has non-diegetic UI for their ammo and grenades but meta UI for their health (the screen gets covered with more and more blood the closer the player gets to death).


Once you have decided what form of UI you want and what systems need UI you can begin creating the UI assets. While working on my Senior Capstone I worked with my artist a lot creating UI elements that are easy to read and understand. Don’t feel like you are limited to a simple bar either there are many different ways to make interesting and unique UI elements. Remember that UI readability is the most important aspect of UI design, if the player can look at a UI element and not immediately know what it represents then you have done something wrong. Finally the last piece of advice I have is to not be afraid to combine UI elements from multiple UI types, many games have diegetic elements along with Meta elements. The beauty of game design is that there are no real rules just guidelines so feel free to explore when creating UI elements.

Designing Cooperative Mechanics

This week for my senior capstone game I have been working on designing mechanics for our cooperative mech game that would cause the players to have to work together. There are lots of games in the current market that have heavy emphasis on cooperative play games like Left 4 Dead, Evolve, Borderlands, and Destiny. Co-op play is not a new concept and with the advent of online gaming it has only gotten more popular, however the question remains how does a designer get players to work together?

Enemy Types:

One of the most popular ways to get players to work together is to create enemies that can incapacitate a player. Left 4 Dead does a great job of this, in Left 4 Dead 2 four out of the eight special zombie types incapacitate a player with their attacks. When one of these enemies attacks a player they are unable to move or fight back until an ally kills the enemy, this encourages players to stick together and heal each other because a lone player can easily be picked off. Another game with great examples of enemies that force players to work together is Army of Two. Army of Two is a game created from the ground up with co-op in mind, there are many types of enemies that have heavy armor in the front this creates a need for the players to flank. One player usually draws the enemies attention while the other player shoots their weak spots.

Character Classes: 

Another popular way to encourage teamwork is to create different character classes for the players to pick. This allows the designer to create objectives that only certain classes can complete, if the players know they need a certain person alive to complete the level they will work together to protect that player on the way to objectives and while they are completing objectives. When each player is a different class they bring more tactical options to the table and this creates a symbiotic relationship. In the game Resistance 3 there is a co-op campaign where each player has different abilities one player can heal others but they don’t have many offensive capabilities so it behooves the other players to protect the healer so they can last longer.


Some games use puzzles to encourage co-op play, games like Portal 2 have co-op campaigns that are all about solving puzzles as a team. This method can be a very good way to encourage teamwork, the players will not be able to progress further in the level until they work together to solve a puzzle. The danger of this method is that if one player has done the puzzle before they can just tell the other player what to do and that eliminates the need to really work together.


The methods I discussed above are by no means the only way to get players to work together, there are tons of other ways to get players to cooperate. When I was thinking of ways to encourage player teamwork in my senior capstone game I looked at a lot of co-op games and how they solved this problem. One of the mechanics that I came up with for my game was to have a super powerful weapon that requires both players to maximize its effectiveness. The pilot fires a slow moving projectile that deals average damage, the engineer can then shoot the projectile to make it explode dealing high area of effect damage. This encourages communication and rewards the players for working well together. I also created a mechanic where the engineers UAV has to be refueled by the Pilot. The UAV is very useful in combat and its in the pilots best interest to keep it fueled so that it can keep scouting and supporting the pilot. When designing co-op mechanics the biggest thing to remember is to make sure both players feel equally powerful, if one player feel less powerful then the other then they will get frustrated and not want to continue playing. If any player does not feel like they are contributing to the team then they won’t see the point of playing and as a designer you want to keep players invested as long as possible.

Creating Visual Design Documents

When making video games, creating documentation is a very important part of the process. Documentation can be helpful in many different ways such as documents can be used to help keep the team on the same page about design changes, they can also be used to help explain game play to investors or publishers, and can also be used to help you arrange your ideas and think about the game in different ways. Personally I like to start making my visual design docs by sketching out some ideas, sometimes I will sketch out three different layouts that I may use and sometimes I have writers block and I just doodle. Even if I don’t come up with something I can use later this process helps me get in a creative mindset and also allows me to get any of my basic ideas out. After I’m done drawing I start doing a digital block out of my document and at this point I decide how the page is going to be laid out and how much space I will need for each thing I want to talk about. I will write a headline for the mechanic or game feature I want to talk about then I create a large square to represent how much space I need on the document to talk about that feature, this gives me an idea about how big the document needs to be. Once I have the whole document blocked out I finish up my first pass by adding art and any text I need. After the document is finished I always show it to the team for feedback, its always good to show it to at least an artist since they may have some suggestions on how to change the layout of a document to help with flow. When the team is finished giving me feedback I go and make the changes and the document is done. I really like making game design documents, it forces me to think about how all the mechanics work together and it gives me a way to show the rest of the team what my design plans are.