Mobile Variation

So for the last couple of weeks I have been working on improving the previous HUD.

Over my winter break, I designed three HUDs for three genres of games. I posted these on my professional Twitter account: www.twitter.com/asgamedesign. I received some feedback from Senior UI Designer, Richard Warner, who shared a number of constructive points to bring forward into my next project. 

After recreating one of the designs in Adobe XD with Richard’s ideas, I took more of his advice into consideration by creating a mobile iteration of the HUD. 

Original Design 

XD – Mobile 

This is the mobile version of the design. I took all of the previous components and scaled them down to a much smaller screen. I had to rearrange a number of assets in order to incorporate the additional buttons that have to take up screen space on mobile. I found this project a lot more difficult than designing for PC.

I never play mobile games so it took time to adjust to the number of extras needed on screen. This made it very difficult to arrange in a way that looked aesthetically pleasing as well as being functional. As seen in my research post for mobile UI, a lot of mobile iterations for games can look ugly when it comes to interfaces so it was a big goal of mine to change that in my design.

It is also difficult to design for an imaginary game. There are no mechanics, rules or buttons for me to base the design off of. This means that everything designed in the interface is a generalisation and more or less assets may be required for a real project.

Overall, I am happy with how this design turned out. It was tricky at times but the result was worth the issues I faced as I think I created a functional interface that is far more easy on the eyes than a number of mainstream FPS mobile games that I researched.

Mobile HUDs

In my previous post, I presented a number of modified iterations of a HUD I designed over my winter break. I followed the advice of Senior UI Designer, Richard Warner and feel like I incorporated his feedback relatively well. However, there is one point that requires more research to complete, a mobile version.

As I don’t play any mobile games and have never designed games for that platform, I completely overlooked the idea of creating an interface for it. I understand that many popular games are redeveloped into simplified versions for mobile players to enjoy and that, in industry, I may come across this type of brief. 

I decided to pick a few popular games to dissect in order to gain a better understanding of the elements needed in the transition from FPS PC games to pocket edition.

Player Unknows Battlegrounds (PUBG) – 2016

The PC HUD layout is very clean. The player and team health is displayed in colour coded bars on the lower left, while the lower right displays the minimap. The lower middle shows the player’s current weapon, ammo, health bar and armour bar. The upper middle shows compass directions in a narrow bar and the upper right shows the number of players remaining.

The mobile HUD is far more busy. This can be based on the smaller screen size but is also due to the player’s lack of keybinds. These controls must be displayed in on-screen panels and buttons for quick use. 

Immediately we can see that both the team information and the minimap have been moved to the top of their respective sides of the screen. The remaining player count has also been switched from the upper right to upper left corner. But both the player health bar and the compass have kept their place.

The interesting addition is all of the buttons. On the left we can see a controller stick for movement along with a backpack symbol to open the player’s inventory. The current weapon indicator has been improved to show both of the players weapons and allows them to swap quickly. It also now shows med-packs and utility which can be pressed for use. On the right we can see a large bullet symbol which allows the player to fire their weapon. There are also three movement buttons, crouch, prone and jump and a crosshair to allow the player to use their weapon scope. Up the side of the minimap there are also options buttons for settings, volume and microphone.

Conclusion

At first glance, I hate this HUD. It is far too busy and overwhelms me a little. I also feel that the text needs some revision as there is some overlap, especially around the compass at the top. I understand the need for the extra buttons but I feel that some symmetry or more aesthetic layout could have been used here. This layout strikes me as function over all else which can be good for ease of use but does not feel inviting or intuitive, especially for new players.

Fortnite – 2017

The PC layout is very exciting and colourful. The lower left shows the player’s health and armour while the lower right shows the player’s inventory, supplies, weapons and ammo. The bar at the foot of the screen shows the player’s level and progress. The upper left the team’s health and armour. The upper right displays the minimap and the upper middle shows a compass.

The mobile HUD is quite charming and presents the same fun and colour of the PC version while not overcrowding the screen. The minimap has swapped to the upper left corner alongside the player health and armour and the team information. The compass has remained in the upper mid section. The inventory and weapons bar have been separated. Now the player’s supplies are in the upper right corner along with the options button, while the weapons and ammo are in the lower mid stretch. The inventory and build buttons frame this bar. The lower left now holds a controller stick for movement while the crouch, jump and shoot buttons are on the middle right of the screen.

Conclusion

I prefer this mobile HUD far more, I think this is mainly due to its simplicity. The number of buttons don’t over face the player and even the colour and opacity choice are easier on the eye. I will keep this design in mind when I design my own mobile HUD in the future.

Minecraft – 2011

While not an FPS, I believe that it is important to consider ideas from other game genres. Minecraft’s PC HUD is very simple with all of the interface grouped in the lower middle section of the screen. The player’s inventory is displayed in boxes with their level progress bar, health and hunger laid out above.

The mobile HUD retains the simplicity of the PC HUD. It keeps the inventory bar at the base of the screen with a button to open the inventory menu. The health and hunger bars have been moved to the upper left of the screen and a menu button has been added to the upper right. Movement buttons have also been added in the lower left corner.

Conclusion

