Découvrez la version beta de Google Web Designer, un outil pour créer des designs interactifs et animés

Le 20/12/2016

Dans Webdesign

Aujourd'hui le BlogDuWebdesign vous propose de jeter un oeil à un logiciel gratuit disponible en bêta : Google Web designer.

Google Web designer

Google Web designer et une application multiplate-forme proposée par Google qui permet de faire des créations HTML allant de la bannière anime à la page web complète. Il est à noter que le point central de l'outil est mis sur l'interactivité, et il est donc très simple de créer des événements, clicks ou autres, pour dynamiser vos créations.

Les résultats sont évidemment cross-platform, et peuvent donc fonctionner quel que soit le navigateur ou la devise utilisé pour les visionner.

Une installation ultra-simple

Pas grand-chose à dire sur ce point, clairement Google a bien fait le travail, avec un installateur pour Mac et Windows, ainsi que des paquets .deb et .rpm pour Linux. 

Google web designer

L'installation se fait en quelques secondes, il n'y a aucune case fourbe à esquiver, et les mises à jour se feront ensuite automatiquement.

Une utilisation malheureusement bien moins simple

Malheureusement, je trouve l'interface de Google webdesigner bien moins simple que son installation. Si j'étais plutôt enthousiaste à mon arrivée sur le programme (à cause de sa grosse ressemblance avec l'interface d'Adobe Flash, que j'ai poncé étant jeune), ça c'est assez vite corsé.

Interface google web designer

Attention, je ne dis pas que l'interface en elle-même n'est pas claire ou autre, mais qu'elle ne m'est vraiment pas apparue comme instinctive. Créer un projet, choisir son template, ça c'est ok, et pour la suite j'ai erré sans vraiment comprendre quoi faire jusqu'à aller voir la documentation.

Documentation google web designer

D'un autre côté, je ne suis clairement pas la cible, et j'avoue que Photoshop a lui aussi tendance à me mettre en PLS, donc ceci explique peut-être cela. 

Dans tous les cas, après quelques essais j'ai tout de même réussi à créer un événement au clic ainsi qu'un événement sur la timeline en bas de l'écran, et y lier une modification CSS.

Register event google web designer

Une fois cela fait, il est possible de jeter un coup d'oeil au code généré, que ce soit pour simplement le vérifier ou le personnaliser.

Html google web designer

Il est évidemment possible d'admirer son oeuvre dans un navigateur avec le bouton "Preview" en haut à droite. Bravo pour avoir laissé le choix du navigateur, et pas imposé Chrome. Cette décision aurait peut-être été logique d'un point de vue marketing mais aurait été un vrai moins niveau usage.

Pour finir, sachez que l'outil n'est pas limité a la création de bannières et pubs, mais peut être etendu à la création de pages HTML complètes par exemple.

Create type google web designer

Je ne m'étendrai pas sur ce point, mais je le trouve clairement dispensable, de nombreux outils font mieux actuellement, et ne remplacent vraiment pas une formation en HTML/CSS à mon goût.

Mon avis

Comme je le disais dans l'article je ne suis vraiment pas la cible de cet outil, au point où j'ai même failli abandonner cet article, pensant que je ne serais vraiment pas capable de tester l'outil de manière pertinente. Je ne vais donc pas l'utiliser au quotidien, c'est évident.

Malgré cela, il faut reconnaitre que le logiciel a une interface agréable (bien qu'un peu fouillis), et proposent des outils simples d'utilisation une fois qu'on a réussi à les localiser. Je vous conseille tout de même vraiment de passer faire un tour sur la page Features qui propose des gifs expliquant le fonctionnement de certains outils, ainsi que sur la page de documentation.

De plus, le logiciel est actuellement entièrement gratuit, et connaissant Google il a de grandes chances de le rester. Vous n'avez donc aucune excuse pour ne pas l'essayer !