UI test #1
Exercise 1
Mobile card game set in a Sci-Fi universe
Design a Level-Up screen for a mobile card game set in a Sci-Fi universe.

Resolution: iPhone 6 Plus, 5.44 Inches x 2.64 Inches, 1920x1080
Screen must include:
- Deck button
- Back button
- Continue button
- Main menu button
- Soft currency (icon and number)
- Hard currency (icon and number)
- Message box: "Level up! Level 23. +3 You gained 3 deck points that can be spent to boost your skill level"
- Deck points display.
iPhone 6 Plus comfort zones

Considering the screen size of the iPhone 6 Plus and other similar mobile devices, I mapped what zones are easiest to access, to figure out where the main interaction should sit on the screen.

iPhone 6 Plus information and interaction zones.

Generally the most important information is displayed in the top/left because people naturally tend to look in that direction when they read something. Information gets less important the more you move away from this area. Taking into consideration the previous step, we see that information should sit at the top, while interaction should be placed at the bottom of the layout.

How big are the touch areas?

According to a study by MIT, the average width of the human index finger is 1.6 to 2 cm for most adults. This converts to 45 – 57 pixels depending on the device PPI. The average width of the human thumb is about 2.5 cm, which converts to 72 pixels.

Wireframes

Laying out the elements with correct sizes and alignment.

Graphics

Creating and polishing assets

Graphics

Creating and polishing assets

Look and feel

Animation

Exported elements from Illustrator and Photoshop and animated them in After Effects

Exercise 2
DOOM 3 UI redesign
Re-design the Doom 3 in-game interface on the attached screenshot. PC version.

Game elements needed:

- Find a solution to display Character Health/Health Points
- Find a solution to display stamina
- Find a solution to display Character Armor/Armor points
How it works

Doom 3 is a fast paced first-person shooter with horror elements. Players need to react quickly and be aware of their surroundings. HUD elements should be simple so they can be read quickly.

Health and Armor are two very important elements in the game. Players need to know exactly how much health and armor they have left, so they can decide which tactic to use. That's why these stats are displayed numerically instead of with bars.

The original game had a stamina bar with a pretty simple mechanic. The more you run the lower stamina gets. Stand still and it regenerates. But is it really that useful? In Doom 3 you mostly run TOWARDS enemies, not away from them. You have powerful weapons and lots of ammo to deal with almost anything. This is not a horror story where players run away from demons. It's about facing them... and blowing them to pieces! A classic stamina mechanic doesn't really make sense in this context so I kind of redesigned it.

Instead of stamina, use adrenaline. The more damage you take, the higher your pulse goes, giving you adrenaline and all your stats increase. You deal more damage, run faster, reload faster and you also regenerate some health points when killing enemies with headshots or melee.

Lets see it in action

Exercise 3
Design the in-game user interface for an isometric Diablo-like game.
Design the in-game user interface for an isometric Diablo-like game. This is a medieval fantasy game on iPhone 6 Plus with landscape orientation.

Game elements needed:

1. Control circle (character movement control)
2. Four ability buttons (Dash and Special ability can be on cooldown)
a. Dash
b. Attack
c. Block
d. Special ability (Whirlwind) - The character goes in full action mode and spins around with his axe in chaos, dealing damage to it’s nearby enemies. Limited duration.
3. Main Menu button
4. Health Bar with Health points + Icon
5. Power Bar with Power points + Icon
6. Coins (numeric) + Icon
7. Diamonds (numeric) + Icon

Because this is an action RPG running in landscape mode, we'll probably mostly use our thumbs to control character movement and abilities. That's why all the interactive elements are at least 120px wide/tall.