Les principes de base de la mise en page de site web

Les principes de base de la mise en page de site web

  • Post author:
  • Post category:Astuces

Une mise en page de site web réussie peut être une vraie énigme à expliquer. En effet, si une mise en page est bien conçue, on ne la remarque en général même pas. Si le designer a bien fait son travail, l’utilisateur pourra trouver tout ce qu’il recherche (spécifications du produit, panier, offres promotionnelles, bouton d’achat, etc.) sans même avoir à y penser. Après tout, plus l’utilisateur passe de temps à essayer de comprendre comment utiliser un site, moins il porte d’attention au contenu.

Un designer en train de travailler sur son ordinateur à une mise en page de site web

Créer la mise en page d’un site web consiste à trouver le bon équilibre entre esthétique et fonctionnalité. Si votre site doit être beau, il doit aussi et surtout être efficace. Les utilisateurs ont peu de patience avec les sites qui marchent mal ou sont compliqués, c’est pourquoi les taux de rebond les plus élevés se produisent dans les dix premières secondes. Certes, une bonne mise en page ne fera pas toujours tout le travail (surtout si le contenu est décevant), mais inutile d’en faire la raison pour laquelle vos visiteurs s’en vont…

Pour vous aider à avoir un site web sur lequel vos visiteurs auront envie de rester, nous avons élaboré ce petit guide sur les principes de base de la mise en page de site web. Nous exposerons les bases de ce qu’un bon design doit accomplir, les techniques clés pour créer une mise en page efficace et les types de mise en page de site web les plus courants.

Les objectifs de la mise en page de site web

Aussi simple que cela puisse paraître, le seul objectif d’une mise en page est d’appuyer les objectifs du site web, qu’il s’agisse de convertir, de notoriété, de divertissement, ou toute autre chose. Cela dit, les objectifs d’un site web sont exprimés à travers son contenu, et la mise en page est là pour organiser ce contenu de manière efficace. Voici tout de même quelques fonctions courantes de la mise en page de site web :

  • Affichage des informations : une bonne mise en page organise les informations de manière à ce qu’elles arrivent dans un ordre évident, qu’elles soient faciles à lire en diagonale, qu’elles donnent du poids aux éléments les plus importants de la page, et qu’elles rendent les outils intuitifs, et faciles à trouver et à utiliser
Une illustration animée montrant des graphiques et des données sur un site web
  • Engagement de l’utilisateur : une bonne mise en page rend le site web visuellement attrayant, guide les yeux de l’utilisateur vers les points d’intérêt du site, et les encourage à continuer la navigation
  • Image de marque : une bonne mise en page joue également un rôle dans le branding en utilisant l’espacement, l’alignement et l’échelle de manière cohérente avec le branding de l’entreprise

Ces objectifs vont être le fil conducteur de la mise en page de site web, mais avant d’examiner des exemples concrets, examinons tout d’abord de plus près comment les atteindre.

Le processus de création de la mise en page de site web

Le processus de création de la mise en page d’un site web doit avoir lieu au tout début de la création du site, c’est-à-dire juste après avoir défini votre stratégie, mais juste avant de vous lancer dans un programme graphique pour créer l’interface.

La mise en page de site web est visualisée grâce aux wireframes, c’est-à-dire grâce à un squelette de base montrant comment le contenu s’articulera. Il est important de distinguer le wireframing de la conception web, qui est l’ensemble du processus de création graphique du site et des autres éléments visuels en lien. La création de la mise en page représente une grande partie de la conception du site, et ce processus commence toujours par le wireframing. Dans l’idéal, le design suit les wireframes afin que les éléments graphiques soient positionnés de manière stratégique, plutôt qu’en fonction des préférences esthétiques éphémères du concepteur.

Capture d'écran du prototype de wireframe de notre page de recherche de designers

Voici maintenant les étapes pour créer la mise en page d’un site web :

  1.  Identifiez toutes les zones de contenu. Les wireframes représentent généralement du contenu avec de simples carrés et rectangles, qu’il s’agisse d’une image ou d’un bloc de texte. Il est important de savoir à l’avance la quantité de contenu dont vous disposez et la taille approximative de chaque élément (ou nombre de mots) afin de pouvoir assembler les éléments avec précision
  2. Créez une série de wireframes et de prototypes. La mise en page peut aussi être un simple dessin réalisé sur du papier, mais sachez qu’il existe de nombreux logiciels (comme Whimsical) spécialement conçus pour créer des wireframes. Les wireframes n’étant pas censés être des œuvres d’art détaillées, vous pouvez en créer plusieurs à la fois. Même si vous tombez amoureux de votre première idée, obligez-vous à créer plusieurs wireframes afin d’avoir plusieurs options. En l’absence de beaux designs pour vous distraire, vous serez plus à même de vous concentrer sur l’expérience utilisateur et d’explorer quelle mise en page sera la plus intuitive pour vos visiteurs. Assurez-vous de prendre en compte toutes les tailles d’écran. Il est recommandé de commencer par la mise en page pour les appareils mobiles et de développer les autres versions de votre site web à partir de celle-ci
  1. Testez, sondez, et recommencez. Une fois que vous avez quelques options, assurez-vous de recueillir les commentaires de vos collègues. Les applications comme Invision et Figma permettent de créer des prototypes interactifs afin que vous puissiez facilement tester les boutons et la navigation de votre site sans avoir à réellement créer de page web. Demander à vos utilisateurs cobayes d’enregistrer leurs mouvements pendant qu’ils naviguent dans le prototype afin de révéler les faiblesses de votre UX. Une fois que vous avez quelques notes, revenez à la deuxième étape et répétez le processus jusqu’à ce que tout soit parfait

