As the name suggests, Google Web Designer is a suite of tools to create HTML5-based projects. The basic layout looks like a video editor, with a main menu along the top, a timeline running down the screen’s left-hand side, and a set of buttons for things like Effects and Assets. However, unlike a video editor, it’s here you can add, edit and design elements of your page.
Today, let’s take a closer look at Google Web Designer, specifically when used for motion graphics.
Here’s what you need to know:
Interface
The Google Web Designer interface is surprisingly easy to use. The main menu across the top of the screen contains items that let you add assets to your projects, such as images, shapes, sprites, and text. The buttons below allow you to move between pages, create new scenes, import assets, and export completed projects to the Google Developer’s Console.
Along the left side of the interface are the timeline and layers. The timeline is where you add the assets you’ve selected from the menu, adding the assets using their respective buttons and then placing them into the scene for the website. The layers can be used to manage assets in the timeline and the assets list.
Working with Assets
You can import assets into Web Designer in many ways. You can import assets from a local drive or network. You can also import assets from a URL or even import a project from another HTML5 project. You can also create assets using the text tool and delete the text, leaving only an image as an asset.
Once an asset is in Web Designer, you can work with it in several ways. You can create paths by drawing on the web page and converting them into paths. You can also create shapes, text, video, and audio. The last four of these can be tweaked to various degrees.
Animation
Animation is straightforward in Web Designer, although not relatively as easy as in Flash. Everything can be dragged and dropped onto the timeline and then tweaked to fit the website’s needs. If you have a background moving at a different speed to the foreground, you can have it so and then export the project to the Developer console as all the assets are included in one file.
Preview
The website preview inside the Web Designer package is as close to the real thing you’re going to get. The actual website runs in the Google Chrome browser, so there is a bit of a delay when you scrub along the timeline, but it’s close enough.
There are other tools to help, too, such as creating transitions and effects. These can be made and thrown into the timeline as required.
Web Designer has other features, such as an image tool and audio editor. Still, for this review, we’re going to look at motion graphics to see if Web Designer has any value for a motion designer who wants to create a simple HTML5 website for their client.
Support
Web Designer is supported by a large community of developers, including web developers, mobile developers, and Android developers. Google and Adobe also support it. This is great if you’re planning to use the Google platform to host your website or already using Flash or AIR for your motion graphics, but it isn’t that great if you’re planning to create your website on a different platform.
The good news is that you can export your project to various platforms, including HTML5, Flash, and Microsoft Silverlight. On top of that, it’s easy to export a project from one platform and import it directly into another, so for example, it’s possible to export your project from Flash and then import it into an HTML5 project. That said, it’s also possible to export each asset as a separate file and use the asset files in any way you want.
Conclusion
Web Designer is a lightweight, easy-to-use tool that’s great for building HTML5 websites. It’s also the perfect tool for anyone who wants to get into motion graphics and create a similar site – although you’d need to learn a bit of ActionScript to exploit it fully.
If you’re thinking of building your website without prior knowledge, Web Designer is perfect and has a large support community to help you. On the other hand, if you already have expertise in a different platform, such as Flash or Silverlight, you’re better off sticking with what you know.