Disposition du site Web

Meilleurs exemples et idées de mise en page de site Web


La mise en page de votre site Web peut définir son succès. Obtenez la mauvaise conception et les gens seront confus et désorientés, détruisant l’expérience utilisateur. Ils risquent de manquer un contenu critique ou de ne pas voir d’appel à l’action.

Mais l’importance de votre mise en page va plus loin. La conception doit s’adapter au contenu de votre site. Avec la bonne mise en page, votre contenu peut briller, mais avec le mauvais contenu peut devenir encombré, difficile à lire et sans intérêt.

La mise en page de votre site Web peut définir son succès. Obtenez la mauvaise conception et les gens seront confus et désorientés, détruisant l’expérience utilisateur. Ils risquent de manquer un contenu critique ou de ne pas voir d’appel à l’action.

Mais l’importance de votre mise en page va plus loin. La conception doit s’adapter au contenu de votre site. Avec la bonne mise en page, votre contenu peut briller, mais avec le mauvais contenu peut devenir encombré, difficile à lire et sans intérêt.

En fin de compte, tous les sites ont un système de grille qui se trouve sous la conception du site Web. Ces colonnes et lignes fournissent de l’ordre à votre contenu et guident l’œil de l’utilisateur autour de la page. Dans ces grilles, vous pouvez créer une multitude d’approches différentes. Chaque site Web a une grille sous-jacente sur laquelle le concepteur a construit la mise en page.

Cependant, quand il s’agit de choisir la bonne mise en page pour votre site, il existe plusieurs points de départ communs que vous pouvez utiliser pour commencer.

Il vaut la peine de dire que vous n’avez pas besoin de vous en tenir à une seule approche. Vous pouvez facilement combiner plusieurs mises en page sur votre site ou même sur une seule page telle qu’une page de destination.

Cela dit, regardons les options de mise en page les plus courantes à votre disposition.

Nous commençons par le modèle de mise en page le plus simple de tous, la colonne unique.

1. Disposition à colonne unique

Bien que la mise en page la plus simple que vous trouverez, elle a considérablement augmenté en popularité depuis la croissance du Web mobile. En effet, le site Web peut utiliser la même conception sur les appareils mobiles, les tablettes et les ordinateurs de bureau, ce qui réduit le temps de développement.

En outre, les dispositions à une seule colonne fonctionnent bien pour créer une excellente expérience de lecture car elles concentrent l’utilisateur sur le contenu sans aucune distraction de chaque côté. C’est pourquoi le site de blogs Moyen l’adopte pour tous leurs articles.

Medium utilise une disposition à une seule colonne pour améliorer l'expérience de lecture.

Enfin, lorsqu’elle est combinée avec des images, une disposition à une seule colonne peut avoir un impact puissant car elle vous permet d’afficher ces images aussi grandes que possible. The Ocean Resort est un excellent exemple de cela en action.

L'Ocean Resort utilise toute la largeur de sa conception à colonne unique pour maximiser l'impact de l'imagerie.

Avec ces facteurs à l’esprit, envisagez d’utiliser une disposition à une seule colonne si vous souhaitez que les gens passent beaucoup de temps à lire sur votre site ou si vous avez des images qui ont besoin de la place pour briller.

En raison de sa simplicité, il y a peu de défis autour d’une disposition à une seule colonne. Cependant, vous devez considérer attentivement le flux d’informations. De quel ordre l’utilisateur a-t-il besoin pour voir votre contenu?

Par exemple, il est utile de donner aux utilisateurs un résumé de ce que la page couvre en haut pour les attirer et proposer un appel à l’action clair vers la fin.

Réfléchissez également à la façon dont vous pouvez faire en sorte que l’utilisateur fasse défiler la page. Les dispositions sur une seule colonne ont tendance à être plus longues, et il n’est pas toujours évident pour l’utilisateur qu’il y a plus de contenu sous le pli. Un indicateur visuel, comme une flèche, peut vous aider.

Si une disposition à une seule colonne semble un peu restrictive, mais que vous avez encore beaucoup de contenu à communiquer, envisagez d’adopter une conception qui se concentre sur le contenu.

2. Disposition axée sur le contenu

Les concepteurs Web utilisent souvent la mise en page axée sur le contenu sur les sites d’actualités ou les blogs, et elle a généralement une colonne principale pour le contenu et une ou plusieurs colonnes latérales pour des informations supplémentaires..

