Waching daily Sep 26 2018

CHRIS: Welcome! My name is Chris

and I'm a designer on the Google Web Designer team

Today I'll walk through a new dynamic template with an emphasis on text

We'll cover customizations including configurable panels

selecting nested elements, dynamic text fitting, editing groups

and a demonstration of the template

when uploaded into Display & Video 360 Ad Canvas

Let's get started

First let's navigate to the template library

You'll find the template

under the thumbnail Data Driven for Display & Video 360

Notice we have three new template layouts to choose from

Blank Slate, Cue Cards and Panorama

but today we'll be focusing on cue cards

Let's create a template using cue cards

I'm gonna give the file a quick name and click Create

Now before we proceed in Google Web Designer

let's take a quick look at a design schematic of cue cards

So cue cards is a template that utilizes elements and assets

such as a logo, a background image, a swipe gallery

a swipe gallery navigation, an animated arrow icon

and three dynamic text groups labelled SlideA through SlideC

You also notice a few tap areas utilized for dynamic exits

OK jumping back into Google Web Designer

Let's review a few important panels

for customizing and configuring cue cards the template

In the timeline you'll notice we have a lock icon

Let's click the lock icon to unlock and edit the layer

Let's select component swipe-vertical

Next navigate to the Properties panel

The Properties panel is where we can configure the elements attributes

style, position and size, and also edit the component properties

You'll find this component is driven through the use of groups

SlideA, SlideB, and SlideC

Now let's move to the Library panel

We'll find the individual group definitions and group contents in the Library

We can right click a group name click Edit and edit the contents of the group

Protip: to quickly inspect the elements inside this group

We'll use the Outliner

The outliner is a really cool new tool

for enabling us to view nested elements inside the group

versus clicking through your divisions

you can rapidly find which element you would like to target and edit

You'll also notice in this creative

we have two divisions: wrap-SlideA txt-wrap-SlideA

These are dynamic text divisions that have a little bit of CSS logic that

helped to auto center them

depending upon what type of information comes down through the feed

Now let's click on txt-description-SlideA in the Outliner

You'll also notice there's a T icon next to the txt-description-SlideA

This signifies that it's a text element

With the text element selected

We will come up to the panel at the top named Text

In the text panel you'll be able to configure text fitting of dynamic text

and also the styling of the text in your document

We can set a maximum size and also a minimum size

and when the dynamic text is passed to the division

it will display the rendered fitted text size

Now let's navigate back to the root of the document

you'll notice we have breadcrumbs in the bottom left-hand corner of the stage

right above the timeline

Let's click Div to jump back to the root of our document

Now two more notable panels are the Events panel and the Dynamic panel

In the Events panels we have events that are specific to the control

over the animated arrow icons behavior during autoplay and also during user gesture

Next to the Events panel we have the Dynamic tab

These are the dynamic bindings

that enable this document to be bound dynamically

including assets, text, styling, and click exits

You'll also notice Brand Awareness is highlighted

Brand Awareness is the schema we are going to be utilizing

inside of Display & Video 360 Ad Canvas

click OK to exit the dialog

As an added bonus I would like to demonstrate the power of this creative

If I jump over to a mock from a visual designer

this is technically the spec the designer would like me to build to

This creative is dynamic so the text could technically be interchanged

Let's fast forward to what the creative can look like

if I built it using Google Web Designers Cue Cards template

You'll notice as I refresh this page

the creative auto animates

The arrow tries to grab the users' attention by animating and jumping

The creative also has a navigation on the right hand side

where we can drive the creative

Users can also use gesture

to scroll through the creative upon user interaction

Let's say I wanted to publish this creative

and upload it into Display & Video 360 Ad Canvas

So you might have a question

what is the Ad canvas

The Ad Canvas is a visual editor you can use to build

and edit creatives in real time

The Ad Canvas only supports our Google Web Designer data driven templates

and also custom variations

So in DV360 my template is loaded in the center

and on the right hand side I have a UI that is editable on-the-fly

You'll notice text fitting is working

Variations and iterations can be knocked out proofed

and signed off in a matter of minutes now

with Google Web Designer's new data driven templates in the Ad Canvas

The new dynamic workflow has never been easier

if you would like to learn more about Ad Canvas

please look in the details section of this video

for a Display & Video 360 Ad Canvas comprehensive demonstration link

This wraps up our video

Please have fun creating new dynamic ads

Thank you from the team at Google Web Designer