Quote Codes Diaries 3: Animation + Typography = Animography

Welcome to blog 3 of the Quote Codes Diaries. A quick recap –  Till now we saw the Origins and Making of the Primitive Font: How, at its core the Primitive Font is made up of only four basic shapes, Circle + Rectangle + Triangle + Line. All the characters then are a combination of these shapes with minor adjustments. The font gained popularity online on Behance and Typography Served.

Today, as promised we divulge into the fun bits, Animations!

Animation + Typography = Animography.

Quote Codes Diaries 3: Animation + Typography = Animography

Fast forward a few months after we finished the design of the font. One fine magical afternoon I was browsing through the internet and came across Animography – A webshop/typefoundry that provides motion designers, video-editors and others in the field of the moving image with animated typefaces.

Quote Codes Diaries 3: Animation + Typography = Animography

Quote Codes Diaries 3: Animation + Typography = Animography
Animography means animated typeface

Animography (animation+typography) at the time was new but gaining immense momentum. Imagine the possibilities here. You can use the animated typefaces in apps, trailers, games, videos, etc. It could instantly spruce up a project and make it more fun.

We wanted to do this, and we wanted to do this with our beloved Primitive Font. At the time we hadn’t even thought of making a game out this. We just wanted to animate and make it cool.

Animating The Primitive Font.

If you notice, most of the typefaces in Animography follow a very defined approach towards the animations of characters. Take Amelie By Shabello for example. All the characters come as drops from the top and then open up to their shapes.

Quote Codes Diaries 3: Animation + Typography = Animography
Amelie follows a defined animation process where all the characters start as drops and then expand to their shapes

Though this looks absolutely awesome, we wanted to create unique animations for each characters of our font. The design of the Primitive font is very structured and tight, through animations we wanted to break this and create a little bit of chaos.

But that being said, certain rules were still needed to be defined to maintain focus.

1. We wanted to follow the grid system used in design and constrain the animations within it.

Quote Codes Diaries 3: Animation + Typography = Animography
Animation of each character is to be constrained within their grids

2. We did not want to add more color in animations

Quote Codes Diaries 3: Animation + Typography = Animography
No extra color will be added in animation except the 2 above

3. We wanted to play with the basic shapes as much as possible.

Quote Codes Diaries 3: Animation + Typography = Animography
Focus to play with the basic shapes in characters

And, so we began the quest to animate the Primitive Font. This was our first proper animation project, so everything had a learning curve. Next time I will dive deep into the process and journey: failure and success. I will even explain the basics of setting up After Effects for your animographies, so that your project is scalable and customizable. Stay Tuned!

Quote Codes Diaries 3: Animation + Typography = Animography

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

Quote Codes is available for Pre-Order on the App Store

We have some exciting news to share. Quote Codes is  available for pre-order on the App Store.

Yes, you read that right. Apple now let’s you pre-order apps: A simple but extremely useful feature.

Quote Codes is available for Pre-Order on the App Store

Many thanks to everyone for the continuous love and support for our little creation. It has been an amazing journey so far and our community continues to grow bigger each day.

Quote Codes is available for Pre-Order on the App Store
Quote Codes is completely free to play

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 available for Pre-Order on the App Store
Over 85 different themes with more than 2000 quotes to play

Quote Codes comes out on January 18, 2018 on the App Store. Please don’t forget to pre-order the game. It will automatically download on launch day to your device, completely free.

Decode your favorite quotes and stay inspired all day!

 

Quote Codes is available for Pre-Order on the App Store

 

For any press enquires:

Head to our Press Kit

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

How to get BETA Testers For A Mobile Game

Hey everyone!

Thanks for signing up for our iOS Quote Codes BETA. We received an absolutely overwhelming response and even better feedbacks. Doing a BETA release of your mobile game is great way to polish it as well as start gaining some early traction and followers. In the entire process, we learned some important lessons and thought of sharing with you guys a mini guide on how to get BETA testers for a mobile game.

