Webdesign : 5 conseils pour des pages web bien structurées

Cela fait un petit moment que je n’ai pas fait d’articles de blog mais me voilà enfin de retour. Et aujourd’hui j’avais envie de parler de webdesign avec toi et plus particulièrement de comment organiser tes pages web. En effet, ton sérieux et ton professionnalisme vont être jugés en quelques secondes par ton lecteur et il est important de faire “bonne impression” rapidement ou en tout cas, de te donner les moyens de capter son attention. 

Ton site doit pouvoir te permettre de transmettre ton message rapidement et de façon claire et précise. Il doit certes te représenter et être “à ton image” mais trop de folie peut aussi te desservir alors voyons quels sont les 5 conseils de base pour des pages web au design propre et efficace.

1. Casser le rythme : 

Ici, je voudrai te parler de 2 notions : la symétrie et le rythme. De quoi s’agit-il?

La symétrie est ce qui te permet de bien ordonner ton site et de représenter des relations d’égalité. Comme par exemple, des services que tu veux présenter au même niveau.

Le rythme, quant à lui, s’apprécie à la lecture de ta page. Si on a toujours les mêmes colonnes, le même arrière plan, une seule section qui présente ton contenu de façon linéaire, le risque est de perdre ton lecteur. 😴

Il est donc important de casser le rythme régulièrement, de varier la structure de ton contenu de manière suffisante pour “rythmer” la navigation.

2. Introduire de l’espacement et du vide : 

De la même manière qu’il faut casser le rythme, il est aussi important de travailler sur l’espacement et le vide de la structure de ta page web.

L’espacement est ce qui va servir à espacer les éléments, à les décoller du bord.

Le vide est ce qui va permettre d’isoler les éléments.

L’objectif, ici, est de pouvoir isoler certaines idées pour qu’elles soient seules à l’écran et pouvoir les mettre en avant. Cela permet de laisser “respirer” ces idées et de ne pas les noyer entre elles.

3. Illustrer tes propos avec des images : 

Je trouve qu’il n’y a rien de plus triste qu’un site sans image!

En effet, les images ont vraiment leur importance dans la navigation de ton site et leur absence peut rendre la navigation sur ton site vite ennuyeuse. Elles vont avoir plusieurs fonctions, selon là où tu les insères.

Il existe plusieurs façons d’insérer des images : 

  • insérer une image seule
  • insérer une galerie d’image
  • insérer un diaporama
  • ou insérer une image d’arrière plan ou de couverture.

Les images les plus courantes sont les images seules et les images d’arrière plan. Mais leur fonction est différente. Une image seule va plutôt venir illustrer ton contenu, insister sur tes propos, comme avec une image d’exemple (comme dans cet article). A l’inverse, une image d’arrière-plan ou de couverture va plutôt être là pour créer une ambiance, donner une certaine atmosphère à ton site (qui doit bien sûr être en lien avec le message que tu veux faire passer sur qui tu es, d’autant plus important en personal branding).

Il est donc essentiel de savoir jouer avec l’une ou l’autre à minima.

4. Penser responsive : 

Alors là, point très important : tu dois toujours, oui TOUJOURS (permets moi d’insister), penser responsive quand tu structures ton site web. Aujourd’hui la navigation mobile (smartphone ou tablette) prend le dessus et si tu ne conçois pas ton site pour les “mobinautes”, tu loupes une grande partie de ton audience.

Qu’est ce que cela veut dire? 

Sur un appareil mobile, les colonnes que tu auras mises les unes à côté des autres par exemple, vont passer les unes sous les autres. Poses-toi la question si l’ordre est logique ou pas une fois sur l’écran d’un smartphone.

L’ensemble des effets stylés comme les animations ou les effets au survol ne se verront pas forcément ou rendront l’expérience désagréable. Il faudra peut-être penser à les désactiver ou à les régler différemment.

Et cela m’amène à mon dernier point… 

5. Ne pas en faire des tonnes : 

Souvent, lorsqu’on découvre l’ensemble des possibilités on veut en mettre de partout : 

  • effets de parallaxe (l’image qui défile en même temps que l’on descend sur la page)
  • effets de survol : un élément qui est mis en avant quand on passe la souris dessus
  • animations diverses et variés : texte qui défile ou arrive d’en haut ou d’en bas, boîte d’icônes qui arrive en tourbillon, titre animé… 

…bref on peut vite en faire des tonnes. Et c’est tellement facile aujourd’hui. Je sais que tu veux te démarquer et capter l’attention. Mais je suis plutôt pour conseiller la sobriété (heureuse voyons 😉). 

Quand toute une page se retrouve pleines d’animations, c’est un peu comme un feu d’artifice. On le supporte à petite dose mais à grosse dose, ça fait vite tourner la tête.

Donc évite d’en mettre trop et concentre-toi sur l’important : sur le message que tu veux faire passer!


En conclusion, ces 5 conseils de base sont pleins de bon sens même s’ils paraissent simplistes. Mais quand on se lance dans la création de son site web, on peut vite se perdre et en faire un peu trop. On veut dire beaucoup de chose, essayer de tout faire rentrer et on se retrouve alors avec un gros pâté.

Il est donc important, une fois que tu as défini ce que tu veux dire, de bien réfléchir à la structure en prenant bien en compte tous les conseils que je t’ai cité. Cela te permettra d’avoir un site clair, bien pensé et surtout de capter l’attention de ton lecteur tout au long de la navigation pour bien faire passer ton message. 

Parce que le plus important, on est d’accord, est de pouvoir te permettre d’apporter ton aide à la personne qui en a besoin. Et il serait dommage de passer à côté de cela à cause d’un problème de structure.

Qu’en penses-tu? Est-ce que ces conseils t’ont aidé?

N’hésites pas à m’en faire part dans les commentaires.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

construis ton site web

Ne pars pas sans ton guide gratuit !

Pas de spams, c’est promis !