Sorry about the delay, we have just been really tied up with the launch of Quote Codes on Android! Once again, cheers to everyone who have downloaded and are enjoying our game. It has been an amazing ride.
Now, Let’s get on with the topic! Previously, I previously talked about our design failures and wayward thought process in Quote Codes Diaries 8: Design and App Failures. Today we learn how we turned the failure into success by simplifying our thought process and getting things in order.
It was important to get the app flow right. We ditched the clunky and confusing method of making this digitally and focused on physically jotting it down on paper to get the app flow . Our goal was was to divide the app into 2 segments:
Game End Screen
Game Options (Skip, Unlock Clue etc)
UI Design and Interaction
After sorting the app flow, Our next challenge was design and interaction. Unlike most mobile games, Quote Codes gives the users loads of options and screens in the form of Clue, Skip Quote, Categories, Archives, Settings, Credits, etc. We wanted to give each option its own separate page. Cramming all of them into 1 page would be too confusing.
So how do you add that many pages in the app but not make the UI confusing?
The idea turned out to be ingenious for us.
A simple card system stacked did the trick. This allowed us to make the whole layout of the app dynamic and really simple. We could easily add or erase any page and still maintain the same aesthetic and design.
Next was the the design of the individual pages. Since Quote Codes is a word based game, we wanted to keep everything textual (word based) and to-the-point.
For instance, in SKIP, instead of showing an icon and hoping the user would understand, we decided to add directives with YES and NO button: SKIP THIS QUOTE AND COME BACK TO IT LATER.
Similarly for Categories which allows the user to select the various themes of quotes, the design as you can see is really clean and understandable. The Categories are arranged alphabetically and the search bar on top gives the user easy access to search the various themes. Once again selecting a theme will open a drawer confirming your selection in the same “YES” “NO” format.
And then finally it was time to merge them all together. Our aim from the start was to treat the user with subtle and cute animations throughout the app and not just gameplay. Animating the Card menu and the Ui buttons was a lot of fun.
So thats it! Thats how Quote Codes was designed. So far we have covered everything in design right from conceptualization, to implementation. Next Diary will be a treat! For the first time we will have our champion developer Kunal taking you guys through the whole development of the app. Let me tell you, that it is purely brilliant and insightful. Do not miss.
Till then Dont forget to download Quote Codes. It is available on iOS and Android for Free!
Hope the holiday season is going well. Welcome to Quote Codes Diaries 4. Picking up from the previous blog, today we look into the process of animating your Animographies using After Effects.
As I mentioned before, prior to this project we didn’t really have much experience in animation so everything had a learning curve. The entire project of animating the Primitive Font lasted just over 2 months, out of which a lot of time was actually spent on errors we encountered due to lack of experience. Hence, I would like to take this as an opportunity to list down some common practices that you should follow for your projects so you can avoid silly mistakes.
Setting up your designs for import in After Effects.
This is the most basic but the most crucial part. In order to keep your animations scalable and customizable, it is really important to set up your designs well before you import them in AE (After Effects).
AE supports import of AI (Adobe Illustrator) files really well. Though it does support PSD files as well, it is much easier and efficient to import AI (explaining this below). Additionally, since vectors are completely scalable, I would definitely recommend designing your font’s in AI from the start itself.
Now, after you finish your designs, it is time to set up your AI file for import in After Effects.
Set up each character in separate AI files and break the character design in different layers. It goes without saying that you should have a fairly basic idea of your animation before doing this. The point is to separate each part of the design you want to animate as a separate layer. So, if you don’t have a basic storyboard ready for your animation, I would recommend separating the design in as many layers as possible so you have the freedom later when you begin in After Effects.
Here is how we did it.
Importing in After Effects
Create a new project and go to file –> import –> file.
Select your file and under Import –> Composition – Retain Layers. This will retain the layers we made in AI.
Now, here comes the advantage of using AI. Select the layers –> right click and select –> Create Shapes from Vector Layer.
Viola! your AI layer now becomes a shape layer in AE. Expand, scale, use it in any way, your design will not loose quality ever!
And that’s it! You are now ready to animate! Maintain a different composition for each character.
The separation of layers we did in AI ensures your animation is always customizable and converting them to vectors in AE ensures they are always scalable!
Plan out your animation on paper first before implementing in AE and go crazy with it. Animation is all about timing and once you start getting momentum it is a lot of fun.
Next time I will show you the final outcomes of our animations and also most importantly how to directly create sprite sheets for your games/apps, from After Effects itself – Yes it is possible!
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
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.
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.
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.
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.
2. We did not want to add more color in animations
3. We wanted to play with the basic shapes as much as possible.
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!
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.
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)
The Making Of Primitive Font
At its core Primitive Font is made up of four basic shapes
Circle + Rectangle + Triangle + Line
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.
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.
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!
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!
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.
Then comes the symbols set.
Similarly we even designed a numbers set based on the same principles (though they are a bit abstract).
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!
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.