GUI Portfolio
This is the portfolio demonstrating some of my work in the context of game UI's.
This work differs from my normal web work as it has more graphical freedom than a standard website or blog design.
PROCESS
I treat the development of a UI as a similar process to LOGO design.
While in tradititional web design a UI is strongly guided by the information architecture of a site, the corporate branding of the client and the web standards and usability a Game UI adds other factors.
Entry and in game menus can have standard formats an in Game UI, or HUD, requires playability as an important factor.
One of my all time favourite HUDs comes from X-Wing as balancing the various flight simulator style dials was a challange of its own, when combined with zapping TiE fighters. I have borrowed from it here.
Warcraft 3 was a great example of a classic RTS HUD that became totally intuitive after use. World of Warcraft has taken that to the next level. WoW's Interface is one I particularly like as the seemingly random imagery of the customisable buttons suddenly gain tremendous importance in the context of the game.
Typically I'd sketch a series of ideas for the logos, icons or screen. Then I'd take the best ones and lay them out in black and white in illustrator. Then I can work them up using photoshop.
#1
Zombies ate my neighbours
Imagining a remake of this SNES classic, perhaps on a handheld I re-created the logo and a menu screen.
click pic to enlarge
#2
Zombies ate my neighbours
A splash screen for the game, featuring the smoother logo.
click pic to enlarge
#3
Manga-Style Mech Combat Game
here is the main menu
click pic to enlarge
#4
Manga-Style Mech Combat Game
Here is a concept for a HUD using a slightly more complicated display than and average FPS. I wanted to capture the warlike feel of games such as COD4.
click pic to enlarge
#5
HUD detail - ammo and damage meter
Here is a detail of the players readouts, including ammo for its larger weapons and damage reports of the suit.
click pic to enlarge
#6
HUD Detail: Objective display
Here is a detail of an upcoming objective, I wanted to give the feel of a crackling video screen hinting at what lies ahead.
click pic to enlarge
#7
Details of Mech HUD in Illustrator
I often make stuff up in black and white in illustrator before colouring it in Photoshop.
click pic to enlarge
#8
A similar HUD - this time for a flight sim
Here I took a previous idea for the Mech HUD and put it into a aerial Mech, thats crashing...
click pic to enlarge
#9
A selection of WoW style Buttons
Here is a random selection of my illustrations turned into WoW style toolbar icons
click pic to enlarge
