Shut the Window Diaries 1: Inspiration and Concept

The Inspiration

A couple of years ago, we came across Windows of New York by Jose Guizar. Check him out HERE. The illustrations just completely blew us away.  It is an on going project wherein Jose illustrates a new window from anywhere in New York every week. The sheer details captured in such an innovative yet routine sight enraptured us. The designers in us just couldn’t keep away. We wanted to do something that was similar to it.

Shut the Window Diaries 1: What and Why?
Shut the Window comes out on April 5, 2018 for iOS and Mac App Stores
The Concept

Fast forward a few months, I was reading about human biases that people are not generally aware of and came across this concept known as ‘Variable Reinforcement’. A response or action is called reinforced response if it generates a reward i.e., a person will be motivated to repeat a response if he or she gets a reward for the same. That’s the well-known theory of motivation. However, when a response is reinforced after an unpredictable number of tries, it generates a high and steady rate of response. Which means, when you receive the reward with irregular or unpredictable frequency, your behavior is reinforced even more strongly.

Shut the Window Diaries 1: What and Why?
Shutting the window gives you the reward of furthering the game.

You see we had decided that instead of following random games, each game of ours would have a psychological aspect to it. An underlying principle, if you might. And we thought why not combine this with something like the windows of New York. This is more experiment than game. We just want to know how people will respond to this. Think of it as a grand social experiment of sorts. Shutting the window gives you the reward of furthering the game. And the various different windows opening gives you the randomness. Also each window has varying difficulty levels. Rewards keep varying that way.

So this is our take and part homage to Jose Guizar.

Shut the Window: Frustratingly Fun
Shut the Window Diaries 1: What and Why?
Based on real life windows of Amsterdam. Each window is made with great care and love

Based on the windows of Amsterdam, there are 10 beautifully illustrated designs that you interact with.  Each one is made with such care. Each one has so much detail. They are taken from the historic buildings in Amsterdam and each one bears testimony to it. We hope you fall in love with them. We will dive deep into each of them from our next blog.

Till then don’t forget to Pre-order Shut the Window on iOS and Mac, it comes out on April 5, 2018. Pre ordering ensures that the app automatically downloads onto your device on April 5.

Quote Codes Diaries 9: Why Quote Codes As Our First App

Hope everyone’s doing well. In this week’s Quote Codes Diaries, instead of diving deep into design and tech details, I would like to have a little heart-to-heart about why we chose Quote Codes to be our first App.

Now that we’re almost 2 weeks post release, our stats have exceeded our initial beliefs. We thought Quote Codes was never a mass audience game and that it would appeal only to a smaller fragment of the general population 

Quote Codes Diaries 9: Why Quote Codes As Our First App
Our shining moment

From a traditional game development point of view, Quote Codes would be a rather stupid idea because we have essentially blocked out all non english speaking markets. And within the English speaking markets, it isn’t a game for the general masses. It is for those who love words, who love quotes, who love puzzles. We intend it to be for a relatively niche audience.

What we have to do is to keep it engaging. For the ones who have downloaded the game – we want you to know that we value our real estate on your screen. We also know that to remain there, we have to provide for an ever evolving app. That is why we chose to do Quote Codes.

Quote Codes Diaries 9: Why Quote Codes As Our First App
Quote Codes is a quirky word cipher game

Because we feel we can make it a cult classic provided we maintain high standards. Essentially, we wanted something that can grow. Something that we could update forever if required. New quotes, new animations, new themes – An experience that keeps evolving. We weren’t going for a one hit wonder. We wanted a game that would endear.

Quote Codes Diaries 9: Why Quote Codes As Our First App
Decipher your favorite quotes

That’s a reason we made it free – we were concerned about a passionate user base which will remain loyal over the long term. We hope that Quote Codes has met those initial goals and will continue to achieve our expectations.

Till then please don’t forget to download the game HERE, if you haven’t already. Trust us you won’t regret it.

Quote Codes Diaries 9: Why Quote Codes As Our First App

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 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.