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".
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.
- Select the Tag Tool.
- Go to the top toolbar, and select the Custom Element.
- 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.