Google’s new Web Designer tool
allows you to create HTML5-based ad designs and graphics that can be run on any
device. The free tool focuses on ad design and uses HTML5 and CSS3 behind the
scenes, while still giving you access to modify the code if you want to create your own without restrictions. Google Web Designer is
currently in Beta.

Features

Google Web Designer includes the following features:

  • Animation
    modes
    , which allow you to develop in either Quick or Advanced mode, give
    you the ability to build scene-by-scene graphics while the tool creates the
    frames that tie the scenes together. With the Advanced mode,
    you can create layers and animate individual elements within the stack.
  • 2D and 3D
    authoring environment tools
    , which allow you to create transformations and
    translations using CSS3 to rotate objects along any axis.
  • Dual view
    screens
    give you Design view and Code view, so you can flip between the
    live design and the code behind the design as you work on projects.
  • Illustration
    tools
    can be used for creating your graphics, or you can import image or
    graphic assets from other creative suites to design your vector-style artwork.
    In addition, you can incorporate HTML tags to reference image files using the
    Tab tool.

Requirements

These are the minimum requirements for installing Google Web Designer on
Windows or Mac OS.

  • Operating
    system:
    Windows 7/ Windows 8, Mac OS X 10.7.x or later
  • Processor:
    Intel Pentium 4 or AMD Athlon 64 processor
  • Memory:
    2 GM RAM
  • Screen
    resolution:
    1280×1024
  • Application
    window size:
    1024×768
  • Internet
    connection:
    Required for initial use after download, for updates, and
    for help access.

Getting started with Google Web Designer

For an in-depth overview of the Google Web Developer tool you can check
out the Google Web Designer help
pages, which includes these sections and topics: Introduction, Getting Started,
Create and modify content, Create an ad, Preview and publish your work, and Troubleshoot and resolve common issues. A screen capture of the Help section is displayed in
Figure A.

Figure A

The Help pages also provide several YouTube video tutorials on topics
such as the Google Web Designer overview, the Text Tool overview, and the Pen Tool overview.

Installing Google Web Designer

The following installation steps are for a Windows 7 PC.

Click the Download Web Designer Beta button. When you see the Google Terms of Service agreement, read it and then click the Agree And Download button (Figure B).

Figure B

The download will start immediately and shows up as the file
googlewedesigner.exe (Figure C).

Figure C

Double-click googlewedesigner.exe and then select Run from the Open File – Security Warning dialog box (Figure D).

Figure D

Depending on your PC configuration, you may also receive a User Account Control dialog box for allowing the program to make changes to your computer.
Click the Yes button to continue (Figure E).

Figure E

Once the installer completes its actions, you’ll see the thank you
message (Figure F).

Figure F

Using Google Web Designer

Click the Google Web Designer icon from the Programs list, and you’ll see
the initial splash screen as it starts (Figure G).

Figure G

Once initiated, the default program will open (Figure H).

Figure H

To start your first project creating a new document, select New File from
the File menu. The Create New File dialog box will appear (Figure I).

Figure I

The default new file is for a Google Banner Ad using the DoubleClick
Studio Rich Media environment, with 300×500 dimensions, named as an HTML file.
The default location for a PC is /Users/username/Documents, and the default
animation mode is Quick. Once you have set your conventions, click the OK
button. Your first file is created and displays in Design view by default
(Figure J).

Figure J

Click the Code View (it’s in the bottom left of the screen) to see what’s behind the design (Figure K).

Figure K

The simple steps to creating a primary banner page are:

  1. Import your images by dragging them into the
    work area in Design view, or by using image tags in the Code view.
  2. Arrange your images and any other elements you
    want to use on the stage.
  3. Create animations or bring other components onto
    the page, if you like.

I played around with the tool for about 30 minutes without reading any further
instructions or following tutorials, and I was able to drag a few images into
the work area; it will probably take trial and error before I can get any
serious animations created. Figure L shows my initial attempt at creating a
demonstration banner page with a 360° Gallery Component and the handshake “Welcome!”.

Figure L

Conclusion

Once I review the video tutorials, I might be able to create something of
usable proportions, but at this time I think there is a learning curve to
getting off the ground with this tool. It will be interesting to see how much
Google will continue to support this tool (i.e., will it go beyond the Beta
stage?). I’m also curious to see if Google takes some focus away from promoting
Web Designer as an ad creation tool and makes it more of an all-around web
development tool.

For more information on the Google Web Designer tool, be sure to check
out the Google Web Designer beta User Forum and the Google Web Designer Google+ page