Calling itself the way to bring ideas to life across screens, Google Web Designer (www.google.com/webdesigner/) seeks to create engaging, interactive HTML5-based designs and motion graphics that can run on any device — and while better advertising was an initial goal, this new development tool goes beyond easing HTML5 ad creation.
Google Web Designer enables users to focus on design, without worrying about (or even understanding) the underlying code, so artists and others can do what they do best — express themselves.
Google Web Designer enables users to focus on design, without worrying about (or even understanding) the underlying code, so artists and others can do what they do best — express themselves.
“Let us handle the HTML5 and CSS3 so you’re free to focus on what you love to do: creating gorgeous visual experiences,” the rep added. “A full design suite lets you easily bring any vision to life.”
While some developers will worry that this much “help” from a development tool will somehow constrain them, preventing the addition of custom coding and other perks, but Google Web Designer was built with easy customization in mind.
“If you’re feeling more handson, all the code behind your designs is hand-editable, so you’re never locked out of your own work,” the rep explains. “Your ideas are now amplified by code — not restricted by it.”
If this level of capability and control, backed by a technology giant, appeals to you, then read on for a look under the hood of Google Web Designer.
First up, there are two timeline animation modes, a Quick mode and Advanced mode, helping designers easily create eye catching pages and advertisements.
“In Quick mode, build your animations scene by scene and we’ll take care of the frames in between,” the rep advises. “In Advanced mode, animate individual elements using layers, easily changing the location of elements within the stack.”
According to Google, both the Quick and Advanced modes allow users to add a new view of the page, changing the elements they want to animate and optionally modifying transition times and easings. More complex animations are possible in Advanced mode, however, which lets you individually animate each of the elements, while showing layers; enabling users to change where each element is within the stack of elements.
Animations aren’t enough for you? Google Web Designer offers a full 3D authoring environment that allows users to create and manipulate 3D content utilizing an array of tools and the power of CSS3, so that you can rotate objects and even 2D designs, along any axis — visualizing the 3D transformations and translations as you author the design.
Of course, there’s more to Google Web Designer than the ability to create eye candy, with both a design view and code view working together to help enable your creativity.
“While a visual tool is helpful, it can never represent your creativity, imagination and vision in full,” the rep explains. “That’s why you can flip back and forth between Design View and Code View as you work; immediately seeing changes made to code reflected back in your designs.”
This feature is extremely handy when creating ads and HTML files, as it allows users to immediately test how changes in their code will affect the design.
The built-in code editing tool lets users create CSS, JavaScript and XML files with an auto-completion function that Google says makes code easier to write with fewer errors; while a selection tool enables designers to select objects and then change the CSS styling through the CSS panel.
Although Google Web Designer includes numerous tools that make it a true one-stop solution for website creation, developers are not limited to using these tools only; with an ability to import files a welcome addition.
“Import assets from any other creative suite or use the built-in illustration tools to create vector-style artwork — keeping your designs light,” the rep offers. “To create new HTML tags in your designs, just draw them in with the Tag tool.”
Need more?
How about an easy ad workflow, with built-in support for creating animated banner, expandable and interstitial ads — along with the tools to publish and profit from them.
“Google Web Designer makes it simple to publish ads through any platform,” the rep concludes. “Choose from DoubleClick Studio or AdMob, or go for the Generic option to push content through any other ad network. No coding required.”
Think about that: This free tool not only builds responsive websites, it also provides traffic and revenue options in one package — and you can bet the pages it generates are search engine friendly, for even more traffic potential.
