Introduction to Google Web Designer

The Google Web Designer:

• Is a new tool by Google for building interactive HTML5 sites and ads
• Built with HTML5
• Lets you design and build HTML5 advertisements and other web content
• Offers integrated Visual and Code interface
• Allows to create HTML, JavaScript, CSS and XML files as well as various advertisements

You can create and animate contents using the drawing tools, text and 3D objects provided. Once you're done creating your content, Google Web Designer outputs clean human-readable HTML5, CSS3, and JavaScript. It offers a library of components that lets you add image galleries, videos, ad network tools, and more. Google Web Designer's Code View lets you create CSS, JavaScript, and XML files, using syntax highlighting and code autocompletion to make your code easier to write, with fewer errors.



Interface

The workspace in the center is quite large and is surrounded by various panels containing various tools. In Design Mode the workspace shows your design content, in other words images/text/other visuals, whereas in Code view it shows the code for your design with appropriate color codes.

View Bar

The View Bar allows you to switch between Design View and Code View as well as to see a preview or publish your contents. You can also change the zoom level and current page from this bar.



Tools

The Tools panel contains various tools for selection, 3D rotation, 3D translation, Tag, Shape, and Text and so on.

Tool Options

This panel shows the relevant options for the current selected object in the workspace. For example, if you're working with the text tool then it will show options to adjust the text.



Timeline

The panel below the View Bar is a Timeline for creating animation using frames.

Panels in the right section.

The right section contains the Color, Properties, Components, Events and CSS panels. Panels can be minimized or dragged to a different position in the panels section.

• FeaturesTwo animation modes:
  
  1. Quick Mode: In Quick Mode, you build your animation scene by scene by adding a new view of the entire page, changing the elements you want to animate and optionally, modifying your transition times and easings. In Quick Mode an animation starts at one scene and ends at the next. That means you do not have control over the frame that the Advanced Mode offers you.
  
  2. Advanced Mode: In Advanced mode you can individually animate each of the elements you want, and optionally modify transition times and easing separately as well. Advanced mode also shows layers, that let you easily change where each element is in the stack of elements.
  
  
  
• Full 3D authoring environment: We often want to change the perspective on the elements we're working on to see the effect on every side. Using the "3D Stage Rotate" tool you can do this in Google Web Designer. You can freely rotate the object by clicking and dragging anywhere other than the color-coded rotation handles. The Google Web Designer seems to be very lightweight too.
  
  
  
  Handling 3D manipulations. Thumbs up to CSS3 and HTML5 and not to forget JavaScript.
  
  
• Design view and Code view: like I explained earlier, there are two views, one for visuals and one for code.
• Illustration tools: You have many illustration tools to create and modify your content. Using that you can add tags, draw with the Pen Tool, add text, add a shape, add color to an object, create timeline animations, change Styles, add events and many more.
• Easy ad workflow: Google says the "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." It offers creation of various kind of ads. Varieties include Banner Ads, Expandable Ads and Interstitial Ads.
  
  Get started with Google Web Designer here: https://www.google.com/webdesigner/