We encounter online ads as soon as we open the browser, but do you know how these ads are actually made?

Google has created a powerful tool that allows us to quickly and easily design and create HTML5 Ads and advertisements, will use a visual and code interface. This is a complex program that contains a large number of possibilities. Google Web Designer (GWB) also offers a set of components that allow us to add image galleries, carousels, videos.

And the best part of it all is that it is completely free.

How to use Google Web Designer?

You can download Google Web Designer at the following link.

“Okay, I’ve downloaded the program, what’s next, this is too confusing”, you think to yourself for sure.

Getting acquainted with the program

Once we have downloaded and installed Google Web Designer, the first challenge we face is to create a file:

On the left side of the interface, we select the type of ad (Banner, AMPHTML Banner, Expandable and Interstitial) or one of the above options (HTML, HTML with Pages, CSS, Javascript and XML).

For now, we will stick to banner ads. We move to the right part of the screen. Add the name and location where you want to store the material you are working with in the program. The next item is the environment for which our advertisement is intended. There are 4 options, namely: Display & Video 360, Google AdMob, Google Ads, Non-Google Ad. Depending on which platform we are working for, we will choose the appropriate option.

This time we will choose Non-Google Ad and the appropriate dimensions, we will not check the Responsive layout and we will choose the advanced Animation Mode, so that we have more options when making animations in the Timeline segment.

Google Web Designer interface

After creating the project, we encounter the main interface of Google Web Designer program. The interface is divided into several main parts. In the central part, we have a large area for building the project and editing the code itself (basic desktop). At the left end of the screen is the toolbar, at the bottom of the screen is Timeline, and on the right is a set of panels that allows us to change and add colors, elements, components, various events and many other options.

In the upper right corner of Google Web Designer, there are 2 modes for creating ads:

1. Design View, where images, text, and other elements of our document are visually displayed, just as they will appear in a browser
2. Code View, where the code of the document itself is displayed

Tool Menu – Tools

On the far left side is a toolbar.

It contains all the tools needed to create elements (text, shapes, masks…). With the toolbar we create the text and add the elements that we want to have in the advertisement.

Timeline

With Timeline, we create animations through keyframes. Keyframe It represents the position of an object at a specific time. This makes it possible to Determine in time when each component will appear and in what way. In advanced mode, each element is animated by adding keyframes to the timeline to indicate where the animations begin and end.

Now let’s move on to the animation of the object. If we want, for example, to text Google Web Designer is animated so that it appears on the left:

In the Timeline segment, 2 keyframes must be added, one where the text is outside the desktop on the left and one where it is currently located.

Right-click on the timeline to add a keyframe.-these when we want. Select the first one and change the position of the text so that it is off the desktop.

Second keyframe This is the position in which we want the text to remain, more precisely the one from the beginning. Scrolling scroll in the Timeline we can check what the animation looks like.

Panels

The panels within the Google Web Designer program include items on the right side of the screen, in order: color palettes and text, display of current elements on the project, properties of the selected object (position, rotation, fill…), components.

Object Properties

Changing the structure of an object in Google Web Designer is done manually (moving, enlarging the object with the mouse) or using the panel on the right.

On the right, there are options for:

1. position and size of the object (this can be expressed in pixels or as a percentage).
2. rotation, 3D rotation and ratio in length, width and height
3. style, color and size of the frame, whether it will be curved or not
4. The visibility of the object (from 0 to 1), where 0 means that the object is completely invisible.

Components

Components are pre-built modules that allow you to make ads or HTML You need to add certain functions to the documents. They are organized into several smaller sections that are expanded by clicking on the name of one of the sections.

We’ll single out a few:

Galleries:

• 360′ Gallery

• Carousel Gallery

• Gallery Navigation

• Swipeable Gallery

• Transition Gallery

• Amp-carousel (only allowed in AMPHTML ads)

Interaction:

• Add to Calendar

• Gesture

• Image Button

• Parallax

• Tap Area

• Tap to Call/Text

In this article, we’ll introduce you to the basics and features of Google Web Designer . Google’s A product that makes it easy to create ads for both beginners and those with more advanced knowledge. In one of the following articles, we will deal with all the components and other functions in more detail Google Web DesignR-A.

Digitizer is here to support you in designing an advertising performance on Google. Contact us!