Spécificités graphiques dans Qualifio

Gilles Van Eylen -

Exemple 1 : Banner + footer + couleur de fond

C'est le cas que nous recommandons: le plus efficace et valable sur tous les supports.

layout01.jpg

Télécharger cet exemple (.psd) 

 


 

Exemple 2 : Image de fond + Banner + footer + couleur de fond

Plus technique que le premier cas : votre image de fond ne s'affichera QUE lorsque votre campagne aura la même largeur que celle que vous indiquerez dans le manager. Typiquement : lorsqu'elle sera vue depuis un ordinateur.  Par contre, sur mobile, votre image de fond sera masquée et il faudra donc prévoir en plus une banner et une couleur de fond. Pour plus d'information, cliquez ici

layout02.jpg

Télécharger cet exemple (.psd) 

 


 

Quelle taille pour votre image de fond ?

Si votre campagne est un widget

Pour la largeur : Il est nécessaire de connaitre la largeur de la zone dans laquelle la campagne sera placée.
Cette zone peut être dans une page ou même dans un article. Votre webmaster ou webdesigner sera en mesure de vous donner précisément cette valeur.
Si votre article fait 600px de large, donnez une largeur de 600px à votre campagne, et préparez une image de fond de 600px de large également. 

Pour la hauteur : tout dépendra de votre contenu. Il est nécessaire d'avoir une idée du contenu de votre campagne, du contenu de vos questions et de votre formulaire.
Dans la plupart des cas, une hauteur de 1200px suffira largement et vous donnera assez de flexibilité pour les étapes les plus longues.
L'idéal serait de compléter entièrement une campagne avec son contenu, en pensant à vos indices 'image' et/ou vidéo s'il y en a, et de la tester de bout en bout pour se rendre compte si une étape est vraiment longue. Tout dépendra aussi si vous décidez d'afficher toutes les questions sur une seule page ou de laisser 1 question par page.
Si vous constatez qu'une étape déborde de votre image de fond, il sera nécessaire d'augmenter la hauteur de votre image de fond en conséquence.

Une erreur commune : si votre campagne est placée dans votre page mais que l'image de fond ne s'affiche pas, cela veut simplement dire que la campagne est plus large que la zone de votre page.
Assurez-vous que la largeur de la campagne indiquée dans le manager correspond bien à la largeur de la zone dans votre page et vérifiez ensuite que le code d'intégration de la campagne est à jour. Si vous intégrez votre campagne trop tot dans votre page et que vous modifiez ensuite sa taille dans le manager (hauteur, largeur), il sera nécessaire de remettre le code d'intégration à jour. En effet, celui-ci contient les valeurs de taille de votre campagne et ces dernières ne se mettent pas automatiquement à jour.

Si votre campagne est un minisite

Pour la largeur : Si le minisite sera créé spécialement pour votre opération et que vous êtes assez "libres", n'hésitez pas à être généreux et à occuper un maximum la largeur de l'écran. Il serait dommage d'avoir une campagne minuscule de 800px de large au milieu de l'écran avec un vide conséquent de part et d'autre.
Si vous êtes en charge de créer le minisite ou si un graphiste s'en charge pour vous, vous pouvez prévoir une largeur de campagne de 1000px voir 1100px.

Si le minisite n'a pas été créé depuis notre éditeur de minisite et que ce dernier est hébergé en interne chez vous, votre webmaster ou webdesigner sera en mesure de vous indiquer la largeur prévue dans le minisite pour afficher la campagne.

Pour la hauteur : il faut appliquer la même procédure qu'expliquée pour l'image de fond d'un widget : 
Il est nécessaire d'avoir une idée du contenu de votre campagne, du contenu de vos questions et de votre formulaire. Si vous n'avez pas la possibilité de tester votre campagne avec l'entièreté de son contenu (questions, formulaire, ...), prévoyez alors une image de fond suffisamment grande (1200px de haut) pour ne pas avoir de surprise sur les étapes les plus longues de votre campagne. Il sera peut-être nécessaire d'ajuster la hauteur de votre image de fond si jamais une étape venait à déborder de celle-ci.

Si votre campagne est un canal Facebook

Largeur: 810px

Hauteur: 1200px (à ajuster si une étape déborde)

Quelle taille pour votre banner et/ou votre footer?

Si votre campagne est un widget

Pour la largeur : Comme pour l'image de fond, il est nécessaire de se tourner vers votre webmaster/webdesigner afin de connaître la largeur de la zone dans laquelle sera affichée votre campagne.
Si votre article fait 600px de large, votre campagne devra faire 600px de large ainsi que votre banner.

Pour la hauteur : Contrairement à l'image de fond qui vient recouvrir le fond de la campagne, la banner, elle, s'affiche tout au dessus de votre campagne et plus celle-ci sera haute, plus votre contenu sera bas et cela demandera à vos participants de scroller pour le voir. En particulier sur mobile. Vous êtes totalement libre sur la hauteur, rien ne vous empêche de préparer un visuel de 600px de haut mais si vous en avez la possibilité, limitez-vous à 250/300px de haut.

Si votre campagne est un minisite

Pour la largeur : Suivez le même principe que pour l'image de fond d'un minisite, cela nécessite de connaitre la largeur de la zone dans laquelle la campagne apparaitra. Passez par l'éditeur de minisite de Qualifio si votre minisite a été fait via Qualifio (éditez le minisite et allez dans l'accordéon "Zone de la campagne") ou si votre minisite a été fait en dehors (et est donc hébergé chez vous), adressez-vous à votre webmaster/webdesigner.

Pour la hauteur : Contrairement à l'image de fond qui vient recouvrir le fond de la campagne, la banner, elle, s'affiche tout au dessus de votre campagne et plus celle-ci sera haute, plus votre contenu sera bas et cela demandera à vos participants de scroller pour le voir. En particulier sur mobile. Vous êtes totalement libre sur la hauteur, rien ne vous empêche de préparer un visuel de 600px de haut mais si vous en avez la possibilité, limitez-vous à 250/300px de haut.

Si votre campagne est un canal Facebook

Largeur : 810px

Hauteur : 250 à 300px (hauteur max conseillée, mais vous êtes libre)

Quelques conseils pour votre banner

Certains préfèrent que la bannière tranche totalement avec le contenu de la campagne, tandis que d'autres préfèrent au contraire donner une impression de continuité avec le reste de la campagne.
Voici 3 manières originales de travailler pour améliorer la continuité de votre visuel :

Dans le premier exemple, la banner ne contient qu'un élément sur fond totalement transparent (une banner en .png donc) et le fond que vous voyez derrière la banner n'est rien d'autre que la couleur de fond de la campagne.

Dans le second exemple, le bas de la banner est un léger dégradé dans la même couleur que la couleur de fond de la campagne (blanc intense dans ce cas-ci)

Dans le troisième exemple, la banner contient une 'zone' de la même couleur que la couleur de fond de la campagne (rose clair ici) qui est placée en bas et derrière les lots.
Une fois que la banner est ajoutée dans la campagne, les lots donnent l'impression d'être placés sur la zone de jeu, et ce, sans avoir utilisé une seule ligne de code. Pratique pour donner un peu de relief à votre campagne et faire ressortir vos lots

faq-banners-fr.jpg

 

Réalisé par Zendesk