Google Web Designer

Logiciel de conception et de création de bannières publicitaires au format HTML5 / CSS3 / JS, intégrant une interface visuelle et un éditeur de code.

Google Web Designer en image :

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 de Google Web Designer

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.

Timeline de Google Web Designer

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'éditeur de timeline (partie 1)

L'éditeur de timeline (partie 2)

Autres ressources

Télécharger Google Web Designer : Google Web Designer - Home#download-webdesigner
La chaine officielle sur YouTube : https://www.youtube.com/user/GoogleWebDesigner
Le support dans l'aide en ligne : https://support.google.com/webdesigner/
Les forums de discussion sur les groupes Google : https://groups.google.com/forum/#!forum/gwdbeta

Donnez votre avis sur Google Web Designer

Note : 4.3 (3 votes)
Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

2 commentaires

Tess27

Bonjour, merci pour cet article très clair ;) Par contre, quid de la propriété intellectuelle ? Quand on télécharge le logiciel, il est dit, en anglais, dans les conditions d'utilisation "When you upload or otherwise submit content to our Services, you give Google (and those we work with) a worldwide license to use, host, store, reproduce, modify, create derivative works (such as those resulting from translations, adaptations or other changes we make so that your content works better with our Services), communicate, publish, publicly perform, publicly display and distribute such content." Ce qui signifie d'après moi que Google s'attribue les visuels que vous utilisez pour créer vos bannières !

brahma

C'est gratuit pour manger la concurrence puis ca deviendra payant ensuite quand plus personne n'utilisera les autres outils, comme google shopping?

Moi franchement depuis quelque temps google me sort par les yeux!