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.

App Animations with Lottie by Airbnb

We have all heard of (or even used) Airbnb at some point – a giant that has dominated and revolutionized the travel industry for the past few years. So, it came as a pretty big surprise when last week, they released Lottie, an open-source tool that helps add animations to native apps. We decided to try our hands on Lottie by Airbnb and give you guys some quick impressions.

Lets start with the basics:

What is Lottie?

Lottie by Airbnb

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Why Lottie?

Lottie by Airbnb

Animations are awesome. It enhances the user experience of an app. Animations make your app “cool” but implementing them is really hard. Most of the time, developers use generic animations or are limiting its use due to technical difficulties. Using Gifs or videos are inefficient and heavy. Manually creating curves, and re-making animations on code is extremely time consuming and hard.

According to the engineers of Airbnb – that’s all about to change thanks to Lottie. After a year of in-house development and testing, Lottie will allow designers and developers to use animations, without having to fiddle with image files for countless screen sizes or thousands of hard to maintain code lines.

How to use Lottie?

Lottie only works if you use After Effects to create your animations. It is based on Hernan Toririsi – BodyMovin extension.

Step 1.

Download and install BodyMovin by Hernan Toririsi. There are quite a few methods to do this as listed on BodyMovin Github page but here is the easiest of them all.

a. Download the Zip file from the link

b. Extract content and get the .zxp file from ‘/build/extension

how to install Lottie by Airbnb
Run bodymovin.zxp

c. Download and Install ZXP installer from aescripts.com and run the extension file.

How to run Lottie by Airbnb
ZXP Installer
Step 2.

Now that your done setting up. Its time to run After Effects.

a. Open your AE project and select the bodymovin extension from Window > Extensions > bodymovin

bodymovin lottie Airbnb
Bodymovin Extension

b. A Panel will open with a Compositions tab. On the Compositions tab, click Refresh to get a list of all you project Comps. Select the composition you want to export. Select a Destination Folder and then click Render.

bodymovin Lottie Airbnb
Render with Bodymovin

c. Look for the exported json file in the Destination Folder

STEP 3.

After you finish rendering of animations, its time to load them up on your app. Depending on the platform of your choice, download the Lottie Library for iOS, Android or React Native and install based on the platform.

Since the animation is a JSON file they are quite small in size therefore reducing the load on your apps. The Animations can be played, resized, looped, sped up, slowed down, and even trigger based on interactions. 

 

All-in-All Lottie has been a welcome surprise by the folks at Airbnb. We are still tinkering with it but are pretty excited by the possiblites. For now it only supports solids, shape layers, trim paths, alpha mattes and masks in After Effects but updates are expected.

We really hope that this sets off a trend of animation tools from the big players. They are hard to write!