Créer une bannière pour affiliation

Voici quelques conseils pour créer et optimiser des bannières pour affiliés.


Qu’est-ce que l’affiliation ? Quels intervenants ? quels supports ?

L’Affiliation est un système permettant à un marchand de diffuser ses offres commerciales auprès d’une force de « vente » constituée de sites internet.

Elle comprend 3 principaux intervenants :

L’annonceur qui souhaite diffuser son offre.
La plateforme d’affiliation qui facilite l’échange entre les annonceurs/affiliés.
L’affilié qui permet à l’annonceur la diffusion de son offre.

Lors d’une campagne d’affiliation, l’annonceur, c’est à dire le marchand qui possède un site e-commerce, un site institutionnel, une association ou autre doit mettre à disposition à ses affiliés des supports web publicitaires telles que des bannières.

Pour cela l’annonceur peut faire appel à une agence web pour la création de ses supports graphiques ou directement au webmaster qui travaille au sein de sa société.

Les formats de création de bannières

Les bannières peuvent être de trois formats de création :

Bannière au format JPG

Dans ce cas, la bannière n’est pas animée, elle ne présente qu’un écran fixe.

Bannière au format GIF

C’est le format le plus répandu en terme d’animations de bannières, il permet pour un poids compris entre 10ko et 50ko de présenter trois ou quatre écrans différents.

Bannière au format FLASH

Le format SWF a supplanté le GIF en terme d’animations et surtout d’animations complexes bien que le gif reste plus populaire auprès des affiliés.

On dénombre plusieurs formats types pour les bannières, qui sont un peu les « must have » de tout programme :

468×60 (banniére classique / Poids : 35 Ko),120×600 (Le skyscraper vertical / Poids: 50 Ko),160×600 (Le skyscraper vertical large / Poids: 50 Ko),120×240,250×250 (Bannière carrée),300×250 (Le pavé / Poids: 50 Ko),750×80( mega bannière / Poids : 50 Ko),120×300,120×90.

Créer une bannière

Avant de créer une bannière, il est important de scénariser son discours pour fixer les différentes scènes et leurs relations, éviter au maximum les répétitions et ne pas perdre de vue le discours qu’on veut véhiculer.

Pensez à griffonner rapidement un storyboard, comme une bande dessinée, illustrant les différentes scènes de votre animation. Il est nécessaire que l’utilisateur comprenne dès la 1ère animation ce dont il est question.

Donc éviter les fioritures, allez droit au sujet et ne trainer pas trop sur les transitions (ex: une opacité sur le produit qui le rendrait invisible pendant quelques secondes !). Votre bannière n’en sera que plus attrayante. Surtout, éviter de perdre le message premier par une scénarisation trop complexe. L’animation dans son ensemble doit être prévue pour s’arrêter sur une image clé, permettant si celle-ci se stoppe de montrer l’offre mise en avant.

Si l’on est sur une démarque marketing de type -50% celui-ci doit être largement exposé et ne pas être mineur dans le paysage graphique de la bannière, c’est par ce pourcentage de remise que vous « allécherez » l’internaute.

Si vous présentez un produit, mettez le produit bien en évidence au premier plan et choisissez un fond pas trop chargé pour que l’internaute puisse se focaliser sur le produit. En général pour toute animation il faut éviter des effets qui agressent les yeux et se cantonner à une ou deux répétitions, pour ne pas alourdir la page qui hébergera cette animation.

Cela peut paraître un peu « bête », mais n’hésitez pas à y ajouter des boutons d’action « cliquez ici » ou « découvrez le produit » pour inciter davantage au clic… C’est un peu la norme « déclencheur » dans l’ensemble des campagnes sur le web.

Ci-dessus l’exemple d’une bannière animée comportant 3 scènes différentes que j’ai découpées ici en 3 images fixes. On comprend ici les messages de chaque panneau et de leur corrélation :

1-Le produit phare

2- La gamme complète pour les peaux déshydratées

