#Google launched “Web Designer” Beta (in September), a free tool for Windows, Mac and Linux that makes it easy for anybody to build interactive HTML5 websites, web contents and ads.
Since then Google has updated the Web Designer with an Animation Tools, deeper AdWords and DoubleClick integrations.
Google AdWords service for advertisers now also supports HTML5 ad creatives from Web Designer. For the first time AdWords can handle HTML5 ads. Flash ads that are uploaded to Adwords will be automatically converted to HTML5 now.
Users will appreciate the addition of a number of new animation tools to Web Designer more. The animation timeline has been reworked in the tools to include features like animation scrubbing, timeline events and auto keyframing, which should make it quite a bit easier to build animations inside the tool. Added a few new 3D features, which should make the animations more interesting.
Other new features include an integration with Google Drive to easily share Web Designer files with others, as well as integration with the CodeMirror text editor.
It’s an easy tool to work with and thanks to its integrated code editor, you can always fine-tune the result by editing the CSS and JavaScript codes manually.
Descriptions
Create Animations
You can create animations in Google Web Designer in two modes, Quick mode and Advanced mode.
In Quick mode, you build your animation scene by scene: you add a new view of the entire page, change the elements you want to animate, and, optionally, modify your transition times and easings.
For more complex animation, Advanced mode lets you individually animate each of the the elements, optionally modifying transition times and easing as well. Advanced mode also shows layers, which let you change where each element is in the stack of elements.
Full 3D Authoring Environment
Create and manipulate 3D content utilizing an array of tools and the power of CSS3. Rotate objects and even 2D designs along any axis, visualizing 3D transformations and translations as you author.
Design View and Code View
Code view lets you view and edit your code in Google Web Designer’s built-in code editing tool. Code view lets you create CSS, JavaScript, and XML files. Code view uses code auto-completion which makes your code easier to write, with fewer errors.
For Ads and HTML files, you can switch between Code view and Design view, with the changes that you make to the code in Code view reflected in the Design view. This lets you immediately test how changes in your code will affect your designs.
You can also select objects with the selection tool and change the CSS styling for those objects in the CSS panel.
Illustration Tools
Import assets from any other creative suite or use the built-in illustration tools to create vector-style artwork keeping your designs light. To create new HTML tags in your designs, just draw them in with the Tag tool.
The CSS panel lets you edit current styles, as well as add new CSS rules.
Easy Ads Workflow
Google Web Designer makes it simple to publish ads through any platform. Choose from DoubleClick Studio or AdMob, or go for the Generic option to push content through any other ad network. No coding required.
For more information and download link, visit Google Web Designer site or subscribe to their YouTube channel to learn the basics on how to use the application.
Related articles
- Core UI: The (Sometimes) Long and Winding Road (desk.com)
- Turntable.fm – An inside look at how Turntable is built – DigitalSurgeons.com (digitalsurgeons.com)
- How to Use Google Analytics Effectively (getresponse.com)
