Have you been using Google Web Designer to create banner ads? Until starting at The James Agency, I hadn’t even heard of it! For those reading who don’t know, Google Web Designer is an application used to create HTML5 advertisements without having to actually dig into the messy coding part. GWD allows you to pull in images and assets to create animations, while it takes care of the HTML and CSS portion. This is perfect if you’re a designer, but not really into coding (like me). The interface is easy to navigate and it’s a free program. The downside is the program is still in beta, so it can be pretty clunky and sometimes really frustrating.
Now that I have some experience with the program, I wanted to share a few tips that have really helped me. First, just start trying things. If you are familiar with AfterEffects, GWD is similar enough that you’ll be able to learn by doing. Second, keep your files extremely organized. As I mentioned, GWD can be finicky and staying on top of your organization will make a big difference.
To start using Google Web Designer, go to google.com/webdesigner and download the application. I have provided a walk-through of my process below, complete with a few videos for clarity.
Start by laying out the ad in Illustrator (Photoshop works too), then figure out the flow and which pieces you will be animating. In this case, I’m going to be sliding the the white text on and off the screen, rotating between the headline and the price point. Make sure you’ve expanded all of the elements and separate them on to different artboards. For this ad, the logo, red color block and button were on an artboard and the headline and the price point each had their own artboard. Next, you will need to save all artboards as .SVG files. For any images, save at the correct size as a .JPG
Once you’ve opened GWD (it can take a minute, so be patient), you will need to name your file. Make sure it’s saving to the correct location and choose the correct size.
I prefer to work in the view called “Advanced Mode” because it feels a little bit more like AfterEffects. You can toggle your timeline option in the top right corner of that workspace. Next, import your .SVG files and images
Set Up File
Before animating, you’ll need to make sure all the assets are named correctly. For whatever reason, GWD prefers assets to be named with no spaces. If you don’t name them that way prior to importing them, you’ll need to do it before you start animating. Drag elements on to the workspace (I rename the layers here, too). Sometimes the elements will come in at a really small size, but as long as you created them at the right size in Illustrator, you can go to the ‘properties’ panel and adjust the width and height there.
Now it’s time to animate! I separate the layers and line everything up the way it will be animating. Much like AfterEffects, you will add keyframes to the timeline to animate. To add frames, you can right click and add or use F6. I highlighted all three layers and added keyframes at the same time. Next, you will need to loop your animation. To do this, click at the 0s mark in the “Events” row and select ‘Add Label’. Type ‘startLoop’ and press the enter key. In the same row at the end of the animation (3s for this example), right click and select ‘Add Event’. Double click on the keyframe that appears and toggle the ‘Timeline’ option. Select ‘gotoAndPlay’, choose the page and choose the label ‘loopStart’. To preview the ad in a browser, select ‘Preview’ in the top right corner.
Once you’ve adjusted all the timing and save the project, you are ready to publish the ad. Simply press the ‘publish’ button and GWD will create a .ZIP file. Choose the location and name of the .ZIP file and go through the various publishing options, selecting or deselecting the options that are necessary for your ad type. Once you have published the ad, you can share the .ZIP file or upload it to an ad platform or web host.
And that’s it! This is a super basic animation, but a great start to getting comfortable in the program. If you have any questions or tips of your own, tweet them @TheJamesAgency.