Samsung - Online Ads

Samsung approached my team to create online advertising animations for promoting their battery, security, and other useful functions. As a motion graphic designer, I designed and animated them with web-based JSON format.

Role Design, Motion

Time 2019

Produced by Hornet

Tool After Effects, Illustrator, Bodymovin

Approach

My team created a design concept with the brand style and colors. We were asked to make promotional animations for over twenty topics. After my team’s concept design, storyboards, and style frames are approved by the client, I started to design and animate five topics following the branding and concept. But the approach was different from other motion graphics project, because the animations should be exported as JSON format, not mp4/mov videos.

The promotional animations were for web-based advertising. Therefore, we made them with JSON animation using Bodymovin(can export AE animations as JSON and renders them natively on mobile and on the web). We had to consider two things for the design and animation both.

1. JSON file size limit (under 100k zipped)

2. Bodymovin limits

The Bodymovin script didn’t support some AE functions and most effects. In order to optimize the file size and animate the design within the limits, we used shape layers and path or transform animation without any effects in AE. Also, I worked closely with programmers to test animations on the web and solve unexpected errors. I learned a lot from this experience, and I could apply them in other similar projects.

Outcome

JSON

GIF

< Back to Motion Graphics