Comment choisir une bonne photo de couverture pour mon site Web?


22

Il est à la mode d'avoir de grandes images d'arrière-plan avec relativement peu de texte sur les en-têtes et les introductions aux pages Web, y compris le début des articles de blog. Je pourrais en donner d'innombrables exemples, mais je pense que vous savez exactement de quoi je parle.

Qu'est-ce qui fait une photo de couverture / arrière-plan efficace? Que dois-je garder à l'esprit lorsque je recherche des images ou que je prévois d'en prendre et d'en éditer pour mon site?


1
Il est maintenant à la mode d'avoir de grandes vidéos de fond.
user11153

1
Bien joué, l'une des meilleures questions auto-répondues sur le site (je ne me souviens pas d'autres, donc peut - être la meilleure). :)
Dom

Réponses:


30

Avez-vous vraiment besoin de suivre la tendance?

Ne faites jamais quelque chose parce que c'est une tendance. Faites les choses parce qu'elles sont bonnes pour l'expérience de l'utilisateur, car c'est ce qui convient le mieux à votre entreprise et à votre conception. Réfléchissez bien aux implications de l'ajout d'une grande image à votre site et pesez les autres options dont vous disposez. Vous n'avez pas besoin d'utiliser cette technique pour avoir un site Web "moderne" .

Cela étant dit, il y a beaucoup de choses à garder à l'esprit lors du choix d'une image de fond pour votre site Web. Puisque cette réponse est si longue, voici la liste en bref; Je donne plus de détails sur chacun, y compris des exemples ci-dessous.

  • Assurez-vous que l'image est liée au contenu
  • Assurez-vous que l'image indique ce que vous voulez
  • Assurez-vous que l'image est relativement unique
  • Utilisez une image de choses réelles
  • Assurez-vous que l'image fonctionne avec votre mise en page
  • Assurez-vous que l'image respecte les bonnes règles de photographie et de conception
  • Assurez-vous que l'image suit votre jeu de couleurs
  • Limitez la variance au sein de l'image
  • Assurez-vous que la taille de l'image est suffisamment grande
  • Assurez-vous que vous disposez des droits d'utilisation de l'image
  • Assurez-vous que la qualité de la photo est élevée

Assurez-vous que l'image est liée au contenu

Une photo sans rapport ne fera que du mal. Tout comme n'importe quoi dans votre conception, si cela ne correspond pas directement à l'objectif de votre site Web, débarrassez-vous-en. Assurez-vous qu'il est directement lié au contenu qui l'entoure , pas quelque chose plus tard. L'image doit avoir un contexte supplémentaire apporté par du texte ou une mise en page afin d'aider les utilisateurs à comprendre qu'il s'agit d'un site et pas seulement d'une image statique.

entrez la description de l'image ici


Assurez-vous que l'image indique ce que vous voulez

Toutes les images ont une connotation basée sur le contenu de l'image et son style. Assurez-vous que l'image correspond au sentiment que vous espérez transmettre ainsi qu'à la marque. L'image doit transmettre une compréhension supplémentaire au-delà de ce que le texte qui l'entoure fournit. Assurez-vous également que cela aide à construire votre marque de la manière dont vous voulez qu'elle soit construite.

entrez la description de l'image ici

Il va sans dire que l'image doit être visuellement attrayante. Plus de détails sur les traits pour que l'image soit attrayante sont ci-dessous.


Assurez-vous que l'image est relativement unique

Les images personnalisées sont meilleures que celles d'origine, à condition que la qualité soit au moins la même. Cela signifie que vous devez éviter les images d'archives très connues tant que l'alternative est tout aussi de haute qualité et appropriée. Cependant, être absolument unique n'est pas aussi important que d'avoir une bonne image appropriée.

entrez la description de l'image ici


Utilisez une image de choses réelles

Il y a quelque chose dans une image réelle (même une version hautement éditée) qui a une grande influence sur nous en tant qu'humains. Nous aimons voir de vraies choses. Dans la mesure du possible, optez pour une image réelle plutôt que quelque chose généré par ordinateur, sauf si elle ne correspond pas du tout au contenu ou au style que vous recherchez.

entrez la description de l'image ici

Montrer des personnes a un effet encore plus grand, qui peut être à la fois bon et mauvais. Si cela est fait correctement, cela peut faire sentir aux utilisateurs que l'expérience est plus réelle et personnelle. Si mal fait, il peut le faire paraître im personnelle et pas cher. Plus à ce sujet ici .

