Quand la créativité ne suffit pas, quelles sont les "règles" à suivre pour faire en sorte que son site web soit beau et harmonieux en terme de "webdesign" ?
Lorsqu’un visiteur arrive sur un site internet, la première chose qu’il analyse est le design du site. Sans même forcément s’en rendre compte, il aura décidé si le graphisme du site lui plaît avant même d’avoir commencé à lire le contenu textuel. Pour éviter la fuite du visiteur et avoir un taux de rebond le plus faible possible, il est impératif pour vous d’avoir un design réussi. Nous allons voir, à travers cet article, comment avoir un site visuellement efficace, qui est agréable et qui donne envie aux visiteurs d’y rester.
Limitez-vous dans les couleurs utilisées
Les couleurs sont un élément essentiel dans le visuel d’un site. Cependant, il faut savoir se restreindre et faire une sélection. En effet, il est très important de ne pas multiplier les couleurs utilisées.
La formule magique ? Utiliser 3 couleurs et suivre la règle du 60/30/10 :
- Il y en a une principale qui est la couleur dominante de votre marque ou entreprise
- Une secondaire qui doit pouvoir mettre en avant certains éléments
- Enfin une complémentaire à la principale.
Elles couvriront respectivement 60 %, 30 % et 10 % de votre site.
Mon conseil :
Utilisez les couleurs de la marque déjà existante pour rappeler votre identité visuelle. S’il n’y en a qu’une existante, vous avez la possibilité de la décliner dans des tons sobres qui permettrait au contenu de votre site d’être visible. Il existe également Adobe Color CC et ColourCo qui vous permettront de trouver des couleurs complémentaires en vous proposant des palettes variées.
Ce qu’il ne faut pas faire :
– Avoir des couleurs qui ne s’harmonisent pas, ce qui nuirait au dynamisme du site. Il faut absolument avoir des couleurs qui se complètent !
– Négliger la lisibilité au profit de la créativité. Ne l’oubliez pas, ce qui est le plus important est toujours la lisibilité !
– Avoir trop de couleurs, au risque de faire ressembler votre site à un arc-en-ciel, ce qui était d’ailleurs très à la mode dans les années 90… 😀
Utilisez les significations de couleurs
Chaque couleur a une certaine portée symbolique et véhicule un sentiment ou une émotion. Il est donc important que vous preniez cela en compte lorsque vous choisissez les couleurs pour votre site internet. Par exemple, le vert évoque la nature, le bleu véhicule du calme ou encore le rouge représente la passion. Plus généralement, les couleurs vives véhiculent du dynamisme alors que les couleurs pastel apportent de la douceur.
Mon conseil :
Faites une recherche au préalable pour savoir quelles sont les associations entre les couleurs et les émotions afin de choisir celles qui seront en adéquation avec ce que vous voulez véhiculer. Prenez en compte que les tons des couleurs participent également à ce qu’elles vont véhiculer, suivant si le ton sera clair ou foncé.
Ce qu’il ne faut pas faire :
– Penser que notre perception de ce que véhicule telle ou telle couleur est universelle : il faut faire des recherches sur ce qu’elle signifie pour le plus grand nombre.
– Ne pas prendre en compte le fait que la représentation de chaque couleur peut varier selon les pays ou les cultures. Si votre site cible l’international, il faut tout de même garder cela dans le coin de sa tête.
Choisissez les bonnes polices
Tout comme les couleurs, les polices d’écriture véhiculent elles aussi un message. Il faut donc prendre cela en compte dans son choix de typographie. Bien logiquement, il ne faut pas que le message visuel véhiculé par les polices utilisées soit contraire à celui des couleurs ! Pour le corps du texte, la meilleure possibilité est d’utiliser une police sans serif comme c’est le cas ici. Les polices choisies doivent être à la fois fonctionnelles et modernes.
Mon conseil :
Si vous ne savez pas vraiment où chercher pour trouver la typographie idéale, il existe des sites pour cela ! Alors n’hésitez pas à vous rendre sur DaFont ou Google Fonts qui regorgent de polices d’écriture. D’ailleurs, ce dernier propose une catégorie “Display” qui peut donner de bonnes idées de typographies pour les titres.
Ce qu’il ne faut pas faire :
– Avoir plus de 3 polices différentes sur votre site, le mieux étant de se limiter à 2 polices : une pour les titres et une pour le corps du contenu.
– Selon votre secteur d’actIvité : utiliser des typographies trop fantaisistes, on pourrait ne pas vous prendre au sérieux à cause de cela et puis entre nous, ce n’est visuellement pas agréable à lire…
Utilisez des tons sobres pour mettre en avant votre contenu
Comme dit précédemment, la lisibilité est primordiale pour votre site internet. Si elle n’est pas suffisante, il est presque sûr que le visiteur va partir aussi vite qu’il est arrivé. Alors pour mettre en avant vos visuels, vos produits ou votre contenu textuel, il faut jouer avec les contrastes des couleurs. Ce contraste doit être suffisant pour que le contenu de votre site soit clair. L’important est d’avoir l’objectif de mettre en valeur votre contenu. C’est pour cela qu’il faut privilégier des tons sobres, car c’est le texte qu’on souhaite mettre en avant, et des tons assez flashy détourne l’attention du visiteur.
Mon conseil :
L’idéal pour s’assurer d’avoir la meilleure visibilité du contenu du corps de vos pages est d’écrire d’une teinte foncée sur fond blanc, ou à l’inverse écrire en blanc sur une teinte foncée.
Mettez-vous à la place du lecteur et analysez si l’information est facile à trouver.
Ce qu’il ne faut pas faire :
Ecrire sur des illustrations ou photos sans maîtriser les règles de contraste : cela rend le texte quasiment illisible. Si vous utilisez une illustration, écrivez votre texte sur un fond noir ou blanc avec une assez bonne opacité, pour continuer à voir l’illustration tout en rendant le texte lisible.
Aérez l’information
Toujours dans le souci de faciliter la recherche de l’information pour le visiteur, il faut absolument aérer le contenu de vos pages. En constante recherche de lisibilité, il est important de ne pas surcharger l’espace et d’avoir des pages épurées : c’est plus agréable à la lecture et cela permet à votre site de respirer.
Mon conseil :
En plus de ne pas surcharger votre site de contenu sur chaque page, n’oubliez pas d’avoir un bon espace entre le texte et les bords de page (ce que l’on appelle les « marges internes« ).
Si vous combinez un contenu visuellement épuré et l’utilisation de tons sobres, cela apportera beaucoup de légèreté à votre site internet.
Ce qu’il ne faut pas faire :
Morceler l’information avec trop d’encadrés et de blocs, cela nuit à la lisibilité de votre contenu et le visiteur peut être perdu.
Gardez une cohérence graphique d'une page à l'autre
Pour faciliter le parcours du visiteur sur votre site internet, il est important de garder une uniformité graphique d’une page à l’autre. Cela participera à une harmonie visuelle générale de votre site. Il faut garder la même structure de mise en page afin que le visiteur ne soit pas perdu. La cohérence graphique permet de guider « naturellement » le visiteur.
Mon conseil :
Pour cela, il faut notamment conserver une cohérence dans les couleurs et les polices utilisées pour vos textes : les titres doivent avoir toujours la même couleur et police d’une page à une autre et cela vaut également pour le corps du texte et les autres types de contenu textuel.
Ce qu’il ne faut pas faire :
– Changer de style d’une page à l’autre
– Utiliser une couleur qui n’appartient pas à votre charte graphique (3 couleurs environ maximum)
Utiliser des images d’une qualité irréprochable (mais pas trop lourdes !)
Le dernier point que je souhaitais évoquer avec vous était l’utilisation d’images et illustrations de bonne qualité pour votre site internet. Malheureusement, c’est trop souvent que l’on tombe sur des sites avec des photos de mauvaise qualité, floues, qui ne donne pas envie de rester sur le site.
C’est pour cela qu’il faut faire attention lorsqu’on utilise une photo ou illustration : elle ne doit pas être floue et/ou pixellisée, sinon cela nuira à la lisibilité de votre site et renverra une image négative au visiteur. Cela vaut également pour les vidéos !
Mon conseil :
Si vous souhaitez utiliser une image d’une grande qualité sans que cela impacte le temps de chargement de vos pages, je vous invite à vous rendre sur l’article Mes 10 astuces pour améliorer la vitesse de chargement de votre site web, plus précisément à la rubrique “Optimisez vos images : elles doivent être légères, au bon format, et aux bonnes dimensions !”. Je vous y explique comment et où compresser vos images afin qu’elles gardent une qualité irréprochable tout en ayant un poids faible permettant un chargement rapide de vos pages.
Ce qu’il ne faut pas faire :
Déformer la photo lors du redimensionnement de la photo afin de lui faire perdre du poids : il faut faire attention à cela, surtout si on prend l’exemple de votre logo qui participe à votre identité visuelle et qui ne doit pas être dénaturé.
En bref...
Comme vous l’avez sûrement remarqué, les maîtres-mots en matière de design web sont lisibilité et harmonie. Ce sont deux éléments à toujours avoir en tête lorsque vous constituez le design de votre site.
Le graphisme de votre site internet fait partie intégrante de l’expérience utilisateur et vous devez le penser dans ce sens. C’est un élément qu’on ne peut pas négliger et il faut penser le design de son site du point de vue du visiteur et non pas seulement selon nos goûts.
Tous ces conseils ne nécessitent pas une connaissance poussée en design graphique, ce sont des astuces que chacun peut utiliser. Elles doivent rendre votre site internet visuellement agréable et devraient avoir un impact positif sur votre trafic web.
Ping : Les 10 règles d'un bon rédacteur web - Webdesign
Ping : Les 10 règles d'un bon rédacteur web - Webdesign