Google Web Designer Beta

Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.

March 10, 2014
25.2 MB
   (17 votes)
Download options:

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.

What's New:

  • Components - YouTube Flash player does not work in Firefox
  • Runtime - In-App expanding ads expand to the wrong orientation on first expansion. See Using orientation in expandable ads for more information.

  • Components

    • Tap event in the current page is also executed on the tap area of the next page
    • YouTube component does not work over https://
  • Preview/Publish

    • Upper-case letters in a class name in the styles tag are changed to lowercase when a file is previewed or published
    • Background images do not render in Preview
  • YouTube Component
    • Auto-hiding controls don't work if the component is resized
  • CSS Panel
    • New classes are removed if no styles are added to the class
    • New rule names are set to an empty string when given an invalid name
    • Extra Classes are added if you add a new style tag for a web font and then duplicate the page
  • Events
    • Events are not displayed when switching between possible actions in the Event Dialog
    • The save button is enabled even though not all the required event configurations are selected
  • Timeline
    • Inserting keyframes within the pre-animation delay by pressing F6 shouldn't be allowed in Advanced mode
    • Undoing delete and duration changes throws error in Quick Mode
    • Possible to insert a keyframe at 00:00:00 time by pressing F6 or by right click
    • Deleting text in main level deletes its child element from stage but the layer still remains in the timeline
    • A layer name is un-editable for a div when there is an existing component id in the layers
  • New File dialog
    • Enabled creating a new directory in the New file dialog
  • Image Drag and Drop
    • Drag and drop image is not working properly when switching between files from different folder locations
  • Color Wheel
    • The color wheel popup is cut off when selecting the left color stop for gradient color on canvas-based images
  • Text
    • Adding a Web Font link in code view freezes GWD when switching back to Design View
    • The is added as the last element in the tag
  • Multiple elements
    • Errors are created after undoing changes to values in the property inspector
  • Nested elements
    • The bounding box of a child container does not match with the child element after the border width of the parent container is changed
  • Multiple image upload dialog
    • URL field should only accept http:// or https:// URLs
    • Google Web Designer should ignore unsupported files that the user is attempting to upload by dragging and dropping