How I Started Motion Design

Feb 24, 2019

Traveloka just started to establish their own Design System, named Momentum. The creator of Momentum Design System, Arie Aulia Nugraha was posting challenges for internal designers to contribute for the Momentum Website.

I took on the challenge to contribute for the logo design, knowing quite very well that I sucked (and still) at logo design.

. . .

Creating the logo

The first idea that I'd like to try out for the logo was to improve the clarity and the impact, so here's what I thought:

  1. "What if I changed the logo to spell out the name exactly? maybe it would translate better for introducing the design system"

  2. "What if I add interaction to the logo? maybe it could emphasize the impact from the name better"

. . .

Bringing the logo to "life"

I don't have any experience with animation or motion at the time, so even having these ideas for the logo might be pushing too much. But hey, it's an open challenge, and I just thought "why not, right?".

The logo needs to be implemented for the website, so the animation needs to be handed over to the engineer as well. I started my researches with that in mind. Then, I figured out the pipeline.

  1. I made the logo using Sketch and I found this plugin, AEUX, to export assets from Sketch to Adobe After Effects seamlessly,

  2. I had to create the logo animation in Adobe After Effects,

  3. I need to install Bodymovin plugin for Adobe After Effects to export the animation to JSON file format,

The rest was to trust the engineer. I was lucky to work with Adhitia Darmawan, as he is willing to explore and experiment a lot with this implementation <3

Traveloka just started to establish their own Design System, named Momentum. The creator of Momentum Design System, Arie Aulia Nugraha was posting challenges for internal designers to contribute for the Momentum Website.

I took on the challenge to contribute for the logo design, knowing quite very well that I sucked (and still) at logo design.

. . .

Creating the logo

The first idea that I'd like to try out for the logo was to improve the clarity and the impact, so here's what I thought:

  1. "What if I changed the logo to spell out the name exactly? maybe it would translate better for introducing the design system"

  2. "What if I add interaction to the logo? maybe it could emphasize the impact from the name better"

. . .

Bringing the logo to "life"

I don't have any experience with animation or motion at the time, so even having these ideas for the logo might be pushing too much. But hey, it's an open challenge, and I just thought "why not, right?".

The logo needs to be implemented for the website, so the animation needs to be handed over to the engineer as well. I started my researches with that in mind. Then, I figured out the pipeline.

  1. I made the logo using Sketch and I found this plugin, AEUX, to export assets from Sketch to Adobe After Effects seamlessly,

  2. I had to create the logo animation in Adobe After Effects,

  3. I need to install Bodymovin plugin for Adobe After Effects to export the animation to JSON file format,

The rest was to trust the engineer. I was lucky to work with Adhitia Darmawan, as he is willing to explore and experiment a lot with this implementation <3

Traveloka just started to establish their own Design System, named Momentum. The creator of Momentum Design System, Arie Aulia Nugraha was posting challenges for internal designers to contribute for the Momentum Website.

I took on the challenge to contribute for the logo design, knowing quite very well that I sucked (and still) at logo design.

. . .

Creating the logo

The first idea that I'd like to try out for the logo was to improve the clarity and the impact, so here's what I thought:

  1. "What if I changed the logo to spell out the name exactly? maybe it would translate better for introducing the design system"

  2. "What if I add interaction to the logo? maybe it could emphasize the impact from the name better"

. . .

Bringing the logo to "life"

I don't have any experience with animation or motion at the time, so even having these ideas for the logo might be pushing too much. But hey, it's an open challenge, and I just thought "why not, right?".

The logo needs to be implemented for the website, so the animation needs to be handed over to the engineer as well. I started my researches with that in mind. Then, I figured out the pipeline.

  1. I made the logo using Sketch and I found this plugin, AEUX, to export assets from Sketch to Adobe After Effects seamlessly,

  2. I had to create the logo animation in Adobe After Effects,

  3. I need to install Bodymovin plugin for Adobe After Effects to export the animation to JSON file format,

The rest was to trust the engineer. I was lucky to work with Adhitia Darmawan, as he is willing to explore and experiment a lot with this implementation <3

Thank you for reading. Have a lovely day :)
Thank you for reading.
Have a lovely day :)