Quote Codes Diaries 8: Design and App Flow Failures

Hey Quote Coders,

Quote Codes launched this week! And we would like to take this opportunity to thank you guys from the bottom of our hearts for the love and support you have shown towards the game. Quote Codes has been featured by Apple in over 83 countries worldwide and has broken into top 20 in its category in Canada and UK. We are just so so proud and humbled by the reception. Here is the download link again for the ones who haven’t already (Seriously what are you waiting for?) – https://itunes.apple.com/in/app/quote-codes/id1142929451?ls=1&mt=8

Right, lets continue the story of the game. In the previous blog, Joseph explained about his font choice and preference of a very whimsical and fun font. We thought we had something good going but as we started to develop we realized how wrong we were.

Design and App Flow Failures.

The first step we did was try to chalk out the App Flow of the game. How will the player navigate and interact with the game was crucial. We divided the app into 2 segments.

  1. Game Play
  • Main Game Screen (The main gameplay screen)
  • Game End Screen (The screen that shows the decoded quote)
  • Tutorial (static tutorial screen that shows the rules of the game)
  1. Menu
  •  Stats (stats depicting quotes the player has decoded)
  • Settings (A settings page)
  • Credits (A credits page)
  • Categories (Categories section so user can select themes of quotes)

Sometime on Illustrator and I came up with this mess.

Quote Codes Diaries 8: Design and App Flow Failures
Even we were getting confused looking at this

Not making excuses but at the time Adobe hadn’t come out with the XD and our first instinct was to use illustrator from the very go.

So after the app flow we tried putting in the designs on them.

Quote Codes Diaries 8: Design and App Flow Failures
This was our first attempt at UI for Quote Codes

Our initial thoughts were to use the primitive font as main headers in UI which as you can see looks too cryptic and cluttered.

Quote Codes Diaries 8: Design and App Flow Failures
Using the Primitive Font as headers in UI made it confusing

In the previous blog, Joseph explained how he thought the DK Clair De Lune font was perfect for the game. But, as you can see from these designs, though it looked alright, it wasn’t really readable and made the whole game scene quite confusing. Plus Apple’s Human Interface guidelines recommend to have a minimum tappable area of 44pt x 44pt. The keyboard buttons were falling short of the 44pt. Increasing them would make everything look even more cluttered.

Quote Codes Diaries 8: Design and App Flow Failures
Though it looked fun, this design was not at all practical for our word game.

Try and Try till you succeed.

Right so after those failures we decided to try another fresh approach, scrapped the whole layout, font and structure and try a completely new way by adding new fonts and icons. We even tried inverting and messing around with the colors this time to see how it looks.

Quote Codes Diaries 8: Design and App Flow Failures
A completely fresh approach with new color options, icons and fonts

New funky icons

Quote Codes Diaries 8: Design and App Flow Failures

Quote Codes Diaries 8: Design and App Flow Failures

Though they looked fun initially, it just felt too much. The whole concept of solving your favorite quotes was getting overshadowed by the funky design and colors.  Plus, this used the Hamburger Menu which apple completely hated and they were right to do so – (Watch from 32 mins on HERE)

So 2 iterations of designs and 2 complete failures but we weren’t about to back down. More on this in future diaries. 

Till then don’t forget to download Quote Codes – Our quirky word puzzler featured by Apple worldwide (had to say it again :p)

Quote Codes Diaries 8: Design and App Flow Failures

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

Quote Codes Diaries 2: The Making Of Primitive Font

Welcome to blog 2 of the Quote Codes Diaries. This time I’m going to dive into the details of the making of ‘Primitive Font’. (That’s our font featured on Typography Served on Behance for those of you who didn’t checkout our previous blog)

Quote Codes Diaries 2: The Making Of Primitive Font
The Primitive Font in all its glory

The Making Of Primitive Font

At its core Primitive Font is made up of four basic shapes

Circle + Rectangle + Triangle + Line

Quote Codes Diaries 2: The Making Of Primitive Font
The Font is made up of only four basic shapes

All designs are a combination of these shapes with minor adjustments. It is done by changing the sizes and the interactions between these shapes.

Everything except for the M and W is laid out on 3×3 grid  (M and W take a 4×3 grid due to its horizontal expanse). The grid was just a framework to work within certain guidelines. The geometry behind the shapes was a very deliberate effort. We wanted to achieve a very minimal representative of the alphabet. We did compromise a bit for legibility though.

Quote Codes Diaries 2: The Making Of Primitive Font
Everything except for the M and W is laid out on 3×3 grid (M and W take a 4×3 grid due to its horizontal expanse).

Let’s take C-D-O for example(The Big Short  anyone?). The basic shape is a circle. The letters are just variants of it.

Quote Codes Diaries 2: The Making Of Primitive Font
C-D-O All are formed using the basic shape of a circle

So the O is obviously a circle fitting the 3×3 grid. Simple. The C is just the circle with the right portion cut off. So we have C as well made from the circle cut off half way though the right grid block. The letter D is actually a slightly distorted mirror image of C. So we have the exact same principle with one exception. The straight line that other wise demarcates the D is now a curved one running along the circle’s circumference. And how do we give it a playful nature? Simple, add some colour into it!

Quote Codes Diaries 2: The Making Of Primitive Font
C-D-O filled with color

The use of colour is mainly in the negative spaces throughout the letters. The playful aspect can be seen in the F and the E as well. Traditionally both are separated by only an extra line (bottom line in the E). But we decided to give the E a lil bit of quirkiness. Instead of the middle line, we substituted it with a filled circle. And what do you know? It works out!

Quote Codes Diaries 2: The Making Of Primitive Font
F and E both are separated by only an extra line (bottom line in the E). But we decided to give the E a lil bit of quirkiness by adding a filled circle.

The rest of the letters follow similar principles. All but M and W; Z and I. These are formed purely from lines. This was so as to avoid any confusion in regards to legibility.

Quote Codes Diaries 2: The Making Of Primitive Font
M-W-Z and I, are formed purely from lines

Then comes the symbols set.

Quote Codes Diaries 2: The Making Of Primitive Font
Symbols of Primitive Font

Similarly we even designed a numbers set based on the same principles (though they are a bit abstract).

Quote Codes Diaries 2: The Making Of Primitive Font
Numbers of Primitive Font designed using the same principles

So these are my two cents on the Primitive Font. Hopefully, this cleared up matters a bit for you. Look out for our next post, this is where serendipity and the fun begins – Animations!

Quote Codes Diaries 2: The Making Of Primitive Font

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.

Quote Codes Diaries: Primitive Font Origins

Greetings my people! Now that Quote Codes is up for Pre-Order, I finally get a breather. And I’ve been just looking back at the whole process of making Quote Codes and what a journey it has been. Beginning today, we played to have a series of blogs mapping out Pixel Drop’s entire journey with Quote Codes.

Primitive Font Origins

Let’s start at the very beginning. Quote Codes actually began with the Primitive Font. It wasn’t the typical we have this concept, let’s make a prototype and then finish off with graphics. It was a long and organic journey you might say.

Quote Codes Diaries: Primitive Font Origins
Only the basic shapes are used for the font hence the name: Primitive Font

This was way back in 2013, and I was obsessed with simple geometric shapes being used as the basis for all illustrations. I was validated in 2015 when google redid their logo to make it completely based on geometric shapes in order to reduce data consumption. (You can check that out HERE)

Quote Codes Diaries: Primitive Font Origins
The new Google logo is built on the mathematical purity of geometric circles

This combined with a throwback to the Swiss Design Style of the yesteryears gave birth to Primitive Font

Quote Codes Diaries: Primitive Font Origins
International Typographic Style or commonly known as Swiss Style characterizes itself with the use of asymmetrical layouts built around a mathematically constructed grid

I never intended to have this as an app. It was just an experiment with various principles in my head. A search for clarity. Plus a need to make something with these principles.

Geometry and order are inherent characteristics in design – it requires a certain degree of discipline to impose constraints on yourself and find solutions within that framework. It’s also a recipe for innovation. It forces you to analyse everything closely.

Quote Codes Diaries: Primitive Font Origins
The idea was to make use of only basic geometric shapes for achieving the Primitive Font

Primitive Font involved the use of four basic shapes. Circle. A Line. A Triangle. A Rectangle. Everything else is a union or intersection of these four shapes. And couple this with contrasting colors to bring about the conflict between the shapes.

Quote Codes Diaries: Primitive Font Origins
Simple grid system was used to incorporate the shapes

All this within a simple grid incorporating the shapes. That’s pretty much it to be honest. And of course getting featured in Typography Served.  It was the first time that a Pixel Drop product got recognized anywhere. So this one’s special to us.

Next time, I’ll dive in detail about Primitive Font with examples.

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. 


Quote Codes Diaries: Primitive Font Origins