La mise en page d’un site web est la disposition de tous les éléments sur une page. Titres, sous-titres, textes, images, boutons …
Un site web professionnel est celui dont la mise en page est soignée. C’est elle qui va convaincre le visiteur de rester sur votre site internet car il lui inspire confiance.
Portant, créer une mise en page lisible, attractive et équilibrée est un exercice difficile. Particulièrement pour un néophyte.
La page peut utiliser de superbes couleurs, de magnifiques images, des infographies originales. Ce ne sera pas suffisant.
Si la mise en page est :
- Confuse
- Plate
- Ou trop chargée
Le visiteur quittera probablement votre site internet prématurément. Ce que vous voulez naturellement éviter.
Pour cela, un site web doit se préparer en amont. On ne peut pas 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 une identité visuelle cohérente
Tous les éléments sur une page n’ont pas la même importante. Il faut les hiérarchiser. Afin d’apporter du contraste et favoriser sa lisibilité.
Je vous propose 8 points à travailler pour obtenir une mise en page attractive et lisible :
1- Hiérarchiser les éléments pour une meilleure mise en page
Une bonne mise en page d’un site web implique de soigner la disposition des éléments sur la page : photos, titres, textes, boutons …
Ran Segall (Flux) donne un conseil très basique mais ultra 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.
2- Réaliser du contraste par les couleurs
La palette de couleurs retenue va aussi permettre de créer du contraste dans une page. Elle va mettre en lumière les éléments les plus importants. Ceux qui appellent à une action.
Pour qu’une mise en page reste claire, il est recommandé de ne pas dépasser 3 à 4 couleurs. Une principale, une secondaire et les complémentaires.
La couleur principale 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 à votre activité et au message que vous souhaitez faire passer.
Exemple :
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.
3- Choisir des 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é.
4- Disposer les textes
Ne chargez pas votre page de grands pavés de textes. Ils sont difficilement lisibles sur un écran. Ils découragent 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.
Des listes à puce, une icône + du texte facilitent la lecture et la mémorisation. Votre message passera bien mieux ainsi.
NB: attention à la lisibilité d’un texte qui superpose une image.
Dernier conseil de grande importante : N’ayez pas peur d’aérer vos pages !
L’œil a aussi besoin de se « reposer » pour mieux assimiler l’information suivante.
5- La mise en page d'un site web réussie grâce aux images & Illustrations
Une mise en page sans visuel n’est pas attirante. Une image ou une illustration a un pouvoir de séduction.
Elle incite le visiteur à lire le texte. Elle favorise aussi sa compréhension et la mémorisation.
Des supports visuels de bonne qualité se trouvent facilement à travers des banques d’images gratuites. Pexels, Unsplash, Pixabay …
Je vous encourage aussi à lire mon article sur : image ou illustration : quel support utiliser pour votre site web ?
6- Mettre en avant les boutons et les liens
Comme je l’ai dit précédemment, des boutons qui appellent à une action doivent ressortir. Vous souhaitez que le visiteur les identifie rapidement. De même pour les liens.
Votre objectif est de maintenir la personne sur votre site. L’inciter à poursuivre sa lecture. Pour cela, les pages doivent être interconnectées. On appelle cela le maillage interne du site.
Concrètement :
Où souhaitez-vous que le visiteur aille à la fin de la lecture de la page d’accueil ? 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 du site. Mais chaque chose en son temps. Il faut donc hiérarchiser les priorités.
Si votre page est assez longue, vous n’êtes pas obligé de vous limiter à un seul appel à l’action (CTA).
7- 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. Alors rendez le visible !
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.
Prévoyez aussi des sections bandeau de couleur sur la page. Elles mettent en avant un message clé, un slogan… Elle crée une pause dans le lecture.
8- Inclure des Animations
L’insertion d’une animation permet de changer de rythme. Elle dynamise la mise en page de votre site web.
L’attention est re activée par un élément nouveau qui donne une nouvelle impulsion à la lecture.
Pour récapituler
La mise en page d'un site web 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 et le fidéliser !
Cet article vous a plu, Partager le :
Posts Récents
-
Créer un site web pour atteindre votre cibleJune 22, 2022/0 Comments -
-
J’hésite à créer un site webJanuary 16, 2022/
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.