Preparations

1. Right! first things first, its obvious you need to have a kickass app ready to BETA test. Along with it, make sure to have a teaser and some screenshots/gifs done – This is really important as it is the most easiest way to showcase your game and capture the attention of your audience/testers. A nice, short and fun teaser along with some pretty screenshots/gifs goes a long way!

Here’s our Quote Codes teaser again because you have to shamelessly promote your game :p

 

2. It’s time to write a small description of your game. Don’t make it too long, just 2-3 lines that aptly explains your game and its features. Keep it short, simple, easy to understand and to the point.

3. Next is the most important task. Creating the sign up form. We suggest using google forms as everyone is familiar with it and its really easy and straightforward. Keep this form short! remember you are asking them to sign up and spend time on your game. Asking too many questions here is a big turn off.  Just stick to the actual details you need. Here is the sample of our Sign Up Form – https://goo.gl/forms/6p2M92LTMmonp9ws2

How to get BETA Testers For A Mobile Game
Keep the signup form as short as possible.

How to get Beta Testers for A Mobile Game:

Now comes the fun part. Its time to tell the world about your game and ask for sign ups. Take pride in shamelessly promoting your game, you have worked so hard for it and now is the time to make it shine.

If you google, you will find several lists of groups/forums where you can ask or find BETA testers. But, we have complied the best list from our experience. Make sure to post here without fail!

 

1. Announce on your Pages – It goes without saying that your first step should be to make the announcement on your game’s Website/Blog/Medium and all your Social Media Pages. Post your teaser, description and the sign up form and start sharing it!

 

2. Facebook Groups – There are a few super active groups on Facebook for indie games that can give you a good amount of traction and potential testers. Share your announcements on the following Facebook Groups:

 

3. TouchArcade Forum – TouchArcade is one of the biggest website for mobile gaming news and reviews and its forums are super active. Make a new thread and post in the following sections depending on your platform:

 

4. Reddit – You must have read several times how important Reddit is to promote your indie game. What no one mentions is how incredibly challenging it is as well. Getting a hit on Reddit is a combination of clever posting and a bit of luck. To get testers from Reddit post on r/gamedev in the following threads. Make sure to precisely follow their posting rules to avoid getting deleted!

The Secret Sauce

So you made your announcements on the above pages and more. But, you are still short of your targeted Beta signups.  The chances of this happening are quite high. What do you do? Remember when we said to take pride in shamelessly promoting your game. It is now time to hustle and promote!

Start by going through your ENTIRE friends list and note down all potential testers/audience. Message each one of them individually be it on Whatsapp, Facebook Messenger, Twitter, WeChat, iMessage, Slack, anywhere! Write down a short message and personally ask them to sign up. Trust us, you will be surprised to know how many people are interested – they even saw your social posts and loved it but did not sign up. This extra effort/push will help convert several potential audiences to actuals.

Send out your Beta and Collect Feedback.

It is finally time to start sending out your Beta to the testers. The main reason of doing all of the above was to collect feedback from players to improve on your game. So, its important you provide your testers the most convenient way to give you feedback. We recommend using Google Forms here again. iOS and Android do allow the testers to send you a mail directly for feedback but we don’t think this is a good idea. A more structured approach is required to get maximum feedback.

Be exhaustive in asking your testers questions about the game. Construct a Feedback Form that specifically asks them about the core concepts and pressure points of your game. Keep it convenient by giving them options for each questions but leave an open comment at the end so they can also explain their thoughts on the game in their own words as well. Here is a sample of our Feedback Form – https://goo.gl/forms/j9iAjZGaoRZaTijU2

How to get BETA Testers For A Mobile Game
Keep it convenient for testers to give your feedback by giving them multiple choice questions

Send out the Feedback Form with a short email thanking them for the time and their amazing feedbacks!

And then that’s it! We sincerely hope this helped. And, once again many thanks to everyone who signed up for our Beta. More news on Quote Codes coming soon!