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.