HCI Design

Bailey Goble

Brief
The task for this assignment is to create a portfolio work
that contains the steps to producing an interface with a
theme and genre. The brief gave information for a game
from the setting to theme, allowing me and other people
in my course to get an idea and a start point to start
brainstorming the design and the structure of the
interfaces, from the menu that the player interacts with
and the heads up displays, displaying key information
that the player has to know. Although the given theme
was a choice for me and other people in my course, if I
wasnt happy with the theme, I had the option to create
my own theme if I wasnt happy with it.

Analyses of the brief

The brief wants us to demonstrate our creative
skills within Photoshop and show consideration that
goes into creating an interface designed for video
games. For this assignment I decided to go with the
given theme, which was a title called Leningrad,
which is based in 1960s Russia city Leningrad,
around espionage and a world of spies.
I hope to take from this assignment is an
opportunity to show my skills I have developed in
Photoshop and hopefully develop a interface which
is successful for a modern 2016 video game.

Leningrad Analyse part 1

What we know about the game so far as followed and
quoted in the brief.
Leningrad is set in the world of spies and espionage in
the 1960s. The main character is Malina Koroviev who
is, in reality, an American secret agent living and working
in the Russian city of Leningrad.
The game is an immersive experience similar to Red
Dead Redemption in which you guide Malina through the
murky underworld of Russian spies, whilst all the time
trying not to blow your cover. Your ultimate goal is to
infiltrate the Nuclear Weapons facility at Razliv on the
outskirts of the city and steal their secrets so they can be
passed back to the Americans

Leningrad Analyse part 2

Leningrad themes are heavy spy and an action
based game through the eyes of a female spy in
1960s Russia.
So the genres of the game is a first person shooter
in a open world. Most recent games that come to
mind that follow similarities with this genre is
games like Ubisofts Far Cry 4 and a little bit of
the Metal Gear Solid 5: The phantom pain by
Konami. Both of these franchises will be great
sources for inspiration and material to look on when
deciding the wireframe and design of the interface.

Titles
The idea and thought process
for designing the title/logo
was keeping it very simple
with inbedding the title with
the logo like most media, with
films and video games
especially. The colour was
thought as to reflect the
colours of Russia and
communism.

Moodboard

Inspiration Far Cry 4

Far cry 4, sharing a few of the same genres as Leningrad and
being a quite popular franchise in the last few years would be a
great place to look at the design of the interface and the
wireframe. Most modern first person shooters, try to minimise
the information shown on screen. Player prefer when playing a
first person game, like to have a clear screen to see what they
are doing, like to see the world, especially if the game is
centred around its world and the interactive environment. Far
cry 4 does all this very well, keeping important information to
the edges of the screen, like the mini-map, indicating the world
round the player and showing points of interest like
collectables or enemies. Showing the objective for the player,
the goal and then finally the ammo for the guns. The player
should we aware if they have ammo and what gun they have
selected. This should defiantly should be considered if combat
or violence with gun play is a heavy section of the game

Far Cy 4
Objective/
Important information/Tips

Mini-Map

One thing that I wanted to understand was

the layouts and placement with the HUDS
in Far Cry and other first person shooters.

Ammunition

Wireframe Gameplay

Mirroring very similar wireframe to the Far Cry 4 gameplay, but I feel that
this setup, showing the player majority of the screen and the world within
the game and showing important information is a great design setup. This is
also very similar to several different games like Grand Theft Auto or Middle
Earth: Shadow of Mordor, and no surprising that this set up shows success

Flow Chart
Perks

Exit game

Resume

World Map

Synopsis

Glossary

Options

Gameplay

Main Menu

Settings

Inventory

Save

Load

Mini Map Design

The design of the mini
map was influenced
by the Grand Theft
Auto 5 even the
ability to expand the
map. The vision of
Leningrad world is
reasonably big and I
always thought that
feature that Rockstar
brought to there
game

Health Bar Design

The design of the health bar was designed with simplicity in

mind, a basic bar is eye catching and even the colour green is
more often in game represent health or stamina. The
inspiration was from the game Metal Gear Solid 1 with the
basic glowing green bar representing health.

Ammunition bar Design

Again this HUD was designed with

simplicity, taken heavy inspiration
from MGS again and Far cry 3 & 4.

Colour Scheme
When coming up with the colour scheme that is
displayed through the HUDS and design of the
interface as well as of the game itself, the focus
was keeping it very simple but still reflecting of
the time the game was set in. Heavy use of the
colour red, to really focus that the game is based
if a soviet Russia and communism. I also
inspiration from Frank Millers Sin city which use
the cooperation of only important objects or
features in the movie are the only thing that
contain colour and the rest stick with a noire
theme. Which I use to help to reflect the world
that this game is set in.

Gameplay

Combining all the HUDs together with ideal of how it will look and be
used within game.

Pause Screen

Pause Screen- Inspiration

The pause menu was influenced by the recent Five Nights at Freddys which show
the mini games with a damaged screen which really showed the distorted
interlaced lines like an old tv. The design was also inspired by Fallout 3 menu that
pops up when the character levels up, which is a normal window with the corners
are covered in a deep green light.

Inventory Menu

Inventory menu
-Inspiration

This menu continues the same layout as the Battlefield multiplayer class
layout. I also thought this was design was simple but still contained a lot of
information so I added this interface with my own spin on it.

Main Menu

Main Menu- Inspiration

This main menu was inspired by Call Of Duty: Ghost

main menu. I liked the simple design of the menu
buttons and the simplicity of just showing a
character but keeping that character looking
mysterious

Poster 1

Poster 1- Inspiration
Well, the assignment never
mentions about creating any
poster or adverstisment, I
had a lot of extra time in this
assignemt and in my free
time designed and develop
some extra work for this
assignment.The poster was
also designed from Frank
Millers Sin City
advertisement, having a
unique theme and having a
limited use of colour that I
also incorporated into the
gameplay

Poster 2

Poster 2 - Inspiration
This poster was inspired
by a previous
assignment that
explored the design and
gave an opportunity to
create our own
silhouette poster. I used
a great example of a
fan of the game Red
Dead Redemption and
created this awesome
red poster for the
game.