header

Red Faction: Guerrilla Main Menu Redesign (personal)

Main Menu Development Details

Menu Logo: Overlayed on the curve of the planet, the Red Faction logo’s color has been changed to resemble the surface of the sun. This was done to make it stand out, as well as allude to the conflict of the Second Martian Revolution.

Menu Options: I considered using frames or even tabs to arrange the menu options, but chose a basic text-wall for player expediency. Please note that this menu assumes that a single-player game has already been saved. Overall I made several changes to the menu choices:

1) Load Game is now the default (top) option. I prefer this arrangement as it gets the player back to their game faster.

2) The original Red Faction menu had 8 choices. I removed System Link, Downloadable Content, and Wrecking Crew. They are now nested beneath the new Extras heading.

3) I changed XBOX Live to Multiplayer for¬†clarities sake: I feel it’s more specific.

Background: RFG’s character-silhouette background was at times very busy. I like the idea of starting each gameplay session with a simple image of mars because it’s a clear reminder of the gameplay goals: to wrestle control of the planet away from the EDF. The image of mars itself is courtesy of NASA. The colors and tone were changed to make it more easily identifiable as mars. If animated the planet would slowly turn clockwise.

post_footer

Futurist Walkup Pharmacy Interface (personal)

Interface Development Details.

Project Origins: I developed the screen above as part of a future-tech pharmacy design

Developing the Interface: The structure needed a central welcome screen for clients to interact with. Syd Mead’s concept art for Blade Runner had a big influence in both the color and tone of the design.

post_footer

Interface Screens: Adventures in Space (CITES / UIUC)

Inventory Screen Development Details

Project Origins: Adventures in Space: Incident at Long Rock Junction is a training game I developed for UIUC’s central IT organization (CITES). The story centered around a rookie agent visiting far-flung and forgotten locals in an attempt to close ‘cold-case’ distress calls.

Developing the Inventory Screen: This inventory interface is for a device that the protagonist carries with him on his journey. His forlorn task does not earn him the best equipment, and this screen is meant to reflect that.The ID’s photograph (sans hair and mustache) was found on the web. Everything else was put together with Adobe Photoshop.

post_footer

Welcome Screen Development Details

This is the welcome splash-screen for the series of games mentioned above. From here players proceeded to their virtual mail-inbox, which contained messages detailing new missions. Hosted on the web, the site used animated gifs to better illustrate that the ‘check space-mail’ and accompanying logo were buggy-holograms. As such, the interlacing effect you see on the image above is intentional.

post_footer

Gameplay Interface Development Details

This is the primary gameplay screen. The elevator button on the left brought you to image below, which acted as the navigation map for the game. The walki-talki in the lower-left could be clicked at any time to receive a useful quip from your ‘boss’ at the Space Exploration Agency. Settings, inventory, email (in-game) and ‘Contact HQ’ (real-world email to the game developers) can be found on the right. The white icon in the upper-left took you to the game’s splash screen (above).

post_footer

Elevator Interface Development Details

Most of the narrative took place in an abandoned outpost far beneath the surface of a grimy snow-covered planet. The 9 different levels were only accessible via an elevator, and players used the image above to bounce between floors. As a UI element, the elevator is a diagetic extension of the authority held by the game’s pompous administrative official, and so I chose an overbearingly serifed title font (Castellar) that contrasts with the glum reality the elevator conveys players to. Similarly, I picked brightly saturated colors to better highlight the drab environment of the game.

post_footer


This biohazard symbol appeared as part of the game’s final challenge. Equipped with limited resources, I took full advantage of Adobe Photoshop’s timeline utility whenever an animation or transition was required. To see the symbol in action click here.

post_footer

Cheap Interface Screen Development Details

I wanted a cheap looking, somewhat idiot-proof communication device that the protagonist’s employers issued to the lowest wage-earners in the organization. It’s basically an old toy, and therefore I chose an over-saturated burnt umbra tone to invoke plastic junk from the 1970’s, and a weathered, buggy screen with a retro logo.

post_footer

Phone Interface Evolution: Phone Adventures (Unicycle Mobile)

Phone Mockup Development Details

Project Origins: Between 2009 and 2012 I acted as visual lead for a 3-man startup called Unicycle Mobile, our focus being adventure games for iOS. I collaborated via email and Skype with an engineer in Canada and a designer in Austin to develop the project’s visual language and features. The following images chart the evolution of the project’s primary interface: a mock phone that the player-character uses to interact with the game world and other characters. Phone Adventures remains unpublished.

Phone Mockup Details:¬† Skeuomorphic design’s popularity was beginning to fade in 2009, and the ‘flat’ styled image on the right (above) garnered enough interest that an animation illustrating how the elements would interact was requested (it can be viewed here).

post_footerApplication Access Mockup Development Details

We settled on a more flat design, but abandoned the multi-colored scheme above for something simpler. Here I was instructed to experiment with different activation methods for the phones home-screen. Represented above are differing options for making a call, opening email, viewing maps, and accessing settings.

post_footer

Phone Color Mockup Development Details

Once a common style was established we felt comfortable picking which color palette to go with. As the phone screen was one of the more colorful I chose it to experiment with.

post_footer

Phone Final Design Development Details

Eventually we settled on a pale orange (almost a peach) and muddy blue color scheme. As far as combinations go, they’re complementary, and extremely common for things like movie posters. Since the ‘header’ fonts (date / time / active app name) are displayed larger I chose Agency FB, while the smaller fonts are the easier-to-read Ariel or Helvetica.

post_footer