Introduction to Games Design – HUD

GUI - David J E Smith, 2013

GUI – David J E Smith, 2013

As part of our Introduction to Games Design module, we were tasked with creating a GUI for a game. The way that this was to be done was to use a dice to come up with a theme for the game. I got quite good rolls and as such, I was left to create a GUI for a “Space-based Top Down Action RPG”.

Development - Hand Drawn GUI - David J E Smith, 2013

Development – Hand Drawn GUI – David J E Smith, 2013

First of all, I drew the above image in my sketchbook. Top-down RPGs are a particular favourite genre of mine. I know therefore that for maximum effectiveness, everything relevant to the player needs to be in one place so as to be able to minimize time spent looking for important stats such as health or where your abilities are on the action bar.

I then took the image into Photoshop to come up with the GUI you see at the top of the screen using the pen tool to construct straight lines, coloured on a seperate layer with the Multiply setting and bevel and emboss tool to raise the GUI elements up off the screen. I also use a glow effect on the text around the orbs.

This entry was posted in Introduction to Games Design and tagged , . Bookmark the permalink.

4 Responses to Introduction to Games Design – HUD

  1. Shaun says:

    I would use the left-hand orb as a dual mana/health meter and leave the right hand one for quick access weapons. This will make it easier on a mobile/handheld version. A criticism of Diablo was having to look left and right quickly to see how much mana/health I had, taking your eyes from the game window.

  2. Astro Adam says:

    It seems like there’s a trend in some games to have minimalistic HUDs. What do you think about that?

    • davidjesmith says:

      I actually tend to prefer more minimalistic HUDs/GUIs. Providing your menu system is half decent, it gives a game a more clean look and can make a game more accesible.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s