L’avantage de cette disposition est qu’elle peut vous aider à gérer la longueur de ligne du contenu central en faisant varier la largeur des colonnes latérales. Cela compte car si la longueur de ligne du texte est trop longue ou trop courte, il devient plus difficile à lire, réduisant ainsi la compréhension et la conservation des informations.

Cependant, bien faite, la mise en page axée sur le contenu est idéale pour tout site Web centré sur la copie. Le secret est de diviser le contenu de cette mise en page en petits morceaux faciles à digérer.

Les messages sur Boagworld décomposent le contenu avec des titres, des listes, des images et des citations de retrait.

Par exemple, sur mon blog, vous constaterez que mon message moyen est rythmé par des titres, des listes, des images et des citations. Ce sont toutes des techniques pour aider l’utilisateur à numériser l’article, à trouver des pièces d’intérêt.

Une attention particulière doit également être accordée aux colonnes latérales. Il est essentiel que le concepteur Web place le bon contenu dans ces colonnes et qu’il ait visuellement la bonne pondération.

Le problème est que les utilisateurs s’attendent à trouver du contenu secondaire dans les colonnes latérales et leur accordent donc moins d’attention. Par conséquent, si vous prévoyez d’inclure quelque chose comme un appel à l’action dans une colonne latérale, il doit être suffisamment fort pour attirer l’attention.

Par exemple, remarquez comment Smashing Magazine utilise une illustration colorée d’un chat pour attirer l’attention sur son formulaire d’inscription à la newsletter dans la colonne de droite.

Smashing Magazine utilise ses colonnes latérales pour fournir des informations secondaires sur le message.

Non pas que la mise en page axée sur le contenu soit appropriée pour chaque page de votre site. Les sites Web associent souvent cette mise en page à une conception de style magazine.

3. Présentation du magazine

Comme son nom l’indique, cette approche de mise en page est largement utilisée dans les magazines ou les sites d’actualités pour montrer un grand nombre d’histoires différentes.

Inspirés par la mise en page imprimée, ils permettent la combinaison de titres et d’images pour introduire des histoires. Cela peut être un moyen intéressant de transmettre ce qui est essentiellement une liste de liens.

C’est également une excellente mise en page pour mettre en évidence un contenu qui change régulièrement. C’est pourquoi les sites d’actualités comme The Washington Post alors favorise-le.

Les sites Web d'actualités ont tendance à favoriser la mise en page de style magazine.

Cependant, la disposition n’est pas sans inconvénients. Une mise en page de magazine peut être difficile à rendre réactive, nécessitant souvent un changement complet de conception pour les appareils à écran plus petit.

Ce style de mise en page de site Web peut également être quelque peu écrasant, avec un grand nombre d’images et de titres criant à l’attention.

Le moyen le plus efficace de résoudre ce problème est de créer une hiérarchie visuelle claire. En d’autres termes, agrandissez certaines des «histoires» par rapport à d’autres.

En variant la taille des histoires, ils guident l'œil des utilisateurs.

Par exemple, remarquez comment le Vogue Le site Web concentre l’attention sur l’image de gauche en l’agrandissant considérablement. Ils indiquent efficacement à l’utilisateur où chercher en premier.

Cela aide également à ce que le reste de l’interface utilisateur soit simple, avec une typographie claire et des barres de navigation simples. Si vous allez utiliser la mise en page du magazine, vous devrez travailler dur pour garder les choses simples.

Un autre inconvénient potentiel de la mise en page du magazine est qu’il peut sembler «carré» car la grille qui le sous-tend est tellement visible. Cependant, vous pouvez atténuer cela en vous inspirant de notre prochain type de mise en page.

4. Disposition de rupture de grille

Les dispositions qui semblent rompre leur grille sous-jacente peuvent être visuellement beaucoup plus intéressantes que les approches plus traditionnelles. Ils sont également excellents pour attirer l’attention sur des éléments d’écran particuliers qui sortent des colonnes habituelles.

Prenez, par exemple, le Site du VR Arles Festival. Remarquez comment ils attirent votre attention sur leur barre de navigation en la faisant chevaucher deux colonnes.

Le VR Arles Festival attire votre attention sur leur barre de navigation en la faisant chevaucher deux colonnes.

Une autre utilisation pratique de la disposition de rupture de grille consiste à l’utiliser pour superposer du texte sur une image de manière à attirer l’attention sur la copie. Lorsqu’une page Web recouvre complètement du texte sur une image, elle peut souvent être perdue. Cependant, comme vous pouvez voir l’exemple ci-dessous, si le texte chevauche partiellement l’image, il ressort beaucoup plus.