Les visages en particulier attirent l'attention, alors assurez-vous qu'ils sont appropriés et ne les placez que là où cela compte vraiment. Parfois, les placer dans d'autres contextes tels qu'un livre, un iPad, un ordinateur, etc. peut aider. D'autres fois, il est plus approprié de recadrer les visages (pensez à un site Web de vêtements ou à un mannequin). Montrer le visage d'une marque / d'un porte-parole est très efficace s'il est bien fait, je le recommande fortement si vous le pouvez.

entrez la description de l'image ici


Assurez-vous que l'image fonctionne avec votre mise en page

Votre flux d'utilisateurs et la disposition du site sont plus importants que n'importe quelle image que vous pouvez choisir. Créez-les d'abord. Si cette meilleure mise en page et flux a un peu d'espace ouvert en haut, envisagez d'ajouter une image.

Assurez-vous qu'aucune partie importante de l'image n'est couverte par le contenu que vous avez. Utilisez des directives visuelles pour aider les utilisateurs à accéder au contenu que vous souhaitez qu'ils voient (plus d'informations à ce sujet dans la section suivante).

entrez la description de l'image ici


Assurez-vous que l'image respecte les bonnes règles de photographie et de conception

Les images doivent suivre les règles fondamentales de la photographie, y compris la règle des tiers , en utilisant des lignes visuelles, en se concentrant bien sur le contenu principal, en cadrant correctement le sujet, en ayant un bon arrière-plan et en ayant entre autres une symétrie et des motifs. Pour en savoir plus, consultez ici ou recherchez plus de ressources en ligne.

Ces principes donneront plus de sens à l'image en aidant à attirer l'attention sur les parties importantes de l'image et son contexte environnant.

bonnes règles d'image


Assurez-vous que l'image suit votre jeu de couleurs

Tous les sites Web doivent avoir une sensation unifiée, y compris un schéma de couleurs. Que vous choisissiez d'abord le jeu de couleurs, puis choisissez ensuite l'image ou choisissez l'image et ensuite le jeu de couleurs (des outils comme celui-ci peuvent vous aider avec ce dernier), assurez-vous que les couleurs de l'image vous conviennent. Parfois, laver une image puis appliquer un filtre de couleur peut bien fonctionner.

descr


Limitez la variance au sein de l'image

Ne faites pas une apparence visuelle occupée. Avoir un tas de couleurs et d'objets dans l'image, il est difficile de mettre du texte dessus et de l'adapter à la mise en page. Comme indiqué précédemment, créez d'abord le contenu, puis choisissez l'image.

L'ajout de superpositions partiellement transparentes, l'assombrissement d'une image ou sa suppression en noir et blanc avant d'ajouter un filtre de couleur peut aider à réduire le bruit inutile. De plus, les couleurs d'arrière-plan peuvent être appliquées derrière le texte ou sur un élément pour améliorer la lisibilité.

entrez la description de l'image ici

L'image ci-dessus assombrit l'image d'origine et utilise des ombres sur les bords pour réduire le bruit. L'image ci-dessous semble utiliser une superposition sombre partiellement transparente pour faire la même chose.

entrez la description de l'image ici


Assurez-vous que la taille de l'image est suffisamment grande

Il va sans dire que l'image utilisée doit être suffisamment grande pour couvrir chaque écran sans s'étirer. Cela signifie que pour les écrans en taille réelle, nous devons avoir des images avec une résolution minimale de 1024 x 768 pixels, mais il est préférable de viser au moins 1200 pixels de large. Nous pouvons également économiser le chargement de grandes images pour des écrans plus petits en servant différentes tailles d'images en fonction de la résolution, plus à ce sujet ici . Essayez d'optimiser le temps de chargement de l'image, si possible, sans concéder la qualité de l'image.


Assurez-vous que vous disposez des droits d'utilisation de l'image

Si vous n'êtes pas autorisé à l'utiliser, ne l'utilisez pas . Si vous ne savez pas quel est le droit d'auteur de l'image , recherchez-le, mais ne l'utilisez pas avant de le savoir! La dernière chose que vous voulez faire est d'être poursuivi pour contrefaçon.


Assurez-vous que la qualité de la photo est élevée

N'utilisez pas d'images granuleuses ou floues. N'utilisez pas une photo dont le contenu est douteux ou sans rapport. Restez simple mais (surtout) réel. Réfléchissez bien aux parties bonnes et mauvaises de chaque image que vous considérez et n'acceptez pas quelque chose de médiocre.

Ressources supplémentaires:


4
Bonne réponse. J'aurais probablement été trop succinct: "Assurez-vous que c'est une bonne photo et qu'elle correspond aux besoins et aux objectifs de votre site" :)
DA01

@ DA01 Bien que je sois entièrement d'accord avec cette affirmation, certaines personnes ont besoin d'un peu plus d'aide :)
Zach Saucier
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.