Soigner la mise en page de son site web pour une meilleure lisibilité

La mise en page de votre site web est probablement la chose la plus compliquée à réaliser lorsque vous créez votre site web vous-même. Et pourtant c’est l’un des points les plus importants. Quel que soit votre support de communication il faut qu’il soit lisible.

La page peut utiliser de superbes couleurs, de magnifiques images, des infographies originales … si la mise en page est confuse le visiteur fera abstraction de tout ça et quittera probablement la page de votre site internet prématurément. Ce que vous voulez naturellement éviter.

Un site web doit se préparer en amont. On ne peut pas juste créer une page WordPress et la remplir au fil de son inspiration.

Il faut réfléchir tout d’abord :

  • A sa structure : les rubriques et les interconnections entre les pages (maillage interne)
  • Au contenu de chaque page
  • A son identité visuelle
Mise en page site web

Créer du contraste par la taille des éléments

Une bonne mise en page d’un site web implique qu’il faut donc soigner la disposition des éléments sur la page : photos, titres, textes, boutons …

Ran Segall (designer) donne un conseil très simple mais super efficace sur la manière de créer un support de communication : Il faut qu’il y ait 3 éléments : un gros, un moyen et un petit.

Ça parait simple, pourtant !

Il faut du contraste entre les éléments pour une meilleure lisibilité.

Le plus gros élément attire immédiatement l’attention du visiteur. Son œil se dirige alors vers l’objet moyen et finit par le plus petit.

Ça circule !!

Si tous les éléments de la page font la même taille alors l’œil ne voit pas de séquence et ne sait pas où se poser.

Il faut donc, en composant votre page, hiérarchiser vos informations.

Lisibilité

Réaliser du contraste par les couleurs

La palette de couleur retenue va aussi permettre de créer du contraste dans une page et de mettre en lumière les éléments les plus importants. Ceux qui appellent à une action.

Dans une palette de 3 couleurs par exemple, une d’entre elles devra ressortir plus que les deux autres.

Cette couleur sera utilisée pour les éléments prioritaires : les titres principaux, les boutons appel à l’action (CTA), les liens …

Le visiteur les identifiera ainsi rapidement et facilement de page en page.

Comme vous le savez déjà certainement les couleurs évoquent quelque chose. Leur choix ne doit pas être anodin. Elles ne peuvent pas être uniquement sélectionnées par affinité personnelle.  Elles doivent aussi correspondre à l’activité mise en avant et au message que vous souhaitez faire passer.

Les coachs en bien-être qui souhaitent mettre en avant un rétablissement, un retour à l’apaisement, ne choisiront peut-être pas des couleurs flashy mais plutôt des couleurs douces, apaisantes et rassurantes.

Les typographies

Comme les couleurs, le choix des typographies a une vraie importance. Il ne faut pas les multiplier. Idéalement il faudrait en choisir 2 ou 3 afin de bien faire comprendre la structure du site. L’œil pourra ainsi distinguer très rapidement les éléments prioritaires et les différentes parties du site.

Ainsi, toutes les typographies du site auront une taille et une graisse spécifiques selon leur importance.

Certaines parties du texte pourront être misent en gras pour plus d’emphase mais attention de rester modéré.

Les textes et contrastes

Attention à ne pas trop charger la page de textes. Trop de texte rebute vraiment le visiteur. Vous n’êtes pas obligé de tout dire ! Ce que vous souhaitez c’est être convaincant afin que le visiteur vous contacte.

Rédigez des titres clairs et un contenu synthétique.

Une icône + texte est une manière très attirante pour faire passer votre message.

Petit détail, lorsque le texte est superposé au-dessus d’une image, faites-en sorte qu’il soit lisible.

Aérez vos pages

N’ayez pas peur d’aérer vos pages. L’œil a aussi besoin de se « reposer » pour mieux assimiler l’information suivante.

Les boutons et les liens

Comme nous l’avons dit précédemment, des boutons et des liens contrastants incitent le visiteur à poursuivre sa lecture. Il faudra donc les utiliser judicieusement au travers du site.

Les pages doivent être interconnectées, on appelle ça le maillage interne du site.

Concrètement :

La page d’accueil va diriger le visiteur où ? Quelle est votre priorité ?

Vers :

  • Vos accompagnements
  • Votre A propos
  • Le formulaire de contact
  • Inscription à une newsletter …

Potentiellement, vous aimeriez qu’il aille lire toutes ces rubriques mais chaque chose en son temps. Il faut donc hiérarchiser les priorités.

Malgré tout, et surtout si votre page est assez longue, vous n’êtes pas obligé de vous limiter à un CTA.

Menu bouton CTA

Le menu et les bandeaux

Le menu d’un site est un élément à part. D’une importance capitale. C’est toute la structure du site qui est présentée à un même endroit.

Trop d’originalité à ce niveau n’est pas forcément une bonne chose.

Les visiteurs s’attendent à le trouver au même endroit sur tous les sites. Généralement en haut à droite, ou centré ou en colonne à gauche.

Si il est caché, la circulation dans le site aura du mal à se faire.

Encore une fois le rendre bien visible par du design est essentiel.

Si vous souhaitez en savoir plus sur la création d’un menu optimisé, vous pouvez lire cet article : Création d’un menu : les bonnes pratiques.

De même que le menu, des sections bandeau de couleur peuvent être prévues pour mettre en avant un message clé, un slogan…

Animations

L’insertion d’une animation permet de changer de rythme. L’attention est re activée par un élément nouveau qui donne une nouvelle impulsion à la lecture.

Pour récapituler :
Une mise en page claire et cohérente pour une bonne lisibilité

Une mise en page d’un site web réussie passe par de la cohérence, des contrastes et un bon positionnement des éléments qui composent la page.

Le visiteur veut trouver l’information qu’il cherche rapidement. Il passera très peu de temps sur votre site SAUF si vous lui facilitez la vie par un site web bien agencé, fluide et esthétique. Pour cela il vous faut une mise en page impeccable lisible aussi bien sur ordinateur que sur portable.

Une mise en page et un design soignés est la meilleur combinaison pour capter votre lecteur !

Partager cet article:

Guide offert

🔸Vous avez déjà un site qui aurait besoin d’être amélioré?

🔸Vous souhaitez créer un site sous WordPress?

✏Alors n’hésitez pas à vous inscrire à cette liste pour recevoir des astuces et conseils techniques et esthétiques pour rendre votre site plus attractif.

Les éléments indispensables pour un site web PRO
J'accepte de m'inscrire à la liste de ameliecreemonsiteweb.
Vos emails sont confidentiels et vous pourrez vous désinscrire à chaque nouveau courrier.
Join over 3.000 visitors who are receiving our newsletter and learn how to optimize your blog for search engines, find free traffic, and monetize your website.
We hate spam. Your email address will not be sold or shared with anyone else.