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?
website-design
images
background
design-principles
Zach Saucier
la source
la source
Réponses:
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
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.
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.
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.
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.
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.
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).
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.
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.
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é.
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.
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:
la source