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.