We use cookies. You have options. Cookies help us keep the site running smoothly and inform some of our advertising, but if you’d like to make adjustments, you can visit our Cookie Notice page for more information.
We’d like to use cookies on your device. Cookies help us keep the site running smoothly and inform some of our advertising, but how we use them is entirely up to you. Accept our recommended settings or customise them to your wishes.
×

Get Nerdy with Google Web Designer

Learn what it takes to design and build engaging creatives with Google Web Designer, whether that's using innovative components still fresh in beta or getting down and technical with custom code.

Google Web Designer banner

This post will take a look at some of the more advanced features and custom components available to you from Google’s Ad Component Gallery, show you how to implement them and why you should. This will help you to innovate and create unique and engaging creative which will get those heads turning.

Custom Components

Aside from the standard components, you can also browse the Rich Media Gallery and download custom components, some of which are still in beta. I’ll be talking through some of my favourites in this blog.

Scratchy Surface

Think of this component like a digital scratch card. It essentially has a top image that can be scratched off to reveal hidden content underneath. This gives a new and exciting way for users to interact with your creative (especially on mobile devices).

How To

Like all betas you must first submit a request for the component and expect to wait a few weeks to be given access. But once it appears within your GWD interface you just need to set the top image that will be scratched away and voila! 

Uses

Ads in the past have used Scratchy Surface to reveal promo codes or prizes to collect in-store. This fun use of interaction works best for prospecting or general brand awareness.

Scratchy surface ad

Shake & Shout

Get your users to shout about your brand. Literally! This clever component harnesses your phone’s microphone and accelerometer to deliver top notch creatives. Have your users blow, whistle, shake or tilt their devices.

How To

In the interface choose from a variety of options and how you want your users to interact with the component.

Uses

Have users blow out a candle or shake their device to reveal new content. Not only is this eye catching but it’s an effective way of getting people to talk and interact with your brand.

Shake & shout ad

Candle shake ad

3D Pano Viewer

Immerse users in a 360-degree panoramic image that can be moved and viewed from any angle. This works especially well on mobile where you can touch and swipe. 

How To

Just upload your panoramic image into the interface and away you go.

Uses

A great choice to showcase car or home interiors. It allows users to experience the product in a more natural and lifelike way. This component works well on large ad formats on desktop and lightboxes on mobile devices.

Panoramic ad

Or how about creating your own interactions through custom code alone? You may want to create something more bespoke and in-line with your campaign. This can increase your chance of a user interacting and remembering your creative.

Custom beyond components

Interactivity

Interactivity (how a creative responds to user input) not only looks great but it can add further functionality to your creative. Like being able to apply effects or transitions when the user hovers over an element, eg; having a CTA button change colour or an image enlarge when hovered over. We recently did this for a client that owned a large number of hotel chains, by using an Event (how you connect a user gesture to change something in your creative) to enlarge the hotel image, name and price that the user was currently hovering over. This clever technique meant that the user could see more info about that particular hotel within the same physical space.

Interactive ad

Interactive ad expanded

How To

This was done by grouping the assets and selecting them as the trigger source, then changing the CSS styling of them to the size we wanted it to enlarge to once in the ‘hovered’ state. Simple! This is a great way of getting more info into your banner without spoiling the design you’ve worked hard to achieve. 

GWD ad events

GWD ad configuration

Complexity

You can get seriously hardcore in GWD. Aside from having the ability to add your own custom JavaScript or CSS code you can also experiment with 3D transformation. This allows you to create 3D objects and animate anything in the foreground and background to give a sense of depth. You could then combine this with interactivity; so having a cube rotate as you swipe, for example. 

How To

This is easily achieved through the Properties panel where you can tinker with the X,Y,Z axis and set up a custom event for the cube to rotate when a user swipe is detected. To do this, choose what will trigger the animation (a user swiping) and then choose what will change as the result of the swipe action (the X,Y,Z CSS of the cube). You can easily edit these events at any time which means lots of experimenting!

GWD 3D cube

GWD complexity

GWD interactive complexity

Why does any of this matter?

People like cool things. It’s no secret that if we see something new, something awesome, we engage and get excited about it. Creating top quality ads will help you push your brand and its products/services to stand out further and reach your target audience in this way. Combine it with a user-friendly experience and your users will be more likely convert, click through to your site or even just remember you which can be just as important.

So why not add a few components, a drop of interactivity and a dash of clever thinking and let GWD create the perfect recipe for your next creative!

Join the Discussion