Web Designer

Google Web Designer en image :

Google Web Designer, logiciel de création de bannières

Web Designer

Annoncé en juin 2013 et lancé fin septembre 2013, Google Web Designer a pour vocation de faciliter aux internautes, qu'ils soient ou non entrepreneurs, la création d'éléments animés à intégrer à un site web. Ce type de projet, précédemment initié par Google via des outils moins puissants, comme par exemple l'outil de création de bannières pour AdWords, a cette fois l'ambition de devenir une application Google à part entière, utilisable par tous et dans tous les cas de figure.

Google Web Designer est un logiciel conçu par Google pour permettre à ses utilisateurs de créer des éléments complexes à base de code tels que bannières et animations graphiques et génère pour eux le code nécessaire à l'intégration sur un site en HTML5.

Sont possibles la création de bannières publicitaires et de tous éléments visuels (notamment objets 3D) représentant une interface entre l'internaute et le site web. Les options de mise en forme et de création d'éléments annexes sont également gérées via les codes CSS3 et JavaScript.

L'interface graphique

L'interface se veut conviviale et simple d'utilisation, comme le serait celle d'un Lightroom : une bibliothèque permet un accès rapide à tous les éléments, images et vidéos, nécessaires à la création.

Interface du logiciel Google Web Designer

Google a activement travaillé à la création d'un environnement maniable, avec de nombreux composants pour intégrer tous les éléments voulus dans la création, notamment des éléments Google.
Différents types de galeries élaborées, tels que la galerie 360 (qui permet de visionner en boucle les éléments de la bibliothèque) ou la galerie carrousel (personnalisable pour adapter la rotation de la galerie aux besoins de l'internaute) améliorent la navigation.

Fonctionnalités

Les fonctions disponibles ne s'arrêtent pas là. La fonction Youtube permet d'intégrer une vidéo Youtube directement à l'annonce. La fonction vidéo offre non seulement la possibilité d'intégrer une vidéo dans l'annonce, mais aussi de contrôler son lancement (automatique ou non), sa répétition et les options de déclenchement du son.
Il est également possible de rendre une zone cliquable, simplement en la sélectionnant et en lui assignant une action.

La création de bannières publicitaires, précédemment disponible via l'outil de création d'annonces dynamiques d'Adwords, est assouplie avec Google Web Designer. Les formats IAB sont disponibles, mais les dimensions sont également personnalisables, ainsi que les types d'animations des bannières. Autre fonction supplémentaire, la possibilité de sélectionner la plateforme de diffusion des annonces (par exemple DoubleClick ou AdMob) pour que le choix des formats IAB soit adapté à ces plateformes.
La création de chaque bannière est guidée avec, en fin de processus, l'ajout d'un bouton d'incitation à l'action (sans oublier la zone cliquable que l'internaute doit lui associer).

La réalisation d'animations de complexité variable est également disponible et se fait via une timeline, sur laquelle l'internaute dépose les objets à intégrer à l'animation.
Un mode avancé permet de multiples actions, comme le verrouillage et la manipulation des objets.

Le mode timeline de Google Web Designer

Tel un Dreamweaver, Google Web Designer ouvre également un volet technique à son application : Google Web Designer's Code permet aux utilisateurs plus avertis d'intervenir directement sur le code afin de l'assainir ou de faire des ajouts. Les fonctionnalités de saisie semi-automatique et de coloration syntaxique (la coloration des éléments clés de la page pour mieux les distinguer) facilite les modifications et évite les erreurs pouvant bloquer le bon fonctionnement du contenu.

Google Web Designer se positionne directement comme le concurrent gratuit de Adobe Edge Animate, mettant en avant une interface plus facile à prendre en main et, bien sûr, une économie considérable pour l'utilisateur. Dans les deux cas, le code produit est généralement décrié par les développeurs, car moins « propre » que s'il était directement généré par un spécialiste.
Si l'outil Google reste à tester et à enrichir au fil du temps, la volonté de tenir tête à Adobe est clairement annoncée.

Aide sur Google Web Designer en vidéo

Démonstration :

L'interface utilisateur :

L'ajout de texte :

L'outil pinceau :

L'éditeur de CSS :

L'éditeur de timeline (partie 1)

L'éditeur de timeline (partie 2)