Google Web Designer

Formations courtes
Tous niveaux
3 jours / 21 heures
Produire des bannières publicitaires animées et interactives en HTML5

Objectifs

Définir les caractéristiques d’une bannière HTML5
Créer des bannières animées

Enrichir une bannière avec des composants

Ajouter de l’interactivité
Publier des bannières et les diffuser

Pour qui ?

Graphistes, webdesigners, chefs de projet…

Prérequis

Il est nécessaire de savoir gérer les calques dans Photoshop pour suivre cette formation.

Programme

Programme de la formation

Définir les caractéristiques d’une bannière HTML5

  • Découvrir les différents formats des bannières : classiques, extensibles, interstitiels
  •  Évaluer les contraintes des régies publicitaires : formats et poids des bannières
  •  Acquérir un vocabulaire technique pour se repérer dans l’interface
  •  Concevoir une page ou une annonce adaptée à plusieurs tailles d’écran
  •  Utiliser un modèle existant
  •  Créer un modèle personnalisé


?? Exercice : préparer un gabarit d’animation

Créer des bannières animées

  • Structurer son fichier pour gagner du temps en production
  •  Préparer et optimiser les médias
  •  Créer une animation en mode rapide
  •  Affiner l’animation en mode avancé
  •  Maîtriser les propriétés d’éléments : translation, rotation, échelle, opacité
  •  Ajouter et formater un texte
  •  Définir une police Google Fonts
  •  Enregistrer et personnaliser les échantillons de couleurs
  •  Paramétrer les dégradés
  •  Améliorer la fluidité par des courbes d’accélérations personnalisables
  •  Manipuler les outils 3D
  •  Modifier et appliquer un style CSS
  •  Créer une animation imbriquée
  •  Modifier rapidement le rythme d’une animation
  •  Tester la bannière dans un environnement Web


?? Exercice : réaliser progressivement une série de bannières classiques

 

Enrichir une bannière avec des composants


• Créer un tag pour mieux se repérer dans le code
• Ajouter un composant vidéo
• Paramétrer une vidéo adaptée aux navigateurs pour mobile
• Ajouter un composant audio
• Ajouter une galerie d’images
• Utiliser les API externes : YouTube, Google Maps…


?? Exercice : réaliser des bannières extensibles et “ interstitielles ” intégrant des composants


Ajouter de l’interactivité

  •  Créer des zones cliquables
  •  Ajouter des événements de souris et tactiles
  •  Contrôler une animation séquentielle avec des actions prédéfinies
  •  Personnaliser les actions
  •  Affecter un lien URL
  •  Ajouter la variable clickTAG
  •  Gérer le nombre de boucles


?? Exercice : créer de l’interactivité sur différentes  bannières


Publier des bannières et les diffuser

  • Adapter l’affichage et l’orientation pour mobiles et tablettes
  •  Publier en local, via Google Drive et DoubleClick Studio
  •  Modifier le code dans la vue Code
  •  Modifier l’environnement publicitaire selon les contraintes des régies
  •  Importer des données dynamiques pour optimiser le poids du fichier
  •  Assembler les fichiers pour la livraison


?? Exercice : publier, diffuser et livrer les bannières selon les contraintes des régies publicitaires

S'inscrire en ligne

Google Web Designer
Ref
WM13418
Tarif
1550€ HT

Prochaines sessions

Le choix de la session vous sera demandé lors de votre inscription.