Cette conception attire l'attention sur le texte et appelle à l'action en le superposant partiellement à l'image.

L’inconvénient des dispositions de rupture de grille est qu’elles sont difficiles à corriger, en particulier lorsque les sites Web doivent être réactifs. En vérité, la plupart des conceptions innovantes ne sont rien de la sorte. Il y a toujours une grille sous-jacente, et tous les éléments d’écran s’y adaptent. C’est juste que la grille est beaucoup plus complexe et donc ce n’est pas si évident. Cela les rend difficiles à concevoir.

Leur complexité inhérente explique pourquoi vous avez tendance à les voir utilisées par des entreprises axées sur le design telles que les agences de design ou les marques de mode. Ils démontrent un degré de sophistication de conception qui fait appel à un public particulier.

Si une disposition de rupture de grille vous semble trop compliquée pour votre situation, mais que vous voulez toujours faire quelque chose de plus innovant et inhabituel, envisagez une conception plein écran.

5. Disposition plein écran

Les mises en page plein écran, comme son nom l’indique, tiennent sur un seul écran sans que l’utilisateur ait besoin de faire défiler. Cela les rend idéales pour la narration ou les présentations.

Prends pour exemple, Espèces en morceaux. Cette expérience de présentation riche et interactive raconte les histoires de 30 espèces engagées.

Species and Pieces est une expérience riche et interactive qui se déroule sans avoir à faire défiler.

Comme vous pouvez le voir, les mises en page plein écran sont optimales lorsqu’elles sont accompagnées d’images puissantes. Cela en fait un excellent choix pour les sites Web riches en photographies, illustrations ou vidéos.

Non pas que vous deviez vous en tenir strictement à l’approche à écran unique. À première vue, Site Web de Roux sur la place du Parlement semble être un site Web plein écran dans le même sens que Species in Pieces. Leurs images magnifiques remplissent toute la fenêtre.

Ce site Web utilise l'intégralité de la fenêtre pour présenter ses superbes photographies.

Cependant, il est possible de naviguer plus bas sur la page pour voir du contenu supplémentaire. Malheureusement, cela met en évidence un inconvénient potentiel de cette approche de mise en page. Les utilisateurs ne se rendent pas toujours compte qu’ils peuvent faire défiler et peuvent donc manquer un contenu précieux.

Vous devez également examiner attentivement la façon dont la mise en page s’adaptera à différentes tailles. Par exemple, l’approche plein écran fonctionnera-t-elle sur un appareil mobile? De plus, les images se recadreront-elles au fur et à mesure que la taille de l’écran changera ou se rétréciront-elles simplement? Vous pouvez trouver rapidement les points focaux des images à recadrer hors de la zone visible à des tailles plus petites.

Cela dit, si vous avez de superbes images à montrer, vous aurez du mal à trouver une meilleure mise en page. Mais, si vous souhaitez ajouter une description et des appels à l’action à côté de ces images, vous pouvez envisager une mise en page alternée.

6. Disposition alternée

Le modèle de disposition alternée est l’un des plus courants sur le Web. Vous constaterez qu’il est composé d’une série de blocs de contenu, dont chacun a une disposition en deux colonnes. Les blocs sont généralement constitués d’une image d’un côté et de texte de l’autre.

Ce qui lui donne son nom, c’est que l’image alterne côté. Ainsi, le premier bloc aura du contenu à gauche et une image à droite, tandis que le bloc suivant inverse cette disposition.

Il s’agit d’une approche de mise en page particulièrement privilégiée pour expliquer les fonctionnalités ou les avantages d’un produit. Par exemple, des produits logiciels comme Webydo utilisera l’image pour montrer une fonctionnalité, puis la copie pour expliquer comment elle fonctionne ou l’avantage qu’elle offre.

Webydo alterne texte et images dans différents blocs de contenu sur sa page d'accueil.

Non pas que ces blocs de contenu soient limités aux images et au texte. Parfois, les sites remplacent l’image par une vidéo. De même, le côté contenu de l’élément peut inclure tout, des icônes aux témoignages ou aux appels à l’action.

Par exemple, Convertkit inclut un témoignage et un appel à l’action à côté de leur texte dans chaque bloc de contenu.

Convertkit inclut des témoignages et des appels à l'action à côté de leurs images.

