header

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

World Map: Phone Adventures (Unicycle Mobile)

World Map Development Details

Completed map for Bicycle Mobile’s Phone Adventures, an urban narrative experienced¬†through a mock phone interface. Various locations were unlocked as the story progressed, allowing the player to visit the interiors of each building featured on the map. An example of the in-game view of the map can be found above.

Visually we were seeking to strike a balance between a flat ‘Google Maps’ look and a fully rendered ‘pop-out’ game map. Colors were selected to correspond with the rest of the UI palette.

post_footer