Modern Toyfare’s UI Design

Details

I did UI development and design for Modern Toyfare. Modern Toyfare is a first-person shooter capture the flag (CTF) game intended for single player and multiplayer use. The players embody the soldiers of two opposing toy armies using imaginative weaponry to defeat their opponents and steal their flag.

Platform Windows
Genre FPS CTF Multiplayer
Technology Unreal Development Kit, UDK Script
Team Size 6 People
Development Time 4 months

 

Modern Toyfare’s Design Principle

As Modern Toyfare is an FPS CTF game, intuitiveness is very important. Modern Toyfare’s UI should be intuitive, and simple. Players need to know their information clearly such as team, flag location, scores, or weapons.

  • Usability
  • Simplicity
  • Intuitiveness

Design for Usability : all important information is available on the screen, such as scores, minimap, flag location, current ammo, current weapons, active events, or items. They are organized at the edge of a screen.

” Simplicity is not the absence of clutter, that’s a consequence of simplicity. Simplicity is somehow essentially describing the purpose and place of an object and product. The absence of clutter is just a clutter-free product. That’s not simple.” – Jonathan Ive, Senior Vice President of Design at Apple Inc.

Design for Simplicity : All elements need to communicate to the players clearly and meaningfully. I used clean and contrast color on every controls. Some part of the elements, I used only text and contrast it out with a drop shadow to increase visibility.

Design for Intuitiveness : Human eyes are easily drawn attention on three places on the screen, bottom left, bottom right, and top right. Placing important controls on those places provide easy access to players. For an active event list, I used image icons, because a human’s brain can recognize images better than text. For new players, I also put texts and descriptions next to those icons.

pauseScreen Pause screen is changed depending on what team players are.
toyLeaderboard  The scoreboard shows both team scores.
evenstack  All active events are stacked, and show how long they last.
toymenu  Flash main menu

 

Responsibilities

  • Developed and design UI
  • Developed game mechanics that related to player’s interaction and communication.
  • Developed and design various Kismet nodes related to the cinematic, special effects, and player’s interaction.
  • Developed and design Flash main menu.

Blue_Base
Blue_Sniper_Window Close_Up
Inside_Central
Overview_5_Fixed
Red_Base