Bien que ces étapes soient les étapes les plus évidentes de la création de la mise en page de site web, il peut être difficile, lorsqu’on débute, de savoir ce qui fait qu’une mise en page est réellement efficace. Dans la partie suivante, nous passons en revue les techniques spécifiques que vous pouvez utiliser pour vous aider à prendre les bonnes décisions pour votre mise en page.

Les techniques clés pour une mise en page de site web efficace

La création de la mise en page d’un site web est une pratique vieille de plusieurs décennies, ce qui signifie qu’un certain nombre de conventions et de principes de base ont été établis au fil des années pour guider les concepteurs dans leur métier. Voici quelques-unes des techniques les plus utiles :

La hiérarchie visuelle

La hiérarchie visuelle est une façon de styliser les six éléments de design pour créer un contraste accru et mettre en valeur certains éléments. Ainsi, les éléments les plus importants de la mise en page sont ceux que l’utilisateur doit identifier immédiatement, en fonction de l’objectif de la page. Ceux-ci incluent généralement les titres, les propositions de valeur, les calls to action (CTA) et les outils utilisateur comme la navigation.

Un design de site web noir et blanc pour un produit médical

La hiérarchie visuelle peut se manifester de plusieurs façons, comme le choix de la police (taille, poids, et même des combinaisons de polices différentes), l’alignement des éléments importants plus haut sur la page ou l’utilisation de couleurs complémentaires pour faire ressortir certains éléments.

Les sens de lecture

Les différents sens de lecture décrivent les façons les plus courantes de lire en diagonale les pages et sont représentés par des lignes directionnelles (vecteurs, pour les mathématiciens). Étant donné que les recherches montrent que 79 % des visiteurs des sites web ne font que parcourir les pages rapidement, il est essentiel de rendre ce processus aussi simple que possible. Ainsi, il est important de créer votre mise en page avec un sens de lecture spécifique à l’esprit.

Design de site web rose pour une marque de vernis à ongles

Prendre en compte les différents sens de lecture dans vos mises en page implique de placer stratégiquement des éléments le long des axes de lecture du spectateur. Les modèles les plus courants sont basés sur une lecture en Z (un vecteur en zigzag ; utile pour les mises en page riches en images) ou une lecture en F (un vecteur ligne par ligne ; utile pour les mises en page riches en texte).

La ligne de flottaison

Dans la conception web, la « ligne de flottaison » est la ligne à laquelle une page web est coupée en raison des limitations dues à la taille d’écran. Le contenu qui est visible lorsque la page se charge est au-dessus de cette ligne, et le contenu qui oblige les utilisateurs à faire défiler la page vers le bas est sous cette ligne.

Design de site web pour une entreprise d'immobilier en bord de mer

En ce qui concerne la mise en page d’un site web, le contenu le plus important ou le plus convaincant (comme une proposition de valeur ou un CTA) doit être positionné au-dessus de la ligne de flottaison afin que les utilisateurs n’aient pas à le chercher. Cet espace est estimé à 1000 x 600 pixels pour la plupart des dimensions d’écran. Cela dit, les designers peuvent également utiliser cette ligne pour couper les éléments intrigants en deux (à cheval au-dessus et en dessous de la ligne) afin d’encourager les utilisateurs à faire défiler vers le bas, et à poursuivre ainsi leur engagement avec la page en question.

Les systèmes de grille

Une grille est une mise en page basée sur des mesures précises. Elle est composée d’axes (espaces désignés pour le placement du contenu) et de gouttières (les espaces vides entre les axes).

Bien que les grilles proviennent des techniques utilisées pour créer la mise en page de magazines et de journaux, elles sont omniprésentes dans la conception web, car elles permettent de créer de l’ordre et de la cohérence face à une grande quantité de contenus. Cependant, ces grilles peuvent vite devenir monotones et les designers doivent faire preuve d’imagination pour créer des mises en page originales au sein de cette fameuse grille.

L’espace vide

L’espace vide, parfois appelé espace négatif, est simplement la zone d’un design où il n’y a pas de contenu. Bien qu’il soit souvent tentant de remplir sa page de contenu, l’espace vide peut être l’atout le plus important de la mise en page d’un site web

Un design de site web minimaliste avec beaucoup d'espace vide pour une entreprise d'apprentissage de code

