Leveraging the campaign concept and four different messaging, I animated HTML5 paid banner ads using Google Web Designer (an alternative to After Effects). See the campaign live here.

Background

HTML is fast becoming the industry standard for creating animated ads. HTML5 display ads are more lightweight; each file size has to be 150KB max. They also have tracking codes embedded in them which allow for marketers to monitor performance and engagement.

Process

I created these ads using Figma and Google Web Designer (GWD). I used Figma to create individual frames/layers of the copy, then exported each frame as an SVG image to GWD. This allowed for consistency and easy templating by swapping out the layers without having to adjust the size.

Some of the original copy was too long and didn't fit into the template, so I set up several meetings with the stakeholder to reach a solution together. In GWD, I used keyframes and text masks to add some pacing to the text and transitions.

Final touches

I also added the HTML tracking codes into the ads and worked with the team from 6sense to ensure that all the codes were correct and pushed traffic to the relevant web pages.

The final ads were engaging and lightweight, and brought the entire campaign to life across the various touchpoints and user journey. 

How can I help you?