Une partie de la raison pour laquelle les blocs alternatifs sont si communs est qu’ils sont une approche de mise en page simple avec peu d’inconvénients. Si vous devez communiquer plusieurs arguments de vente, c’est presque toujours une option de mise en page fiable.

Bien sûr, vos besoins peuvent être différents, donc une autre option à considérer est la mise en page basée sur les cartes.

7. Dispositions basées sur des cartes

Les mises en page basées sur des cartes sont une autre approche de mise en page courante que vous verrez sur le Web.

Les mises en page basées sur des cartes sont un excellent moyen de donner aux utilisateurs une série d’options parmi lesquelles choisir, en leur présentant suffisamment d’informations sur chaque choix pour prendre une décision.

Cela en fait un choix populaire pour les pages de listes de produits des sites de commerce électronique. Il permet au site Web d’afficher une image du produit, une description et le prix. Vous pouvez même ajouter des fonctionnalités comme «enregistrer pour plus tard» comme vous pouvez le voir sur le Site web d’Asos.

Les sites de commerce électronique comme Asos favorisent les mises en page basées sur des cartes pour afficher les listes de produits.

Cependant, vous trouverez des sites Web utilisant des mises en page basées sur des cartes dans toutes les situations où les utilisateurs doivent effectuer une sélection dans une liste. Par exemple, une autre utilisation typique consisterait à afficher une liste d’articles sur un blog ou un site d’actualités.

Une mise en page basée sur une carte vous permet d’afficher une image de l’histoire, du titre et de la description, ainsi que des détails supplémentaires sur le message que vous souhaitez inclure. Awwwards le blog est un excellent exemple de ce type d’utilisation en action.

Awwwards utiliser une mise en page basée sur des cartes pour répertorier les messages sur son blog.

Mieux encore, les mises en page basées sur les cartes fonctionnent bien de manière réactive, le nombre de cartes d’affilée diminuant lentement à mesure que la largeur disponible diminue.

Il y a cependant quelques inconvénients mineurs à l’approche. Tout d’abord, les cartes fonctionnent mieux lorsque vous incluez l’image. Cela signifie que si vous avez du mal à trouver des photos appropriées pour chacun de vos éléments de liste, vous pourriez être mieux avec un design différent.

L’autre petit problème est lié aux quantités variables de contenu. Si une carte a plus de contenu qu’une autre, elle peut laisser un espace blanc à l’intérieur de la carte ou entre chaque ligne.

Si le contenu des cartes varie, il peut laisser des espaces entre les cartes.

Une façon d’atténuer ce problème est de ne pas essayer de conserver les cartes sur la même ligne, comme indiqué dans l’exemple ci-dessous.

En permettant aux cartes de remplir l'espace vide, vous vous retrouvez avec un design plus esthétique.

Néanmoins, il s’agit d’un problème mineur, ce qui explique l’adoption généralisée de cette approche de mise en page.

Un autre design tout aussi populaire est la mise en page de l’image du héros.

8. Disposition des héros

La disposition des héros porte le nom des images de héros, ces grandes images avec des superpositions de texte qui dominent les pages d’accueil sur de nombreux sites Web. Apple fait bon usage de l’image classique du héros.

Apple fait bon usage de l'image classique du héros.
Pixave pour MacOS va encore plus loin dans la disposition des héros en la faisant dominer la conception de sa page d’accueil.
Pixave pour MacOS va encore plus loin dans la disposition des héros en la faisant dominer la conception de sa page d'accueil.

Ce qui rend les images de héros si répandues, c’est qu’elles vous permettent de mettre en proposition de valeur de manière percutante au point d’entrée de votre site Web.

Comme vous pouvez le voir Pixave et Pomme les sites Web ci-dessus se composent généralement d’une grande image d’arrière-plan, d’un titre ou d’un slogan et d’une description. Les mises en page des héros sont souvent accompagnées d’un appel à l’action.

Si vous avez besoin d’expliquer clairement ce que vous proposez sur votre page d’accueil ou votre page de destination d’une manière qui attirera l’attention, alors une image de héros pourrait bien être le chemin à parcourir. Cependant, c’est probablement l’étendue de leur utilisation.

Parfois, vous verrez la disposition des héros utilisée sur les pages suivantes. Mais, dans la plupart des cas, l’image du héros détourne simplement l’attention d’un contenu plus précieux. À utiliser donc avec précaution.

Hormis cela, il y a un petit inconvénient à utiliser une disposition de héros. Oui, ils sont courants, mais les utilisateurs les connaissent et ils sont efficaces.

