Google Web Designer tool has all of a sudden appeared on the big screen from now where. Google has very smartly rolled out its answer to the web development tools market divided between proprietary and open source solution (WYSIWYG tools) leaving designers and developers clueless which one go along with. The time of launch of Google Web Designer by Google is very interesting because at this time:-
- • Flash is shrinking down day by day with day in day out expansion of modern flash alternative technologies like HTML5, CSS3, Java Script and Jquery to name a few. The pace at which these technologies are evolving is killing down flash despite Adobe’s effort to keep it alive. • Microsoft is not moving ahead with its Expression Web development toolkit project. • Adobe itself is busy in promoting its CC (Creative Cloud) technology, a monthly/ annual subscription based service. • Open source web development tools don’t match Adobes WYSIWYG web development tools standards. • Corel Graphics Suite X6 for creating website is not able to make it big on the web development tools arena.
Google Web Designer is crafted thoughtfully keeping both hand code coders and newbies in mind. The Google Web Designer tool helps you in creating, editing and publishing state of art modern cross platform compatible HTML5 Ads quickly and instantly.
Installation :
The tool is available for free for both Windows 7/ 8 and Mac OS. At first glance the post installation interface may surprise you. The post installation interface is much alike Google Chrome, thus giving it a look and feel web browser based application. The installer package can be downloaded from http://www.google.com/webdesigner/
User Interface :
The user interface of the Google Web Designer matches closely to Adobe CS 6 creative suite’s colour theme. If you have tried your hands on Adobe Edge Animate then plying around this tool won’t be a daunting task. When you launch the application after installation you will come across interactively crafted dark colour user interface.
Launch time user interface screen :
Post launch user interface :
The Google Web Designer has a very standard interface layout, with a dropdown menus right at the very top, an element modification panel on the right hand side, tools selection panel towards the left hand side and right at the bottom there is a time line manager panel.
Top Panel :
This application is built on the very fair and standard interface layout. The top panel is of this tool has standard options as available in other tools.
The top panel of Google Web Designer has four drop down menus for handling and managing things. The four drop down menus options are:-
File Menu :
Edit Menu :
View Menu :
Help Menu
Right Hand Side Element Modification Panel
The element modification panel allows you to modify elements selected on the stage, the modification panel can be expanded and collapsed with the toggle arrow button provided just on the top of the panel. The very first panel just below the toggle view button is the colour panel. The colour panel provides you instant access to all the colour picking tools available in this web designer tool. Below the colour panel there are four more panels, the very first one adjacent to colour panel is the properties inspector panel. The properties inspector panel grants you quick access to properties of elements selected on the stage; the properties of individual elements can be changed using this panel. The next panel adjacent to properties inspector panel is the components panel. The component panel give you to access to components like three sixty degree gallery, carousel gallery, swipable gallery, iFrame, maps, tap area, video and Youtube that can be used for building interactive ads projects, note for now these components can only used for creating ads there can be a future expansion on the use of these components. The next panel adjacent to the components panel is the events panel. The events panel allows you to hook up the events with your ads. The last panel and the panel adjacent to the events panel is the CSS panel. The CSS panel allow you to have full control over the styling of the elements. You can also import external CSS and incorporate it into your project using this panel.
Bottom Time Line Panel :
The time line panel help you to control the flow of your element during animation; it supports drag and drop element handling. Animating objects using time line panel is not a high hill task, anyone coming from video editing or flash background can quickly grasp the ins and outs of animating objects using the time line panel.
Left Hand Side Element Panel :
The left hand side elements panel facilitates you with the tools necessary for creating elements on the stage. The major tools shipped along with Google Web Designer for creating interactive Ads are listed below along with their keyboard shortcuts.
Keyboard Shortcuts :
• Selection Tool (Keyboard Shortcut V) • 3D Object Rotate Tool (Keyboard Shortcut W) • 3D Object Translate Tool (Keyboard Shortcut G) • Tag Tool (Keyboard Shortcut D) • Pen Tool (Keyboard Shortcut P) • Text Tool (Keyboard Shortcut T) • Rectangle Tool (Keyboard Shortcut R) • Fill Tool (Keyboard Shortcut K) • Stroke Tool (Keyboard Shortcut K) • 3D Stage Rotate Tool (Keyboard Shortcut M) • Hand Tool (Keyboard Shortcut H)
• Zoom Tool (Keyboard Shortcut Z)
By using these tools you can create state of art 2D and 3D HTML5 based Ads.
The Google Web Designer tool gives you full control over your design elements and codes running behind the design.
The Design View Mode :
The Code View Mode :
In the code view mode you have full control over the behaviour of your element’s codes.
The next two options adjucent to design and code view are live preview and Publish option.
Preview Mode :
The Preview mode enables you to view you Ad project in the web browser. Currently the preview mode enables you to view your HTML Ad document in Google Chrome, Mozilla Firefox and Microsoft Internet Explorer.
Publish Mode :
The publish mode gives you instant publishing access. With this handy option you can instantly publish your work without any hassle.
On clicking the publish button you will come across following screen granting you access to publish you work.
The Google’s naming convention for this tool for now does not justify itself, as for now this tool is meant for creating animated HTML5 based Ads and not complete website applications. The tool is very handy for creating quick prototype but on the other hand it is unable to open up HTML documents created outside Google Web Designer.
At present the Google Web Designer tools is at its beta stage but it would be really interesting to see will Google Web Designer be able redefine web design and development with proposed future adducts to be imported along with upcoming versions or will it just remain confined to creating Ad projects.