Routes

The Traveling Salesman Puzzle for iPhone

UX/UI Visual Designer, Art Director
iOS Phone Application - Android & Tablets Soon
Sketch 3, Photoshop, Illustrator
MVP, Agile
App Store 

In the begining.

The team at Silkroute originally set out to build Routes as a hybrid mobile application on top of the PhoneGap framework. Our team has had vast experience with bulding interfaces with web technologies, but never before a game that could require higher framerates. After much testing, it was determined that building Routes native would be the way to go.




jQuery Mobile
on Phonegap



iOS Native

Initial design concepts.

Inspired by the golden ages view of the future, I took a flat design approach with a twist in the initial concepts that were originally destined for a hybrid application. The photography is directly from NASA and the typography was researched heavily and licensed from Creative Market. I experimented with various design elements for this version, but felt very comfortable with the stained white color on top of the imagery.

'Can we make it flatter?'

Inspiration.

This nodes image was the initial inspiration for my design and I kept it perpetuated throughout the available screen in diferent permutations. It's representation of constellations continued the space theme that I previously concieved.

Typography.

Haus is a fully featured font with multiple weights, each with italics. Using the lighter weights as sub headlines and body text worked well and removed the need to have a secondary font.

Color.

I was keen to observe in the original proof-of-concepts that using shades of red is a bad idea, as many people confused the orange and red colors. Being an important visual to gameplay, I focused to keep colors as contrasting as possible. Choosing colors from the Material Design palatte proved beneficial to keeping color language up to date.

Iconography.

To find coherence with the chunky branding font of Haus Extra Bold, I chose a heavier icon set that appropriately represented navigational elements. Placing the icons within within circles linked the imagery with the nodes on game board.

Sketch 3

This project was my first time using Sketch for building an interface and quite frankly it has since changed the way I work. Sketch allows me to organize myself in a way that Photoshop has failed to do in the past, allowing me to focus on the design process and iterating as fast as possible. When it came to exporting assets for delevopment, I asked myself... "That's it?"