Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

Comment créer une bannière pour son site web ?

Les bannières web font aujourd’hui partie intégrante de la stratégie webmarketing des entreprises. Sur un site internet, ces bannières offrent même un espace promotionnel...

Publié par Solenne Ricard

Les bannières web font aujourd’hui partie intégrante de la stratégie webmarketing des entreprises. Sur un site internet, ces bannières offrent même un espace promotionnel essentiel. À tel point qu’elles font l’objet de toutes les attentions du webdesigner. Voici comment créer une bannière percutante pour son site.

 

Une bannière, qu’est-ce que c’est ?

Ce que l’on appelle bannière, ou bandeau, sur le web équivaut à un encart publicitaire. Cette bannière remplie donc les mêmes fonctions qu’un panneau d’affichage publicitaire physique.

Avec le temps, le terme de bannière s’est généralisé à la partie haute des sites web. Il s’agit donc du tout premier élément visuel que voit le visiteur en arrivant sur le site.

Celui-ci se compose le plus souvent d’une image de fond, d’un logo et d’une baseline (slogan ou texte).

Choisir les dimensions d’une bannière

Une bannière ne se limite toutefois pas obligatoirement à la seule en-tête du site. En fonction de son emplacement, vous n’utiliserez donc pas les mêmes formats.

creer_banniere_site_web

Par exemple :

  • les bannières de 300 × 250 px et 336 × 280 px sont idéales à l’intérieur ou à la fin d’une publication ;
  • les bannières de 728 × 90 px s’installent dans la partie supérieure de la page ;
  • les bannières en 300 × 600 px sont utilisées pour les annonces concentrées sur les visuels plutôt que le texte ;
  • les bannières en 320 × 100 px s’adaptent idéalement à la version mobile du site web.
Attention
Quelles que soient ses dimensions, veillez à ce que votre bannière ne soit pas trop lourde, au risque d’augmenter le temps de chargement de votre site. Dans l’idéal, réduisez son poids à 50 ko, sinon, ne dépassez jamais 150 Kb. Si votre bannière est statique, privilégiez les formats JPG et PNG. Quant aux bannières animées, enregistrez-les au format GIF.

 

Choisir le graphisme d’une bannière

Avant tout, la ligne graphique de votre bannière doit s’harmoniser avec le design de votre site. On évite par exemple d’associer une bannière style rétro avec un site minimaliste contemporain.

De même, votre bannière doit à la fois correspondre à votre entreprise tout en s’adaptant à votre cible (sans tomber dans les clichés). Gardez en tête que les bannières génériques génèrent moins de clics que les bannières ciblées (destinées à une catégorie précise de clients).

 

Choisir la typographie d’une bannière

La typographie a un réel impact sur la perception que votre public a de votre bannière. La police de caractères peut même renforcer à elle seule le sens de votre texte.

creer_banniere_site_web

Design de photographeeasia – Freepik

Sachez qu’il vaut mieux éviter d’utiliser un trop grand nombre de polices au risque de rendre l’ensemble moins lisible. Il serait dommage que vos visiteurs passent à côté du sens de vos mots, déroutés par un mélange de polices trop important. Dans l’idéal, sélectionnez une seule police «  Spéciale » ou « Fantaisie » et associez-la à une police classique.

En ce qui concerne l’appel à l’action, veillez à ce qu’il se démarque bien dans votre bannière grâce à une typographie claire, et même percutante. Le CTA est souvent le cœur et l’âme de votre bannière, celui qui encourage le visiteur à cliquer sur la bannière.

 

Choisir les couleurs d’une bannière

creer_banniere_site_web

En fonction de l’effet recherché, vous n’utiliserez pas les mêmes couleurs pour votre bannière de site :

  • Optez pour des couleurs vives si vous souhaitez un rendu dynamique qui attire le regard et fait ressortir les éléments (à utiliser avec parcimonie).
  • Préférez les couleurs pastel pour un effet relaxant (ces teintes sont d’ailleurs très tendances depuis quelques années).

Veillez également à harmoniser les couleurs de votre bannière avec le style global de votre site web afin d’éviter les contrastes dissonants. De même, n’hésitez pas à utiliser des coloris qui se rapportent clairement à votre secteur d’activité, comme du bleu pour un site de voyage, du vert pour un site de vente de produits bio, etc.

Dans l’idéal, limitez votre palette chromatique à 2 ou 3 couleurs (4 au grand maximum).

Choisir les éléments du décor d’une bannière

creer_banniere_site_web

Freepik

Généralement, les bannières intègrent des éléments de décor comme des images, des dessins, des icônes… afin de les rendre plus attractives. Des éléments qui rappellent encore une fois ceux contenus dans votre site.

Attention
Attention toutefois de ne pas en abuser au risque de surcharger votre bannière, ce qui en réduirait alors la lisibilité et donc la compréhension par le visiteur.

 

Conclusion

Forts de ces quelques conseils, vous êtes parés à composer votre bannière de site web. Gardez ici en tête qu’une bannière web offre peu de surface pour s’exprimer. Impossible donc d’y insérer beaucoup de textes. Réduisez celui-ci au strict minimum afin de mettre l’accent sur les éléments graphiques. En effet, ce sont eux qui attireront le visiteur vers votre conception.

Vous êtes à la recherche d’un webdesigner pour créer les bannières de votre site internet ? Faites donc un petit tour sur le site Graphiste.com !

5
/
5
(
1

vote

)
Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

4 bonnes pratiques pour transmettre un logo

Votre client vient de valider le logo que vous avez créé pour lui et c’est une excellente nouvelle  ! Toutefois, votre travail n’est pas tout...

Publié le par Jerome Dajoux
Graphisme

Créer des images pour votre blog : 10 conseils

Vous cherchez à dynamiser le blog de votre entreprise ? Vous êtes blogueur / blogueuse et vous êtes toujours à court d’image pour votre blog ? C’est une problématique...

Publié le par Laura