UIDesign | designbyaidangrennen

The Devil is in the Details

Posted on December 7, 2015 by aidangrennen

Designing games is one of the most fun things you can do, however many people don’t realize how many tiny details need to be tweaked and iterated on. One of the things that my team and I worked on a lot is the targeting reticle. A reticle is and UI element that is used in video games to show the player where they are aiming their weapons. The reticle may seem like a small detail but if the reticle does not read well the shooting will not feel as refined. It was a really interesting experience working on a reticle and I wanted to share it with all of you.

Research:

I decided to look into other shooter games to see how they handled their reticle design. The first games I looked at were other mech games such as the Mechwarrior series and Chromehounds. The biggest thing I gained from looking at games like this was that most of the reticles were designed to look like targeting systems that are found in modern fighter jets. The look in games like this is supposed to remind the player of military equipment, this is due to the fact that the game wants to give the experience of being in a futuristic military setting. A lot of the more modern shooters have much more simple designs for their reticles. Many games want to keep the UI as minimal as possible to make their game more realistic.

Designing for Korku:

When designing the reticle for Korku my artist and I first started by talking about the kind of sights that would be found on WW 1 artillery. My artist created a bunch of different ideas for the reticle and as a group we discussed the pros and cons of each design.

This picture shows the first pass on the different reticles. The biggest complaint with our original reticle is that it was very large and did not feel like it was accurate. We quickly decided that each player would have a different reticle depending on what role they were playing (Pilot or Engineer). The pilots reticle ended up being the square one in the bottom row. Since the pilot had a shotgun we wanted something that showed where the spread was going to go. The final design for this reticle did not have the dots in it, we felt that the dots gave players the wrong idea about where each shot is going to go. The design that we picked for the engineers reticle is number 12, the engineer had heavy cannons as their weapons and we decided that we wanted a reticle that looked like an old artillery sight. We made a few changes to the original design, we wanted the bottom of the reticle to come together like a V, the dot in the middle was where the bullets were going to go and player responded really well to it.

Conclusion:

The biggest lesson I learned from designing a reticle is that the first thing to do is decide what kind of weapon the reticle is representing. If the weapon is very accurate you probably want a small reticle, if the weapon is futuristic you may want to help show that with the design of the reticle. The biggest thing to remember is that if the reticle does not read well the player will feel like the weapon is not very accurate. The reticle may seem like a small detail that will go unnoticed but its going to be something the player is looking at the entire time they are playing your game so it is important to make it interesting but also useful to the player.

Designing UI

Posted on October 31, 2015 by aidangrennen

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:

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:

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:

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

Conclusion:

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.