Le Web tourne autour des images. L’avènement de l’ère mobile et la poussée incontrôlable des réseaux sociaux nous habituent progressivement à concentrer notre attention sur les visuels. Nous ne prenons plus le temps d’analyser les pages Web pour cliquer sur les textes susceptibles de nous plaire : nous faisons défiler nos écrans inlassablement et nous arrêtons sur les photos qui nous interpellent. Non, ce n’est pas une question de paresse. Simplement, nous cherchons à optimiser notre temps, et nos réflexes s’adaptent à ce nouvel environnement digital. Les chiffres parlent d’eux-mêmes : les internautes lisent aujourd’hui 15 mots par page sur les sites qu’ils visitent.

Afin de vous aider à séduire les surfeurs dès le premier regard, nous vous présentons 6 conseils pour améliorer l’impact de vos visuels. 15 mots et une image percutante, tel est le secret pour véhiculer votre message avec succès.

Note : tous les visuels exposés dans ce billet ont été modifiés avec l’éditeur Wix mais libre à vous d’utiliser des ressources externes. Le Template que nous avons personnalisé est celui-ci.

Flou : attisez la curiosité de vos visiteurs

Il faudrait être fou pour dégrader la qualité de ses images ? Pas forcément. Les images floues invitent à découvrir les images nettes. De plus, le fond brumeux fait la part belle aux mots qui deviennent les clés de l’énigme visuelle. Ajoutez une icône pour compenser le tout et votre visuel ne pourra que faire effet.

Comment procéder : dans l’éditeur, ajoutez une image et cliquez sur Editer Image. Dans l’outil d’édition d’images, faites glisser la barre de netteté à gauche. Vous pouvez également opérer de façon plus précise en utilisant l’option Fondu. Ajoutez votre texte et votre icône. Le tour est joué !

Polices utilisées : Coquette et Spinnaker

Texte encadré : orientez le regard

Si vous ne souhaitez pas heurter la qualité de votre photo, encadrer votre texte peut s’avérer représenter une excellente alternative. Cette astuce simple et efficace vous assurera que votre message porte ses fruits.

Comment procéder : dans l’éditeur, ajoutez une image et superposez votre texte. Ensuite, cliquez sur Ajouter, Formes et Lignes, Boîte. Dans les paramètres de la Boîte, sélectionnez Changer Style et décidez de la forme (avec bordure) qui vous convient. Modifiez la couleur de la bordure et choisissez sa largeur. Dans l’option Arrière-Plan faites glisser la barre d’opacité vers la gauche afin que votre boîte soit complètement transparente.

Polices utilisées : Coquette et Spinnaker

Forme partiellement transparente : trouvez la bonne mesure

L’inconvénient de l’astuce précédente est que le texte devient difficilement lisible quand sa couleur se confond avec les teintes de la photo. Afin de vous assurer que votre texte apparaisse sous son plus beau jour tout en restant dans des tons alignés avec votre design, utilisez une boîte partiellement transparente. Votre image n’en sera pas affectée et vous mettrez en valeur votre message avec beaucoup de charme.

Comment procéder : dans l’éditeur, ajoutez une image et superposez votre texte. Ensuite, cliquez sur

Ajouter, Formes et Lignes, Boîte ou Forme. Dans les paramètres de la Boîte ou de la Forme, sélectionnez Changer Style et décidez de la forme qui vous convient. Si votre forme présente une bordure, supprimez-la. Dans l’option Arrière-Plan, faites glisser la barre d’opacité vers la droite afin de déterminer le niveau de transparence optimal pour l’affichage de vos textes.

Polices utilisées : DIN Next Arabic et Snell Roundhand

Espace dédié : donnez la chance aux lettres

Les amateurs de design décalé apprécieront cette option. Le principe consiste simplement à utiliser une image avec un espace dédié au texte. L’avantage : vous n’avez rien à faire à part y ajouter vos phrases !

Comment procéder : si votre image est de bonne qualité, recadrez-la pour trouver l’angle idéal dans l’éditeur d’images. Vous pourrez ainsi mettre l’accent sur l’élément le plus séduisant de votre visuel et vous assurer que l’espace réservé au texte est suffisant.

Polices utilisées : Coquette et Frank Ruhl

Texte fluo & fond noir et blanc : optimisez le contraste

Les couleurs fluo et néon donnent de l’énergie à votre message. Le style Stabilo Boss n’est pas forcément criard. Sur un fond noir et blanc, votre texte apportera une touche énergique et votre design dans son ensemble s’en verra rajeuni. Une petite touche qui fait une grande différence.

Comment procéder : dans l’éditeur, ajoutez une image et cliquez sur Editer Image. Dans l’outil d’édition d’images, poussez la barre de saturation vers la gauche afin de dénuer la photo de ses couleurs d’origine ou sélectionnez un filtre en noir et blanc. Enfin, ajoutez votre texte. Notez qu’il vous faut accéder aux couleurs qui ne sont pas proposées par défaut dans la barre d’édition de texte en cliquant sur Plus de Couleurs.

Polices utilisées : Basic (Italique), Coquette et Signika

Effet camaïeu : votre texte prend du grade

Le principe est simple, il vous faut modifier votre visuel pour qu’il donne l’impression de n’être composé que de teintes d’une même couleur. Les images “monochromes” permettent de créer un contraste important avec le texte et d’en faire l’élément clé de votre design. Vous pouvez appliquer un filtre de couleur avec un outil en ligne comme Be Funky pour créer un effet similaire à celui obtenu sur l’image. Un rien minimaliste et très tendance, cette astuce est parfaite pour les mordus de simplicité.

Comment procéder : dans l’éditeur, ajoutez une image et cliquez sur Editer Image. Dans l’outil d’édition d’images, poussez la barre de saturation vers la gauche afin de dénuer la photo de ses couleurs d’origine. Ensuite, sélectionnez un filtre coloré pour donner à votre visuel la teinte idéale. Il ne vous reste plus qu’à superposer votre texte !

Polices utilisées pour le texte : Basic et Helvetica

Ecran divisé : misez tout sur le visuel

En séparant l’écran (ou du moins l’image) en deux parties symétriques, vous profitez d’une double opportunité pour exposer l’étendue de vos talents. Vous pouvez aussi dans ce cas ajouter du texte (sur une boîte opaque au milieu) comme sur ce modèle mais cela n’est pas forcément nécessaire. En utilisant une galerie Grid animée, vos images défileront en boucle et exprimeront votre message à votre place. Parfois, si la parole est d’argent, le silence est d’or.

Comment procéder : dans l’éditeur, cliquez sur Ajouter, Galerie, Grid Animée. Dans les paramètres, réduisez le nombre de rangées à 1 et le nombre de colonnes à 2. Personnalisez la transition et l’affichage.