Pensez à la façon dont une ligne de texte sur une page par ailleurs vide attirera votre attention beaucoup plus efficacement que sur une page remplie de contenu. Un grand espace blanc crée une emphase tout en rendant la composition générale moins intimidante à lire. Contrairement aux pages imprimées, il n’y a pas de limite à la longueur d’une page web, ce qui donne aux designers beaucoup plus de liberté avec ces fameux espaces.

Les types de mises en page les plus courants

La mise en page d’un site web est rarement créée de toutes pièces. Et il est même conseillé de ne pas partir de zéro. De nos jours, la plupart des sites web sont basés sur des schémas de mise en page courants, utilisés encore et encore avec de petites variations à chaque fois.

Bien qu’un certain degré d’originalité soit important dans tout design, les sites web sont destinés à être immédiatement compris et utilisés. Ainsi, lorsque les utilisateurs s’habituent à certains types de modèles de mise en page au fil du temps, il est logique que les designers s’y tiennent. N’oubliez pas qu’en fin de compte, une mise en page doit être pratique, et moins les utilisateurs passent de temps à comprendre une nouvelle mise en page, plus ils consacrent de temps à utiliser réellement le site. Cela dit, voici quelques-unes des mises en page les plus courantes :

Mise en page à colonne unique

Une mise en page contenant une seule colonne, souvent aligné au centre, permet d’organiser le contenu de manière séquentielle.

Une mise en page de site web à colonne unique et en noir et blanc pour une entreprise de marketing digital

De nombreuses mises en page web commencent par une seule colonne étant donné qu’il est recommandé de créer son site en pensant aux mobiles en priorité, et que les sites web mobiles n’ont souvent qu’une seule colonne en raison de contraintes de taille d’écran. Ce type de mise en page est particulièrement utile pour les landing pages ou les contenus basés sur des flux, tels que les réseaux sociaux et les blogs, car elle réduit la quantité d’éléments présents et encourage le défilement.

Mise en page à deux colonnes

Une mise en page à deux colonnes permet de présenter les éléments de son contenu côte à côte.

Une mise en page de site web colorée et photographique à deux colonnes pour une marque écologique

Ce type de mise en page est utile pour mettre en évidence la dichotomie entre deux éléments (différents publics sur les sites de vêtements, par exemple, ou deux options de tarification). Cela peut aussi permettre de contrebalancer les graphiques avec du texte, tout en optant subtilement pour une lecture en Z.

Mise en page à plusieurs colonnes

Une mise en page à plusieurs colonnes est souvent appelée mise en page de journal ou de magazine. Ce style permet d’accueillir une grande quantité de contenu sur la même page.

Une mise en page de site web flat à colonnes multiples pour une interface utilisateur

Il est courant d’utiliser une grille pour organiser ses pages et créer une hiérarchie visuelle, donnant des colonnes plus larges aux éléments plus importants (contenu, texte), et les colonnes moins larges aux éléments moins importants (menu de navigation, barre latérale, bannière publicitaire). Les mises en page à plusieurs colonnes sont utiles pour créer la page d’accueil du site d’une entreprise, pour les sites riches en images ou en vidéos, les magazines en ligne, les tableaux de bord utilisateur, et les sites d’e-commerce, c’est-à-dire tous les sites web avec beaucoup de contenu et de catégories vers lesquels diriger les utilisateurs.

Mise en page asymétrique

Une mise en page asymétrique dispose les différents éléments à une échelle et à une proximité inégales. Mais bien que ce soit l’antithèse de la grille, l’asymétrie ne signifie pas pour autant le chaos.

Une mise en page de site web asymétrique et moderne pour une entreprise dans la finance

L’équilibre est essentiel dans tout design. Il en va de même pour les designs asymétriques qui y parviennent simplement de manière inattendue, par exemple en associant un visuel à grande échelle à de nombreux éléments plus petits. Ce type de mise en page est utile pour accentuer de manière exagérée certains éléments (que ce soit par la taille, par la couleur ou par le placement). Ce style est également utile pour créer un sens de lecture différent des sens les plus courants.

Les marques qui peuvent se permettre d’être non conventionnelles dans leur approche trouveront ce style de mise en page idéal. On pense notamment aux sites web qui souhaitent mettre en valeur un produit innovant ou qui tournent autour des arts, et qui ont un public aventureux.

Conclusion

Une bonne mise en page permet de rendre votre site web attrayant, mais aussi intuitif et fonctionnel. C’est le premier pas à franchir pour faire bonne impression auprès des utilisateurs en les encourageant à rester sur votre site et à parcourir tout son contenu.

Bien que ces principes fondamentaux du design de la mise en page de site web puissent être un excellent point de départ, ne vous arrêtez pas en si bon chemin et assurez-vous d’offrir à vos visiteurs une expérience de site exceptionnelle. Et la meilleure manière de leur offrir cela reste de contacter un designer professionnel spécialiste en la matière.