Design For The User (Rabbit Heart GUI/HUD)

Below are some screenshots from my final design for the Rabbit Heart GUI and HUD project.

 

titlescr

The title screen has three buttons that display Continue, New Game and Option buttons, these become visible when the cursor is hovered over images of Ululu, these emit a red aura to give a visual key to the player. I wanted to include some of the development art work created by Gareth and Paul in my designs for this project.

 

ululuhud

Ululu’s in-game HUD showing health bar, compass, equipped weapon, exo suit and inventory bag.

 

invscr

This is the inventory screen showing five slots within the bag, three of which are occupied.

 

itemscr

The item selection screen gives information about the selected item and options for the player. Again some of the original art work is included in the background.

 

 

mapscr

The Map screen shows Ululu’s current location and shows points of interest.

 

 

exoscr

This is the view from the Ninja Bunny exo suit, in the middle is the HUD screen displaying compass and enemy location. The bar to the left displays the energy status of the Ninja Bunny, with ammo being displayed in the right hand corner. At the top right of the screen is an ejection pull handle that enables Ululu to exit the exo suit when its energy is depleted.

http://rabbitheartgame.wordpress.com/

Advertisements

Designing for the User. Rabbit Heart GUI and HUD ideas.

As part of our Designing for the User module, we are to design a GUI and HUD layout for a video game being designed by our tutors: Gareth and Paul which is called Rabbit Heart.

Below are some designs I have come up with based upon Gareth and Paul’s artwork, designs and ideas.

GUI ideas

Below is a screenshot from a working menu screen in Flash. I have designed it using images borrowed from the Rabbit Heart blog using PhotoShop and Flash.

Rabbit Menu

Colour theory

colour wheel

The colours that we see in our everyday lives have different meanings to us, even though we may not realize it! Through the centuries colours and what they relate to have become embedded within our sub-conscious.

During the last hundred years or so (especially with the advent of consumerism), the way in which companies use colours (together with typography) in their advertising campaigns influences us to choose what to buy and who to trust.

Below is a brief example of what the most common colours are realized to represent.

Red:

  • Love and Romance
  • War, Danger and Power

Yellow:

  • Happiness and Joy
  • Sunshine and Warmth

Blue:

  • Trust and Loyalty
  • Faith and Heaven

Green:

  • Greed and Jealousy
  • Safety and Harmony

Orange:

  • Enthusiasm and Determination
  • Creativity and Success

Purple:

  • Royalty and Nobility
  • Extravagance and Mystery

Black:

  • Elegance and Formality
  • Death and Evil

White:

  • Innocence and Purity
  • Cleanliness and Perfection

GUI Design and layout

Nathan_Drake's_journal_10

In the Uncharted game series, a good use of GUI can be seen in the use of Nathan’s journal which is used as a reference guide to solve puzzles and quests. The journal is accessed by pressing the select button then the journal is placed in front of the main character and pages are turned (just as a book is) so that the player can locate clues in the form of images and writing to help solve puzzles within the game.

 

This is a good use of graphics that relate to the game in a strong visual sense without the need to bring up a separate menu screen.

Games Design: Designing for the User

Driving Game GUI’s

Burnout Paradise

burnout2

Burnout Paradise has a game GUI menu to show the main world map that shows challenge locations and options to change some settings but also has a good in game GUI built into the in-game HUD. This is a very good feature as the player doesn’t have to pause or exit the game to enter an online game, as a player you carry on driving in the same position in the online mode just as in the offline mode seamlessly. The in game GUI is positioned to the left hand side of the screen to avoid obscuring your view of the road ahead, and it is well laid out with an easily distinguishable colour scheme.

 
Gran Turismo 5

GT51

By stark contrast Gran Turismo 5 has a very complicated GUI lay out, there are lots of options and game modes for the player to explore. For me the layout is too complex and slow, loading screens seem to pop up every time you want to change something or enter a different game mode.