I love both HUDs for Minecraft, their simplicity really give players an easy and informative learning experience when starting the game. I really enjoy HUDs that allow players to explore for themselves without becoming overwhelmed or lost and losing interest in the game.

Final Thoughts

All of these mobile HUDs include the same elements overall:

– movement controls (lower left for access with thumb)
– shooting or additional movement (lower right for access with thumb)
– options/settings
– inventory or weapon swap buttons

These elements will all need to be included in my mobile HUD iterations and it will be interesting to see how they will change the existing layout that I have designed. I am excited to try this challenge over the next few days!

Adobe XD Variation

It’s been a while since my last post as I have been teaching myself how to use some new software and have had nothing to present until now. I have been using YouTube tutorials to learn Adobe XD, a programme for designing, prototyping and animating UI/UX. 

Over my winter break, I designed three HUDs for three genres of games. I posted these on my professional Twitter account: www.twitter.com/asgamedesign. I received some feedback from Senior UI Designer, Richard Warner, who shared a number of constructive points to bring forward into my next project. 

I chose one of the three original designs and decided to recreate it in Adobe XD, taking Richard’s advice into consideration. 

Original Design 

This was the original design for the FPS HUD and Richard’s feedback from Twitter. 

XD – Version 1 

This was the first version I created in XD. It is a direct recreation of the concept made on my iPad and varies very little from the original. The only real difference is the aspect ratio which, as per Richard’s advice, is now 1920 x 1080. Due to this larger size, I also incorporated the advice of my tutors to give the components more of a bleed space to the edges to cater for different sizes of screen. 

XD – Version 2 

This is the second version of the design and I have updated a couple of aspects. The diagonal angle of the frames is now symmetrical and far more easy on the eye. I have also updated the lower bars. The utility symbols have an empty state which will show when the player has used their consumables. The health and armour bars are also represented much cleaner with low opacity symbols for each bar and a colour coded underline for each. 

XD – Version 3 

This is the third version of the design. I discovered a feature in XD which allows me to blur backgrounds within shapes. I used this to replace the gradient look of the frames and also added a pale gradient line to the frames to give a reflective effect – like that of frosted glass. I thought this nicely incorporated Richard’s advice about considering differences between reality and gaming as the glass ties in with weapon scopes and helmet visors. I also created more states for the health and armour bars, similar to the utility states from the previous version. 

3 Week Practical Project Conclusion

My Opinion on the First Person Shooter HUD

I like the simplicity of this design and I feel that the visuals (font, symbols and bars) are all consistent with each other as well as fitting IP of the game. Reflecting on the design however, I feel that maybe I should have included the team’s current money, as many fps games tend to have a buying period at the start of the round to allow players to buy better equipment with their round winnings.

My Opinion on the Racing HUD

This is my favourite of the three designs as it is very minimal and easy on the eyes. The font used, again, fits the IP well and the layout does not obstruct any important areas of the screen. The main improvements I would make to this would be that the yellow banner atop the rank board does not stand out from the background as much as I would like. While I matched the tone to the yellow on the minimap, perhaps this should be a different, darker, colour.

My Opinion on the Action Adventure HUD

This is my least favourite design. While I like the layout of the health bars and the use of celtic patterns and fonts to reflect the IP, I think that the black and silver of the bars is a little too flat as well as being a little too large. I think this is something that could be improved with a colour gradient or even just lower opacity black, and a slight size reduction.

Creative Issues to Note

The main issue I had was with the IP of the games I was creating HUDs for. I pulled images from the internet to provide relevant backgrounds to my designs, but without a specific theme or mechanics to reflect, it is difficult to think of the requirements and especially their overall aesthetic. This was the most challenging when creating the action adventure HUD as that genre of game can have endless possibilities in terms of setting, theme, era and colour palette.

Things I Would Like To Learn/Explore Going Forward

I would like to apply the improvements mentioned above when designing more HUDs. In the future I would like to create a spider chart and pinterest board to form a general tone for the conceptual games that I am creating UI for. This will hopefully minimise the issues found when matching designs to themes in games.

My Action-Adventure HUD

This is my design for the Action Adventure HUD. I included the key display elements:

Health Bar

The health bar (red), magic bar (blue), and stamina bar (green) are all presented in a celtic/druid themed display, to match that of the theme of the game.

Minimap

Like Skyrim, I decided against a minimap as it allows for more immersive exploration in the game. A large map screen would be found in the menu but this would not benefit the gameplay and aesthetics of the game in this case.

Weapon Types

The second bar contains two circles, the first displaying the weapons selected, in this case dual wield swords. The second circle displays the selected spell, in this case a fireball.

Current Money

The second bar shows the celtic symbol for money followed by the amount of coins that the player currently has in their inventory.

My Racing HUD

This is my design for the Racing HUD. I included the key display elements:

Minimap

The minimap is very simple, highlighting the roads in light grey and the current selected route or race in yellow.

Speedometer

The outer gauge shows the car’s current RPM and the top number is the current gear. The inner gauge and lower number is the speed.

Laptimes

The lap number or street race percentage progress as well as the player’s current time are shown on the top right. The position of all of the race participants is briefly shown on the right when laps are completed or race checkpoints are reached.