Create Interactive HTML5 Ads with Google Web Designer

By . in Toolkit. Updated on .

If you follow Google’s development close enough, you probably know about this but if you don’t, the giant search engine company has recently launched a new tool call the Google Web Designer. In short – this is Google’s version of Adobe Flash. Only that the output is in HTML5 and CSS3, and it’s currently limited to creating ad banners.

As stated by Sean Kranzberg, Google Engineering Manager, in the announcement for the tool:

"We think that Google Web Designer will be the key to making HTML5 accessible to people throughout the industry, getting us closer to the goal of “build once, run anywhere".

Recommended Reading: HTML5 Website Showcase: 48 Potential Flash-Killing Demos

Google Web Designer is available for Mac and Windows. Let’s see what this beta version of Google’s latest product has to offer.

Getting Started

We can create a new blank file for HTML, CSS, JavaScript, XML, and Google Ads, which provide a set of pre-defined ad size that is also the standard of the Google AdSense ad format. New file creation requires us to specify the document title, the name, saved location.

Animation Mode

This is something that we might not find in other web page creator applications – the Animation Mode.

There are two options in Animation Mode: Quick, which gives us simplified toolbar for creating basic animation, and Advanced, which will give us the advanced toolbar for arranging more complex animation. We can also opt between these modes when the file has been created.

Adding New Element

Google Web Designer provides a set of standard User Interface, which is easy to get accustomed to. The left toolbar lets you select tool sto add new element.s The default element generated would be the div element. But, you can have it changed.

  1. Select the Tag Tool.
  2. Go to the top toolbar, and select the Custom Element.
  3. Specify the element you want to add.

On the toolbar to the right, you can modify the element’s property such as the padding, margin, dimension, border, as well as see all the CSS rules that are applied on the element.

Furthermore, Google has created an overview of the UI in the following video. Watch it to get further insight.

Animation

This is where we build animation with HTML5 and CSS3. This feature is better explained with a live demo, and Google has one for that, which so much easier to digest than. Enjoy:

Conclusion

In spite of its name, Google Web Designer is aimed at advertisers rather than web designers in general.

In fact, the official announcement is posted on the Adwords Agency blog. But, despite of the name and Beta status, Google Web Designer is quite functional for creating web animation

I’m definitely looking forward to the improvements in the next version.

More:

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail