Jason Pook's Games Design Blog

Introduction to gaming- HUD/GUI Design

Leave a comment

HUD/GUI brief.

  1. Divide class into small groups (this can be done by drawing cards or rolling dice etc – you can use all choice based decisions done in this way to reinforce the concept of Chance/Alea mechanics in games design)
  2. Get them as a group to draw three slips from the lists above (again reinforcing that they can make their own* lists at a later date), and quickly develop their game concept and give it a name which they have to then pitch to the rest of the class (15-30mins should be enough).
  3. Following this Pitch they should then work on the development of a HUD/GUI that deals with the various aspects of their concept and is in keeping in terms of Design/Graphic Style and Design for the User.
  4. The students in groups then show their finished project (the following week) to the rest of the class for feedback.” Gareth Sleightholme’s brief on his blog.dice-choices

The idea was for each of us to roll a dice to reveal a number which corresponded with the list of numbers options.

I had to have Paul roll for me due to my situation with Skyping into lessons and this is the outcome i got. I’m designing a 3D side scroller for a 3D pixel game. It will be set in a interior/man made vehicle within a flight deck/ docking bay. It will be styled around a steampunk genre and will include dinosaurs.

Immediately I thought well what do i do with this and how do i go about it. Paul laughed as soon as he rolled dinosaurs for me as it was the worst of the bunch in the last column to implement into a game nevermind a hud.

First thing first i had to research what i was getting into which was steampunk, i had a brief understanding of the theme but a bit of extra research wouldnt do any harm for ideas.


  So these are some of the examples that i have gathered from google images ( and of steampunk and its general theme. As you can see the idea is that of mechanisms involving cog and screws, a very industrial look to it mechanical throughout everything with of course some steam. With all this in mind i already knew with my given selection what i would go about doing in the way of a HUD just still struggling in the way of dinosaurs…

To begin i knew from previous experience that i must undertake a form of design process before jumping into the full thing. So what do i have to consider in a design process? well for my style of hud i gathered a few different examples of what i should be considering.

turok hud

ideawow hud

These examples (image 1 turok, image 2 hud explained, image 3 wow)

So the image of turok and its HUD is purely to encorporate dinosaurs into my HUD if i look at this game turok which is all about dinosaur hunting the basic ammo + health + lives hud is something i can conisder.

The 2nd image is purely so that you can understand what a HUD is and what it might encorporate. I will be using this as a guideline for a design process to do some individual designs for HUD parts e.g. health bar or mini map.

The 3rd image is of World of Warcraft to give you an example of a more complicated HUD and show i have considered variety in my research.

I then moved onto my own design process, now i have researched my topic background i can successfully start planning and designing elements of my HUD.

HUD Designs

Heres just a few quick sketches of multple different designs i started with general full screen basic HUD designs, my personal favourite was the middle right as it encorporated the steampunk design brilliantly i decided id pursue this further throughout but the middle left i liked the idea of a small mini map so i would want to redesign and combine.

Moving on i thought i should seperate some specifics from the general main design so i started on a Health Bar, i took many different angles on this from games like mmorpgs with the basic red/green tube which depletes, to more of a street fighter style with the 2 conjoined health bars with a circle in the middle for a feature (usually time). i also tried to go slightly out of the box with seperated blocks which deplete, different angles for health bars and then pursuing the steampunk theme of rotation mechanisms which spin when lose and gain health.

With health bars tackled i wanted to do another feature of a HUD id need for my version which would be a weapon selection, i did this is varied ways with a different method for each time to try range it a bit more. There was the basic weapon wheel (my choice) to simple slide selections, a hold down button to pause game to select and change weapon option (bit like in ratchet and clank) and then more variations of the slide selections. i did like the design of number 3 as it would suggest the slected weapon as bigger and then the rest of them are smaller but visable maybe red as they are out of ammo etc. but i prefered the simple design of the 1st design the weapon wheel which you rotate to choose a weapon.

Then i addressed level up methods, many games go for the traditional bar and the closer the bar is to the end the closer you are to the next level e.g. pokemon so i did this and then explored other ideas. my favourite was the large number with the number close by with a 3d perspective so the number gets closer and bigger the nearer you are to the next level by rotation as your current level fades away. But simple arrows and lines etc just didnt cut it for my with my design so i tried my best to try be innovative.

This concluded my design process i was pleased with my multiple designs as it showed i had consider many methods before jumping into the final piece therefore giving me an upper hand on my overall insight into the design of the HUD.

HUD Steampunk 3d

And here is my final HUD i designed. As you can see i added a few annotations to the work to explain in detail what the HUD’s features and so just incase you wasnt sure ill go over them.

The whole HUD system is linked in a steampunk style cog mechanism system, so during and after fights etc cogs will rotate effecting both level and health also attributes depending on how it goes this would be accompanied with extra animation of occasional steam gushes when for example you level up to symbolise excitement. The level up is located in the top right and i did follow the 3d near/far level perception i has thought of for this design as i felt it fit well with the spinning cogs. The weapon wheel i chose is located bottom left with simple arrow key selection on your controller for example to rotate them and change equipment. I added a small controls bar at the bottom just for a usability feature just incase controls are confusing for first started the basics (none combos etc) are just there for reference. The health bar was a redesigned version of the basic health bar with an outline of a chain which i used to outline throughout for the steampunk mechanism, also an additional health bar to the side of the enemy is given in basic form (dinosaur involvement refernce to turok). Then the bottom right was a mini map and some attributes to show progress and character strength in level all powered by steampunk and cogs. Another feature i put in as an interactive HUD example was the action buttons i drew the steampunk character adaptation on my own with the expression like he is about to punch you which alarms for you to hit an action button to counter his attack (im a fan of these in games e.g. assassins creed iv or dead space).

Overall i was extremely impressed with my work and felt i did a well tailors and designed HUD in a steampunk theme especially.

My personal favourite feature is the idea of the animated HUD the cogs turn with chains and steam when you level up or lose health etc, i thought that was a strong innovative concept i came up with as im unaware of any games like that in especially steampunk design.

Things i could have improved on would be maybe to condense it a little the right hand side with the attributes i think if i had designed and thought it through a little bit more it could have been more compact e.g. just atk, def, tec, int and then click or press options to view statistics so its not interfearing with gameplay.

Other than that very pleased, i would now like to take this into photoshop to test my HUD design further with a more complete “game ready” shiny finish to it. Any comments or ideas for improvements on the matter would be much appreciated as its just a design nothing final.

Author: Jason Pook 3D

Current student at Hull School of Art and Design studying Games Design.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s