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.
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.
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.
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.
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.
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.
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!
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!
