Google Web Designer HTML5 Development Tool

Google recently launches web designer tool for building interactive HTML5 sites, It is a free tool developed by Google Web Designer Team.
An advance tool for professional website designers to create animated 3D HTML5 applications.
The Google Web designer team said that it is purely for creating HTML5 ads and campaigns; it is free for everyone to use.
We previously talked about Sites to create Online portfolio websites for free which help peoples to create personal sites without knowing HTML. Google Web Designer tool is for developers.
Creating HTML5 apps is now pretty much easy with Google Web Designer Tool.
 It is still in bête version and available free to download for windows and mac.  If you didn’t download it yet, download it now.

Google Web Designer HTML5 Development tool

Google provides search services and free online tools as well as advertising services for marketing.
For the conveniences of web developers and advertisers Google releases Web designer tool.
Now to make it clear, It is not a Website Builder Tool, Google Officially stated that it is for ads or banners creating, it can also be used to create HTML5 apps.
We’ve recently discussed Online tools to create charts,graphs and diagrams in which you can design static diagrams, compare to it Google Web designer is a dynamic tool for professionals.
Google web designer is cross modern browsers and devices tool, means it will run on any device and on any modern browser without breaking the HTML structure.
Previous week we’ve shared Best free online HTML and CSS Editors to make website creating work easier.
Google Web Designer aim Web developers to create HTML5 and CSS3 Creative.

Google Web Designer Key Features

Basically the Google web designer has 3 types of environment to develop. One is Double Click Studio Rick media, admob and Generic.
Following are some of the features.
  • Free for everyone to use.
  • Easy and quick to develop HTML5 applications.
  • Switch between code view and Design view.
  • Easy to use the tools. Selecting a tool will list all properties.
  • Build ads for Doubeclick, admob, ability to work in generic environment.
  • Auto Program Update (As the Google Web designer software is in beta version if there’s an update to it, it will update automatically).
  • Cross Modern Browsers and Devices Tool.

How to Use Google Web Designer

Using Google Web designer for the development of HTML5 apps, Ad banners, and campaigns is easy once you know the basics. Let’s get started.

  1. First of all open Google Web Designer from the start menu for windows 7, for windows 8 search in apps.
  2. Once you’ve opened, then at the top click on New File. Now select in which type of environment you want to work, the DoubleClick Studio Rich media, Admob or Generic. Select the first one if you don’t know what it mean. 
    working with Google Web Designer Tool
  3. Change the width and hight if you’d like to, you can also change it later. Type the name of the file, it could be anything, select the animation mode quick or advance.
  4. Click On Ok. Now get ready to design and develop.
  5. At the right side of the window you can design your app. Select the RGB colours at the style spot, change the background color, the width and heights and more.
  6. At the Left side there are tools that you can use to. This is the interesting part. Click on any tool and at the top of window you will see the properties that you can use to. 
  7. At the bottom of the Google Web designer, you can switch to code view if you want to change some properties or want to create some events.  Once your app is ready, you can check to see if it is working by clicking the play button. you can save your file if you’d like to work later.
  8. For more details and complete tutorial check out Google Web Designer Help centre here
    I hope that this post will be useful for you and that you’ll enjoy developing with Google Web Designer Tool. Feel Free to share your views with our readers.
  1. Kamran Khan

    Feel Free to comment and share your views. If you've a resource or another tool you want to share you can do so, Please do not use anchor tags while inserting links.

  2. Basheer Ahmad

    A very nice tool you mentioned so clearly! Thank you for giving your time and sharing it with us!!!

  3. Kamran Khan

    You Most Welcome. Yea, it is for developers.

  4. Tania Azirovic

    great post

  5. Kamran Khan

    I'm glad that it was useful for you.

Leave A Reply

Your email address will not be published. Required fields are marked *