Une option de mise en page considérablement moins courante est la mise en page à écran partagé.

9. Disposition de l’écran partagé

Comme la mise en page plein écran, un écran partagé est un excellent moyen d’attirer l’attention lorsque les utilisateurs arrivent pour la première fois sur votre site Web, comme vous pouvez le voir sur le page d’accueil de la société de conception web au dessous de.

Ce site utilise la disposition en écran partagé pour expliquer les deux parties de leur offre.

Ce qui rend l’exemple ci-dessus si efficace, c’est qu’il y a une raison claire à la disposition de l’écran partagé. Le site Web indique clairement qu’il y a deux aspects à leur entreprise: la conception et le développement.

Un exemple similaire est lorsque vous souhaitez donner aux utilisateurs un choix binaire clair. Un écran partagé a beaucoup de sens dans cette situation car il divise l’écran également entre les deux options.

Par exemple, l’agence de mannequins 62 Gestion utilise un écran partagé pour encourager les utilisateurs à identifier s’ils recherchent un modèle masculin ou féminin.

62 La direction utilise une conception à écran partagé pour encourager les utilisateurs à choisir entre deux options.

Malheureusement, au-delà de ce nombre limité d’applications, il n’y a pas de raison d’adopter une conception à écran partagé. Il s’agit d’une option de mise en page relativement limitative, et il n’y a tout simplement pas beaucoup de scénarios où elle est appropriée. Cependant, dans les cas où il est, c’est de loin le meilleur choix.

Une option similaire qui offrirait un peu plus de flexibilité est la disposition asymétrique.

10. Disposition asymétrique

Alors que la disposition de l’écran divisé force une division égale au milieu de la fenêtre, une conception asymétrique vous permet de diviser l’écran comme bon vous semble.

L’avantage de cette mise en page par rapport à l’écran partagé est qu’elle permet de mettre l’accent sur un côté particulier de la page. Plus un côté possède de biens immobiliers, plus vous vous concentrez sur lui. Cela, à son tour, vous permet d’identifier le contenu principal et secondaire.

Avec la prémisse des colonnes primaires et secondaires en place, vous pouvez utiliser l’approche de plusieurs manières. Par exemple, Félix Lesouef utilise la méthode sur son site pour partager entre contenu et navigation.

Félix Lesouef utilise une mise en page asymétrique pour mettre en valeur la navigation de ses sites.

En revanche, le Nourish Eats site Web utilise la deuxième colonne pour vous permettre de voir la section suivante de son site Web.

Nourish Eats utilise cette approche de mise en page pour exposer le contenu secondaire de manière plus visible.

À bien des égards, la disposition asymétrique est un excellent choix. Il est flexible, relativement facile à mettre en œuvre et moins utilisé. C’est un moyen pratique de rendre votre site Web différent sans les maux de tête de certains des autres choix.

Comment choisir une mise en page

En lisant cet article, vous avez fait votre première étape pour choisir la bonne mise en page pour votre site. Vous avez appris quel type d’options s’offrent à vous.

Ensuite, vous devez savoir quelles options peuvent être appropriées pour votre site. Une façon de le faire est de regarder vos concurrents. Cependant, je vous conseillerais de ne pas vous arrêter là. Le danger est que vous les copiez, ce qui vous mettra toujours un pas en arrière.

Jetez plutôt un œil aux sites d’autres secteurs qui ont des types de contenu associés aux vôtres. Si tu as un site de brochures destiné à un public B2B, jetez un oeil à d’autres sites similaires. De même, si vous avez un site de commerce électronique, regardez le commerce électronique dans d’autres secteurs.

À partir de là, travaillez avec votre designer pour expérimenter différentes approches. Demandez-leur de créer des idées filaires basées sur différentes mises en page et de voir ce qui convient le mieux à votre contenu.

Si vous vous trouvez incapable de prendre une décision ou manquez de confiance dans la bonne direction, essayez de mettre les options devant certains utilisateurs et obtenez leurs réactions. Ne vous contentez pas de leur demander ce qu’ils préfèrent, demandez-leur également s’ils ont repéré du contenu critique ou compris ce qu’était l’entreprise.

En vérité, vous vous retrouverez probablement à choisir et à choisir parmi différentes approches de mise en page pour différentes parties de votre site Web, et c’est correct. Parce que quand il s’agit de la mise en page d’un site Web, il est essentiel d’utiliser le bon au bon moment.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map