Quote Codes Diaries 7: Early Designs

3 more days until the launch of Quote Codes on the App Store, we are so excited! In Quote Codes Diaries 7: Early Designs we look at our initial design process of the App.

Early Designs

How do we adapt our cryptic word puzzle idea into a digital format? This was the problem that had to be solved.

The obvious thing was that the quote had to be in the center.

Quote Codes Diaries 7: Early Designs
We wanted the quote to always be in the center

Now the main problem was how does the player input the letters? We couldn’t do the traditional keyboard layout because it takes too much space and more importantly, it blocks part of the quote. This was a serious problem that had to be solved. Under no circumstance could we block the quote.

Quote Codes Diaries 7: Early Designs
The traditional keyboard layout takes too much space and blocks part of the quote.

After going through various iterations,  we finally zeroed on the current format. The slider input option – we had gotten the idea from the song browsing scrubbing gesture on the iTunes app on iOS.

Quote Codes Diaries 7: Early Designs
The song browsing scrubbing gesture on the iTunes app proved to be the solution

We decided to add the keyboard on the bottom so that the player has no distraction while looking at the quote. On touching a letter on the keyboard we then added a magnification feedback which was crucial.

Quote Codes Diaries 7: Early Designs
The magnification on touch was crucial

The next steps were simple. Showing clues – this was adjusted on the top. I then adjusted the colors a bit and added our cryptic Primitive Font. No biggie.

Quote Codes Diaries 7: Early Designs
Adjusted the colors. Added the Clue and Primitive Font

Then came the fun part – Type. We needed another font for the actual input. We wanted to get something contrasting. The Primitive font was minimal, austere, geometrical. We wanted something whimsical and quirky. We finally settled on the DK Clair De Lune font.

Quote Codes Diaries 7: Early Designs
DK Clair De Lune font was whimsical and quirky

I was absolutely in love with the font. The curves on it just gave it a different feel altogether. 

Quote Codes Diaries 7: Early Designs
The new font completely changed the look of the game

So we ended up with this as the design.

Quote Codes Diaries 7: Early Designs
This was the early designs of Quote Codes

I thought we had something just perfect from a visual point of view. Boy was I wrong. More on this next time!

Till then don’t forget to Pre-order Quote Codes on the Appstore here, it comes out on Jan 18, 2018. Pre ordering ensures that the app automatically downloads onto your device on Jan 18