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 is out for iOS!

Extremely proud to announce that Quote Codes is out for iOS! Here is the direct link to download the game – https://itunes.apple.com/us/app/quote-codes/id1142929451?ls=1&mt=8

Quote Codes is out for iOS!

Quote Codes is a word puzzle game where you unlock your favorite quotes by substituting one letter at a time. In every game, each symbol stands for a letter. Your aim is to guess and decode the quotes!

Features

• Beautiful and addictive word puzzle game.
• Decode quotes ranging from all themes like Epic TV Shows, Timeless Movies, Classic Disney, Netflix Binge, Legendary Authors and many more!
• Over 85 different themes to play. Solve quotes from Game of Thrones,
13 Reasons Why, Rumi, William Shakespeare, Lord of the Rings, Stranger Things and countless more.
• Hand crafted custom animations of each symbol. Beautiful minimalistic visual design.
• Completely free to play with minimum Ads. Earn coins by successfully decoding quotes!
• Universal app with Facebook sync. Play on your iPhone and iPad and your progress will always be in sync.

Quote Codes is out for iOS!

Quote Codes is out for iOS!
Decode pop culture quotes in Quote Codes!

It has been one amazing journey and we sincerely hope you enjoy the game. Also, be sure to keep checking the blog for our continuation of the Quote Codes Diaries. We will soon be diving deep into our development process and technologies used in the game.

Quote Codes is out for iOS!

For any press enquires:

Head to our Press Kit

Or alternatively you can email us at: quotecodes@pixeldrop.in

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 6: The Idea For A Game

Joseph back again. Today in Quote Codes Diaries 6, we look at how we got the idea for the game!

The initial inspiration for Quote Codes was from a word game in my local newspaper ‘Mumbai Mirror’ that I played when I was in school. I don’t exactly remember the name but it was about figuring out a coded message.

Quote Codes Diaries 6: The Idea For A Game
A substitution cipher game in which one letter stands for another. I was addicted to this game!

Only one clue was given, that’s it. You had to bang your head against all things to figure it out. Sometimes it would take minutes, other times hours or even days! (Of course you could cheat a little by checking out part of the answer on the next page!) I loved doing this and reading ‘Pearls Before Swine’ comic strip!

Quote Codes Diaries 6: The Idea For A Game
A classic Pearls Before Swine comic strip

Fast forward to when we had made the Primitive Font, one day I happened to go through the newspaper again and was doodling some changes for the primitive font. Then it struck me – how would this be for the digital age. How can we adapt it for mobile. And that was the beginning of Quote Codes.
The primitive font was perfect for representation as a symbol. It was cryptic yet understandable. On searching further I came to know that this was a genre in itself – substitution cypher game.

Quote Codes Diaries 6: The Idea For A Game
The Primitive Font was cryptic yet had a defined structure to be understandable. It proved perfect for the cryptographic game concept

The next hurdle was what to base it on. What quotes to select. And the way was shown by ‘QuizUp’. The app had just gotten big and everyone I knew was hooked to it. So we studied their most popular categories and we had our answer-TV shows and movies. And of course others as well. But we focused mainly on TV shows because these had a certain sense of nostalgia associated with it. People felt delighted when they figured out the quote.

Quote Codes Diaries 6: The Idea For A Game
We looked at QuizUp for inspiration in selecting the topics and decided to start off with only TV Show quotes

This was followed by a frenzied 2 day work on the initial gameplay screen designs.

That story, we’ll cover in the next one!

Quote Codes Diaries 6: The Idea For A Game

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 5: Animation of the Primitive Font

Hey Folks,

Wishing you all a very happy and prosperous New Year! Let’s kick off Quote Codes Diaries 5 with the Animation of the Primitive Font!

Quote Codes Diaries 5: Animation of the Primitive Font
It’s time to see these animated!

In the previous blogs, I explained the concept of Animography and how it inspired us to animate our Primitive Font. Then next we saw the basic practices one must always follow in an animation project to keep the project scalable and customizable and avoid silly errors.

Today, we will see the results of all that planning and hard work. Here is our dearest Primitive Font in all its glory!

Quote Codes Diaries 5: Animation of the Primitive Font

Each character in our font is unique and has a custom animation. The whole project lasted just over 2 months for us.

Quote Codes Diaries 5: Animation of the Primitive Font

Remember we said that we wanted to restrict the animation of each character within its grid.

Quote Codes Diaries 5: Animation of the Primitive Font

Here are the remaining characters!

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

This one’s our favorite!

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

 

 

Quote Codes Diaries 5: Animation of the Primitive Font

And then finally the symbols.

Quote Codes Diaries 5: Animation of the Primitive Font

 

Converting your animations into Sprite Sheets.

So you spent all this time animating in After Effects and now want to use them in your app. Traditionally sprite sheets are made by painfully drawing each frame one-by-one. But now there is a way to export your animations into sprite sheets directly from After Effects itself!

Thanks to Matthias Guntrum and his AE script Sheetah, you can now export any animation into a sprite sheet in no time. Just head to the Sheetah page and download the package –> unzip and  Merge sheetah’s After Effects/ScriptUI Panels folder with your following After Effects Installation folder: [path]/Adobe After Effects [version_number]/Support Files/Scripts/ScriptUI Panels

Now just restart After Effects, open your animation file and go to Window –> Sheetah.jsx.

Quote Codes Diaries 5: Animation of the Primitive Font
Sheetah will be available under the Window panel

A Sheetah popup will display on your AE project. Select the output type from the 3 available options (png, tga or tif) and hit Save Spritesheet. Export in your desired destination folder and thats it!

Quote Codes Diaries 5: Animation of the Primitive Font
Export your animations into sprite sheets in a matter of seconds

Your sprite sheet is now ready for use in your app!

Quote Codes Diaries 5: Animation of the Primitive Font
Here is our character sprite sheet

I hope you enjoyed reading about our thoughts and process behind the making and animation of the Primitive Font. Stay tuned for the next Quote Codes Diary where Joseph will explain how we started thinking about using the font in an app which ultimately resulted in Quote Codes!

Quote Codes Diaries 5: Animation of the Primitive Font

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