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
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.
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.
The Tools panel contains various tools for selection, 3D rotation, 3D translation, Tag, Shape, and Text and so on.
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.
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.
- 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/