Skip to main content

Google Launches Web Designer, A Tool For Creating HTML5 Sites And Ads

Google today announced the launch of Web Designer, a new tool that lets designers build interactive HTML5 advertisements, animations and other Web content using an integrated visual and code interface. The tool which the company spoke about in June, is now in public beta and is available for download for Windows and Mac.

Google Web Designer allows users to create content using drawing tools, text, and 3D objects, that they can animate on a timeline. Once they’re done creating their content, the tool outputs clean human-readable HTML5, CSS3, and Javascript. Users can tweak the code directly using the “code view” to fine tune different aspect of the animation, and quickly preview their creations in every browser installed on the machine.


The new tool competes directly with other web design software in the market such as Adobe Edge Animate, part of Adobe's Creative Cloud subscription, Webflow and Hype. But these are not free. Apple also offers a similar free software, iAds Producer, but its license agreement limits content created with the application to display only on Apple's iAds advertising network, the iTunes Store or in iBooks Author Widgets.

Google Web Designer, in contrast, besides being free is not restricted to any advertising network or website - contents created with the application can be deployed anywhere.

Features of Google Web Designer

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 autocompletion 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 ad 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.

via TechSpot


  1. seems to offer some related functionality, but is "code free". It will be interesting to see how webydo fares now that Google has a beta release of its web designer.


Post a Comment

Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.

Diagram 101: Different Types of Diagrams and When To Use Them

Diagrams are a great way to visualize information and convey meaning. The problem is that there’s too many different types of diagrams, so it can be hard to know which ones you should use in any given situation. To help you out, we’ve created this diagram that lays out the 7 most common types of diagrams and when they’re best used:

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.