3- Résultat/bénéfice = beauté, belle peau, beau visage

creer banniere affiliation

creation banniere web

creation banniere affilies web

La compression de votre bannière

En ce qui concerne la compression de l’animation, il faut là doser les paramètres d’exports pour que l’image en gif ne soit pas supérieure au poids accordé et avec une qualité d’image satisfaisante….

Evitez au maximum pour un gif animé de mettre plusieurs images différentes, concentrez-vous sur un visuel et le logo de la marque.

cp

Paramètre prédéfini :

Globalement il faut d’abord choisir un « paramètre prédéfini » dans le menu déroulant du haut, à droite.
Dans le menu déroulant apparaissent des exemples prédéfinis, il y a GIF 128, 64 ou 32 en tramé ou non tramé (et couleur web).

Le nombre correspond au nombre de couleurs de l’image (limité à 256) par exemple en choisissant « GIF tramé 64 » on décide de limiter le nombre de couleurs de l’image finale à 64 couleurs. Plus le nombre est important, plus le poids image le sera aussi.

Vous avez un aperçu des couleurs dans la partie droite, en bas (table des couleurs).

Le tramage correspond à une méthode de mélange entre les couleurs adjacentes, c’est à dire que lorsqu’on sélectionne un des paramètres prédéfinis « avec tramage », le menu à gauche « algorithme de tramage » se sélectionne automatiquement (il est par défaut sur Diffusion). Il va donc y avoir une diffusion entre les pixels adjacents, ce qui fusionne un peu les couleurs.
Sans tramage : la liaison entre les pixels sera « brute » donc pas de mélange entre les couleurs.

Comme l’ajout de tramage n’augmente que très peu le poids finale il est préférable de toujours choisir une image tramée (elle sera meilleure visuellement).

L’algorithme de tramage (il est par défaut sur Diffusion) convient dans la plupart des cas, néanmoins on peut tester Motif ou Bruit, dans quelques cas l’image est meilleure.

Paramètres facultatifs :

Perte, Tramage et Algorithme de réduction de couleur : à tester éventuellement mais cela influence peu (en général les choix par défaut sont suffisant).

L’entrelacement : il ne sert que pour l’affichage de l’image. Celle-ci s’affichera progressivement si entrelacée, dns le cas contraire (non entrelacée) elle s’affichera en une seule fois.
C’est pour les images de taille importante uniquement. Avec une image entrelacée on verra une partie de l’image apparaitre rapidement et le reste au fur et à mesure que l’image est chargée dans le navigateur (par défaut la case n’est pas cochée).

Aligné sur le web : ici on choisi de limiter les couleurs aux Couleurs web uniquement, il n’y en a que 216, ça sert à être certain que l’image sera vu par tous le monde avec les mêmes couleurs puisque les couleurs web sont normalisées et reconnues par tous les navigateurs.
Mais maintenant les navigateurs supportent toutes les couleurs (donc cette option est utilisée rarement).

Transparence : si vous avez une image avec de la Transparence, il y a un paramètre qui peut être important : le Détourage.

On peux choisir une couleur de détourage, c’est à dire que suivant la qualité de l’image on va voir apparaitre des pixels disgracieux autour de l’image, près des zones transparentes.
En choisissant une couleur de détourage (donc de préférence celle du fond de la page web ou sera affichée l’image, ou une couleur très proche), les pixels disgracieux prendront alors la couleur choisie dans « détourage », donc il ne se verront pas !

Attention à bien choisir cette image clé de fin d’animation, on devrait y retrouver le produit mis en valeur avec l’info principale et bien sûr le bouton d’action « j’en profite » ou « je découvre » qui incite au clic.

[button url= »http://www.lecil.fr/fr/category/webdesign/ » size= »medium » arrow= »left »]retour aux articles web design[/button] [button url= »http://www.lecil.fr/fr/webdesign/creer-une-newsletter » size= »medium » arrow= »right »]créer une newsletter[/button]