Web Designer is a newly released tool from Google for Windows and Mac, which is currently in beta. The app not only allows one to design beautiful HTML5 pages, but also allows to add creative animations.
Though Google's focus is on advertisers and agencies to help them make creative ads using Web Designer, but the app has more capabilities than just making animated advertisements. Macaw is an app which is pretty similar to Google's Web Designer tool in terms of features and usability, but it is yet to be released.
The app takes some time to start at the first launch. The interface is pretty much similar to Adobe products with all the tools at the left and all the panels at the right with the workspace in the middle. When you create a new project, it asks you what type of file you want to create. You can create Banners, HTML, CSS, JavaScript and XML files. You can also start with a blank file.
Creating Ads
For creating Google Ads, you can create banners, interstitial and expandable ads. You will have to choose one of the listed size or you can use custom resolution of the ad. After entering the project and file name, you will be taken to the main project where you can use different tools and panels to make your banners.
There are some advanced options like 3D rotations and 3D translate. You can add multiple frames and animations to your ads.
You have Components panel which gives you the ability to use objects like iFrame, 360 degree gallery, Map, YouTube etc. in your banners. The components can only be used while creating banners.
You can assign events for your ads too.
Creating HTML5 Pages
Google's Web Designer app is more of an app for designers than for those who want to create ads. Creating HTML5 webpages with Google's Web Designer is somewhat hard at first as you have to learn how to use the tools right. There are a lot of options like changing the colors, borders, fonts, creating shapes etc.
The ability to use Google web fonts in your project is what I liked the most. Apart from that, there are set of tools including Pen Tool, Tagging Tool, Rectangle Tool, Fill Tool and Stroke Tool.
There's a color panel at the top in the panels column. Below that is the Properties panel which allows you to set the properties of the element which is selected. You can define the ID of the element to be used in CSS and you can define the position and size of the element. You can also change the color of the element from the style option in the Properties panel.
The CSS panel displays the CSS properties of the selected element.
The app is pretty useful for those who want to create standard advertisements and HTML5 pages. The app has a lot of features which can be used creatively for creating beautiful designs. The app is currently in beta for Windows and Mac.