Conseils pour vous aider à mélanger correctement du texte avec des images

L'utilisation de texte au-dessus des images d'arrière-plan est populaire depuis des années. Bien avant la conception Web, le texte d'une image peut offrir une expérience plus riche en émotions et riche en contexte. Avant aujourd'hui, les images devaient être beaucoup plus petites pour permettre une bande passante beaucoup plus lente. Alors que les vitesses de connexion et les densités d'écran augmentent rapidement, nous sommes prêts à utiliser des images beaucoup plus grandes dans nos conceptions..

Les décisions de conception liées à cette technique sont extrêmement importantes à prendre en compte et il est impératif de développer les meilleures pratiques pour régir cette pratique afin de conserver une conception de haute qualité. On ne peut pas simplement placer du texte sur une image et s'attendre à ce qu'il soit correct.

Dans cet article, nous aborderons cinq aspects différents du placement de texte sur des images qui vous aideront à mélanger correctement les copies et les images..

Remarque: tout au long de l’article, les mêmes principes s’appliquent lors du choix des combinaisons vidéo et texte.

1. Contraste par la couleur et la luminosité

Il est impératif d’utiliser des images qui présentent un contraste significatif avec le texte. En particulier, utiliser des images plus sombres avec un texte plus clair ou assombrir les images avec des filtres ou un élément de surimpression peut s'avérer un moyen efficace de garantir l'utilisation d'un contraste suffisant..

Quelques conseils pour obtenir un bon contraste de couleur et de luminosité:

Si vous ne pouvez pas voir immédiatement les lettres, votre contraste est désactivé.
Contraste ne signifie pas toujours l'obscurité par rapport à la lumière; les couleurs complémentaires offrent également un contraste naturel.
Si l'image est complexe et parfaitement nette, utiliser l'option de superposition ou de modification de l'image sera probablement l'option la plus efficace..

Dans cet exemple, nous utilisons des filtres WebKit pour manipuler le contraste et la luminosité d'une image, que nous plaçons et manipulons à l'aide d'un extra

. Le filtre, non préfixé, se présente comme suit: filtre: luminosité (40%) contraste (70%);

Difficile à lire; pas de point focal sur le texte ou dans l'image

Beaucoup plus facile à lire; nécessite des filtres CSS

Découvrez la démo.

Plus d'exemples

https://ayr.com/

https://www.geckoboard.com/

http://anodpixels.com/

https://obakkifoundation.org/

2. Contraste par le dimensionnement et le positionnement

La couleur n'est pas le seul moyen d'améliorer le contraste d'une image par rapport au texte superposé. Le choix de la taille et de la position du texte par rapport aux éléments focalisés de l’image est essentiel car il est lié à la lisibilité du texte lui-même..

Dans cet exemple, nous avons choisi une image avec une grande surface du ciel relativement homogène. C'est un endroit parfait pour placer du texte. En revanche, un positionnement du texte beaucoup moins lisible serait directement au centre de l'image, là où l'horizon apparaît.

Mauvais exemple; Mauvais contraste, mauvais placement.

Bon contraste, meilleur placement.

Découvrez la démo.

Autres exemples

http://www.themostnorthernplace.com/

http://eup.volkswagen.no/

http://www.dtelepathy.com/

3. Lisibilité en profondeur

Choisissez une image utilisant la profondeur de champ. Cela permettra un fond plus lisse pour le texte, ce qui augmentera la lisibilité. Placez votre texte sur la partie floue de l'image et assurez-vous que la couleur du texte contraste de manière adéquate avec la couleur principale de la zone floue..

Nous pouvons le faire facilement en plaçant le texte dans des zones moins nettes, comme dans cet exemple..

Découvrez la démo.

Autres exemples

http://une.ch/creation/home

http://www.gloriasrestaurants.com/

http://www.atelier-serge-thoraval.com/en/

http://purplerockscissors.com/

4. Choix du sujet de l'image

Le texte sur les images est aussi efficace que la réunion déduite de la combinaison. Par exemple, ne choisissez pas d'imagerie générique si des images plus spécifiques communiquent de manière plus adéquate. Lors du choix des images, tenez compte de l'évocation émotionnelle et du contexte littéral de l'image, en particulier en ce qui concerne le ton du message que la copie est censée transmettre..

Quelques conseils:

Choisissez des images qui montrent une phrase complète; l'utilisateur doit voir clairement le sujet de l'image et comprendre l'action éventuellement entreprise dans l'image, le cas échéant.
Ne choisissez pas les images qui ont un point faible.
Gardez à l'esprit l'importance de la clarté de l'image. Si l'image sert plus ou moins à évoquer la sensation et moins aux détails, vous pouvez appliquer des superpositions ou des filtres épais sans perdre l'efficacité de l'image..

Exemples

http://blood-and-water.animalplanet.com/

http://pixelgrade.com/demos/rosa/

http://formula1data.com/

5. Sensibilisation à trois dimensions

Pensez à l'endroit où le texte apparaît par rapport au niveau de mise au point des différents éléments de l'image. Le texte semble-t-il s'asseoir dans l'image ou est-il au premier plan? Le texte est-il intégré ou conserve-t-il sa propre position dans l'espace z? Quel est le rapport entre le texte et les éléments focalisés de l’image, plus particulièrement?

Une règle de base: plus le texte est petit, plus le texte semble apparaître dans l'espace z.

Dans cet exemple, nous utilisons un texte au premier plan qui semble être beaucoup plus proche de nous que les arbustes à l'arrière-plan. Malgré le haut niveau de détail de l'arrière-plan, nos yeux identifient naturellement les lignes plus longues et les formes plus larges du texte, interprétant le texte beaucoup plus facilement que le mauvais exemple. Dans le mauvais exemple, les formes des caractères semblent placer le texte à peu près à la même position z que les feuilles en arrière-plan.

Découvrez la démo.

Plus d'exemples

http://danielladraper.com/

http://www.lobagola.com/

http://vivaco.com/demo/ventcamp/index-photo.html

Arrive bientôt

Eh bien, cela termine notre discussion sur l'esthétique. Dans le prochain article, nous aborderons différentes manières de combiner ces techniques avec des interactions et des animations en survol..

Création de sites web

Conseils pour accélérer votre flux de traitement d'images dans Lightroom

Conseils pour personnaliser et optimiser le flux de votre blog