User Interfaces are what lies at the heart of any game.
Without them, you cant access controls, change your difficulty
or even start the game. This includes menu systems, heads
up displays and even text input areas. Everything must be
designed with both ease of use and speed in mind. Theres
no point having a menu that takes 5 minutes to load into
memory just because its nice and shiney. Here are a few
recent examples of my UI and 2D design work.
Keeping
in style with the game, the OverDose UI was redesigned to
allow easier access to both console gamers and PC users
while still maintaining a high level of function. Rather
than just "dumbing down" the UI for a pad, we
simply work along side the pad, so that if you use a controller
certain UI elements change, such as buttons.
Here
is a small preview of the UI's title screen, showing you
how animation and effect work in conjunction with art to
bring it to life. Be sure to click HD to get the full effect.
OverDose
has a very specific style, which we use right across the
board. Set on a post apocalyptic Earth, the game takes place
is run down locations that have a slight hint of futuristic
undertone to them. With that in mind, the OverDose UI was
designed to reflect that setting, with lots of animation
and movement set against a blue colour scheme. For me, this
UI design was perfect as it was functional, stylish, and
worked both for mouse and keyboard input as well as the
xbox 360 controller. Above all else, functionality took
precedence over design.
Fig.3
The OverDose Menu System
Even thought secondary to the main UI, the user input console
is still something which needed to be designed to mimic
the look and feel of the game. Rather than go with a standard
Quake style input, I made minimalist design choices that
worked in combination with the design of the game, but was
still exactly what was required... Something easy on the
eyes and ultimately simple. As the console is a text input
area, seeing the text took priority over fancy visuals.
Fig 4. The OverDose Input Console
The
tools are a secondary area to the main game, and previous
design decisions no longer applied. At the end of the day,
the tools all needed to be simple, effective and above all
very easy to use. For ODRadiant, shown below, we took the
design of the standard Radiant template as a base and worked
upon it from there. The UI was given fresh new icons, and
the entire editor was re-written for OverDose.
Fig 5.
ODRadiant Level Editor
While separate from the main game, the
OverDose website had to carry over the same theme as the
main game. Used as an information point, the site needed
to be clean, easy to use and simple on the eyes. I went
with the following design simply because it fits in with
the Overdose universe, and works well. Fig
6. OverDose Website
The community forums were designed to
mimic the main OverDose website so that we could keep design
consistent. Again, the forums were designed with simplicity
in mind, and the use of the forum was a much larger concern
than how stylish they looked Fig
7. OverDose Forums
Back
in 2003-2004, Team Blur released Quake II Evolved, and one
of the most talked about features aside from the graphical
leap, was the UI. At the time this UI was perfect, and everybody
was talking about it. But looking back I made some really,
really bad choices both with construction and design. Think
of it this way, the OverDose UI is much more animated, far
higher res, and looks nicer, yet is around 30x smaller in
memory footprint... But this was my second real UI system,
so for that, I think I did fine.
Fig 8. Quake II Evolved Main Menu
