La mise en page peut être l’une des facettes les plus faciles et les plus délicates de la conception Web. Parfois, un concepteur peut découper une mise en page incroyable en quelques minutes et parfois, ce même concepteur peut lutter pour la plus grande partie de la journée avec la même tâche.
Chaque projet est unique et appelle une solution unique, mais j’ai trouvé utile de garder quelques alignements solides et incroyablement polyvalents à l’esprit, afin que je puisse me dégonfler lorsque je suis coincé. Les dix mises en page ci-dessous devraient suffire à vous aider à surmonter les pires blocages du concepteur lorsque vous ne savez pas comment organiser le contenu de votre page.
Garder les choses simples
La mise en page est à la fois un art et une science. Créer quelque chose qui est visuellement attrayant et unique prend le regard de l'artiste. Cependant, il existe plusieurs directives très faciles à suivre que vous pouvez utiliser pour créer des présentations solides qui fonctionnent pour un nombre quelconque de cas. Ces principes incluent le choix et le respect d'un alignement, la structuration appropriée de vos espaces et la mise en évidence d'éléments importants par la taille, le positionnement, etc.
Les concepteurs insistent souvent beaucoup trop sur le processus de mise en page. Nous avons tendance à aborder un projet en pensant qu'il doit être absolument unique à tous égards pour valoir notre temps et l'argent du client. Cependant, si vous regardez bien sur le Web, vous verrez que ce n'est pas nécessairement le cas. Les sites Web attrayants utilisent souvent des modèles assez simples et pas du tout uniques. Il est vrai que les pages les plus émerveillées par nos concepteurs proviennent souvent de sites particuliers qui brisent le moule, mais votre client moyen ne souhaite que quelque chose d’utilisable, de propre et de professionnel.
Dans cet article, nous allons examiner dix configurations très courantes que vous pouvez trouver sur d'innombrables sites sur le Web. Notez que la façon dont ces sites sont stylés, c'est-à-dire couleurs, graphiques et polices, est unique, mais la structure de base des sites eux-mêmes repose sur des méthodes éprouvées de présentation d'une page Web. Nous soulignerons cela en vous montrant d'abord une silhouette simple de la mise en page afin que vous puissiez projeter vos propres idées et conceptions, puis nous suivrons avec un ou deux exemples de sites réels utilisant la mise en page.
Si vous êtes un concepteur de sites Web, ajoutez cette page à vos signets et revenez la prochaine fois que vous serez bloqué pour la mise en page. N'oubliez pas que chacune des dispositions suivantes représente une suggestion de base à modeler et à modifier. Je vous encourage à ne pas les utiliser tels quels, mais à les personnaliser en fonction des besoins de votre projet.
Trois boîtes
C'est probablement la mise en page la plus simple de la liste. En fait, vous serez tenté de penser que c'est beaucoup trop simple pour répondre à vos propres besoins. Si tel est le cas, vous serez surpris si vous réfléchissez vraiment à la polyvalence de cet arrangement.
La disposition des trois cases comporte une zone graphique principale suivie de deux plus petites cases en dessous. Chacun de ceux-ci peut être rempli avec un graphique, un bloc de texte ou un mélange des deux. La zone principale de cette présentation est souvent un curseur jQuery, capable de présenter autant de contenu que vous le souhaitez!
Les formes en silhouette en haut représentent des zones utilisables pour les logos, les noms de société, la navigation, les barres de recherche et tout autre contenu informatif et fonctionnel généralement présent sur un site Web.
Cette conception est idéale pour une page de portfolio ou pour tout ce qui doit montrer quelques exemples de graphiques. Chacune des images pourrait être un lien menant à une page de galerie plus grande et plus complexe. Nous verrons plus loin dans cet article comment mélanger davantage cette idée.
Dans la nature
Ci-dessous, nous voyons une belle implémentation de la mise en page à trois cases du portefeuille de Peter Verkuilen. Comme suggéré ci-dessus, le graphique principal pivote et affiche un certain nombre de projets récents de Peter. En cliquant sur l'une des cases, vous accédez à la page dédiée de ce projet où vous pouvez trouver plus d'informations.
Simple, efficace et attrayant. Vous pouvez probablement créer une page Web complète en direct avec cette présentation en moins d’une heure!
Prenez un modèle
Un moyen rapide de commencer avec ce type de disposition consiste à utiliser un modèle HTML. Genius est un modèle d’affaires minimal et totalement réactif pour les entreprises, les agences, les pigistes et les particuliers. Il est très facile à personnaliser et à documenter, et il est simple de l’organiser dans n’importe quel type de grille que vous souhaitez!
Captures d'écran 3D
Alors que les développeurs continuent de créer une collection infinie d'applications Web, la disposition des captures d'écran 3D ci-dessous, ou une variante de celle-ci, devient de plus en plus populaire. L'idée de base est de couvrir votre page avec un titre, puis d'ajouter des aperçus stylisés de votre application. Ceux-ci viennent souvent avec des reflets, des ombres prononcées, de grands graphiques d'arrière-plan ou même des ornements complexes tels que des vignes rampant partout sur les captures d'écran, mais l'idée de base est toujours très simple.
Je vois un autre endroit où cette astuce est souvent utilisée: les thèmes prédéfinis. Dans ces cas, un concepteur vend une mise en page de stock et a vraiment besoin de son graphisme d'espace réservé pour briller, et rien ne dit cool et moderne comme des effets 3D fantaisistes!
Dans la nature
Pixelworkshop utilise cette technique, non pas comme thème de stock, mais pour mettre en valeur les thèmes de stock! Ici, les captures d'écran 3D sont échangées dans un diaporama et présentées sous différentes configurations. Arrêtez-vous et jetez un coup d'oeil pour voir toutes les différentes façons dont le concepteur présente les images.
Grille avancée
La plupart des mises en page que vous verrez dans cet article adhèrent à un alignement de grille assez strict. Cependant, dans la plupart des cas, ils ne suggèrent pas simplement une page remplie de vignettes uniformes. Par exemple, la mise en page ci-dessous mélange la taille des images pour éviter les redondances.
Comme dans l'exemple des trois zones, il y a un graphique principal en haut de la page. Ceci est suivi par une simple modification de l’idée d’une grille uniforme de vignettes.L'espace permettrait une étendue de quatre carrés horizontalement, mais nous avons plutôt combiné les deux premières zones de sorte que la moitié gauche de la page diffère de la droite.
Comme nous l'avons mentionné avec la première mise en page, les blocs ne doivent pas nécessairement être des images. Par exemple, vous pouvez imaginer cela sous la forme de blocs de texte situés à gauche, sur la droite des images carrées.
Dans la nature
Dans l'exemple ci-dessous, cette présentation est utilisée pour un site Web de vêtements pour enfants. Notez que près du bas de l'alignement, ils ont encore basculé les choses afin que le côté gauche présente une image de taille presque étrange suivie d'un paragraphe, aucun des deux n'étant parfaitement aligné avec le contenu du côté droit.
Encore une fois, une fois que vous avez pensé à la structure de base, vous pouvez apporter de tels changements tout en maintenant l’intégrité de la structure sous-jacente. Une autre astuce intéressante utilisée consistait à diviser le graphique principal en deux zones. Il s’agit en réalité d’un seul fichier JPG, mais il a été divisé en deux images pour afficher encore plus de contenu.
Prenez un modèle
Un moyen rapide de commencer avec ce type de disposition consiste à utiliser un modèle HTML. GoodFood est un modèle qui correspond parfaitement à ce thème. L'exemple utilisé est celui d'un site Web de restauration et de boissons, mais il conviendrait parfaitement à tout type de thème de site Web!
Graphique présenté
Parfois, vous n'avez pas assez de contenu pour une page contenant des images. Alors, que faites-vous si vous souhaitez présenter une icône, une photo ou peut-être même un symbole tel qu'une esperluette? La mise en page ci-dessous est une solution très simple, très populaire et qui se lit très bien en raison du manque de distractions.
Le résultat est une page audacieuse, mais minimale et propre. La déclaration qu'il fait est forte et impossible à manquer, assurez-vous simplement que votre graphique est suffisamment bon pour être présenté aussi en évidence!
Dans la nature
À quel point cette disposition est-elle courante? Beaucoup plus que vous ne le pensez! Avec un minimum d'effort, j'ai immédiatement pu créer deux sites utilisant une variante proche de cette technique. Notez que vous avez des options sur la manière dont vous voulez formater le texte et même où vous voulez placer la navigation. Le deuxième site réorganise un peu les éléments secondaires, mais il est immédiatement reconnaissable comme la même disposition de base.
Prenez un modèle
Un moyen rapide de commencer avec ce type de disposition consiste à utiliser un modèle HTML. Motive est un modèle HTML de portefeuille minimaliste, idéal pour les sites Web d'agence ou personnels. Ce modèle comporte une section complète du portefeuille avec un filtre et une page de détails du portefeuille. Le modèle contient également une section sur la page et les sections de blog permettant d’utiliser le modèle pour un blog au lieu d’un portefeuille. De nombreuses personnalisations sont incluses avec une documentation complète pour vous aider.
Cinq boîtes
La disposition des cinq cases est simplement une évolution de la disposition des trois cases. La même logique s'applique, elle vient d'être modifiée pour contenir encore plus de contenu. Cela pourrait facilement être aussi quatre cases, cela dépend de ce que vous voulez présenter. Cela donne également l’impression que vous avez mis un peu plus d’effort dans la conception!
Évidemment, au fur et à mesure que vous ajoutez à la mise en page, les éléments secondaires deviennent de plus en plus petits, de sorte que pour la plupart des utilisations, cinq boîtes vont probablement se rapprocher de la limite.
Comme avec la disposition à trois cases, celle-ci est si polyvalente qu'elle peut être utilisée littéralement sur n'importe quel type de site. Parmi les idées pour le changer, vous pouvez ajouter un grand fond graphique, arrondir les coins, ajouter des ombres et / ou des reflets, ou peut-être même ajouter un élément interactif aux vignettes plus petites. Vous pouvez facilement ajouter des boutons qui les font défiler horizontalement.
Dans la nature
Ici encore, nous avons deux exemples d'utilisation de cette mise en page de manières légèrement différentes. La chose importante à noter ici est que, malgré des dispositions similaires, ces deux sites ne pourraient presque pas sembler plus différents l'un de l'autre s'ils essayaient. L'une utilise un style d'illustration dessiné à la main, l'autre des photographies et des dégradés. Le premier utilise des couleurs en sourdine et des polices de script, le second des couleurs vives et des polices modernes.
Cela fait bien comprendre que l’utilisation d’une des dispositions de cet article ne tue pas votre créativité. Une fois le contenu arrangé, il reste encore beaucoup à faire en matière d’esthétique. C'est ce qui va réellement définir la personnalité du site et souvent faire ou défaire une proposition client.
Prenez un modèle
Un moyen rapide de commencer avec ce type de disposition consiste à utiliser un modèle HTML. Phoebe est un modèle Blogger minimal et épuré, doté de nombreuses fonctionnalités, telles qu'un curseur automatique pour les messages en vedette et une zone de promotion (les deux sont facultatifs). Choix de 4 styles de page d'accueil (curseur + zone de promotion, curseur uniquement, zone de promotion uniquement ou mise en page classique).
Barre latérale fixe
Jusqu'à présent, tous les sites que nous avons vus avaient une navigation horizontale vers le haut. L’autre option populaire est bien sûr une navigation verticale, qui permet de créer une colonne verticale puissante sur le côté gauche de la page. Il s'agit souvent d'un élément fixe qui reste là où il se trouve pendant le défilement du reste de la page. La raison en est que la navigation peut rester facilement accessible à partir de n’importe quel point du site.
Le reste du contenu peut être emprunté à l’une des autres mises en page de cette liste. Notez que j'ai à nouveau modifié la disposition des trois boîtes, cette fois dans un arrangement à quatre boîtes. Une fois que vous avez terminé de lire cet article, examinez à nouveau toutes les mises en page et réfléchissez à la manière dont vous pouvez mélanger et faire correspondre les idées pour créer de nouvelles mises en page.
Dans la nature
Comme dans l'exemple précédent, les deux sites ci-dessous ont en réalité une apparence très différente, même du point de vue de la présentation. Cependant, si vous regardez à nouveau, vous remarquerez qu'ils utilisent tous les deux une barre latérale verticale à gauche et la disposition à quatre cases.Le deuxième exemple a simplement déplacé les plus petites cases en haut de la page! Encore une autre idée intéressante à garder à l’esprit lorsque vous créez un site basé sur ces exemples.
Prenez un modèle
Un moyen rapide de commencer avec ce type de disposition consiste à utiliser un modèle HTML. Pebbles est un modèle de blogueur de portefeuille unique, axé sur le minimalisme, l'élégance et la simplicité. Il a été créé autour d’un concept modulaire et d’une étonnante grille de portefeuille en maçonnerie. Doté de nombreuses fonctionnalités étonnantes, ce modèle offre la meilleure solution pour toute niche.
Titre et galerie
Tout le monde aime une bonne page de galerie. Du point de vue de la mise en page, quoi de plus simple? Tout ce dont vous avez besoin est une grille d'images solide et uniforme et de la place pour un titre avec un sous-titre en option. La clé ici est de rendre votre titre gros et audacieux. N'hésitez pas à utiliser cela comme un point de créativité et à inclure un script ou une police de caractères loufoque.
Cet exemple utilise des rectangles écrasés pour refléter le site réel ci-dessous, mais cela peut et doit être modifié pour s’adapter à tout ce que vous exhibez. Le but ici est de vous amener à penser en dehors de la boîte et non pas par défaut à un carré, vous pourriez peut-être utiliser des rectangles verticaux ou même des cercles dans votre propre galerie!
Dans la nature
Le développeur ci-dessous a utilisé cette conception pour créer une galerie de logos pour les clients avec lesquels il a travaillé. Notez qu'il ne suggère pas qu'il a créé les logos, mais montre simplement sa clientèle de manière très visuelle. Cela montre que même si vous n'êtes pas un concepteur, une galerie de vignettes peut être un excellent moyen de présenter une liste d'éléments simples et ennuyeux.
Prenez un modèle
Un moyen rapide de commencer avec ce type de disposition consiste à utiliser un modèle HTML. Proton est un thème créatif de haute qualité avec un style unique et un code épuré. Proton peut être utilisé à diverses fins, à partir de portefeuilles minimes, d’agences, de pigistes et bien plus encore. Le modèle est créé et testé sur tous les appareils et fonctionne parfaitement sans problème.
Photo en vedette
La mise en page ci-dessous est extrêmement courante, en particulier dans le monde de la photographie. L'idée de base ici est d'avoir une grande image affichant soit votre design, soit votre photographie (quoi que ce soit vraiment), accompagnée d'une navigation verticale à gauche.
La navigation peut être la plus forte dans un alignement à gauche, mais n'hésitez pas à essayer un alignement au centre ou même à droite pour compléter le bord droit de la photo.
Dans la nature
Le site ci-dessous tire le meilleur parti de cette mise en page en transformant l'image sélectionnée en un curseur horizontal. Une image est présentée à la fois, mais vous pouvez voir la suivante en haut à droite de la page. Lorsque vous passez la souris dessus, une flèche apparaît pour vous permettre de faire défiler les photos.
Au lieu de cela, pourquoi ne pas essayer de créer un site qui utilise la même présentation mais avec une galerie d’images glissant verticalement? L'espace semble presque mieux adapté à cela car vous n'aurez pas à inclure de zone de coupure délicate pour protéger la navigation.
Réseau électrique
Le réseau électrique est la présentation la plus complexe de cet article, mais c’est l’une des dispositions les plus efficaces que j’ai jamais vue pour les pages devant contenir toutes sortes de contenus connexes. Des images et des lecteurs de musique aux textes et vidéos, vous pouvez insérer n'importe quoi dans cette mise en page et elle reste solide.
La clé se trouve dans la moitié inférieure de l'aperçu ci-dessus. Notez qu'il existe en fait un grand conteneur qui contient une série de rectangles. Ce conteneur vous fournit les limites de votre espace et tout le contenu que vous placez doit être mis en forme dans une grille solide mais variée, semblable à la présentation de grille avancée du début de cet article.
Dans la nature
Celui-ci peut être très difficile à comprendre jusqu'à ce que vous voyiez des exemples en direct. Le premier est une vitrine de l'art et de la culture. Cette description à elle seule nous indique que le contenu va être omniprésent, et nous voyons bien que la page est remplie de flux Twitter, de photos, de listes, d’images, etc.
Cependant, tout cela s'inscrit parfaitement dans la grille établie par le concepteur. Cette disposition est facilement extensible de sorte que, quelle que soit la manière dont vous la manipulez, l'apparence générale doit rester assez logique et épurée tant que vous formatez et organisez votre contenu correctement.
Cette mise en page ci-dessus m'a beaucoup rappelé un tutoriel que j'avais écrit il y a quelque temps sur la conception d'un site Web pour un groupe de rock. Nous avons ici une page très différente, mais un contenu presque identique, en particulier dans la moitié inférieure. Le vrai truc pour bien mettre en page cette présentation est de commencer par quelques très grandes boîtes, qui sont ensuite divisées en plusieurs zones de contenu, selon les besoins.
Si vous vous sentez toujours perdu, consultez le didacticiel complet, qui vous guidera à travers toutes les étapes du processus.
Prenez un modèle
Un moyen rapide de commencer avec ce type de disposition consiste à utiliser un modèle HTML. PunicPress est un modèle HTML5 et CSS3 entièrement réactif, qui convient parfaitement à la création d'un site Web d'actualités ou d'un magazine.
Photo plein écran
La mise en page finale de la liste en est une autre qui convient parfaitement aux photographes, mais fonctionnera sur n'importe quel site avec un fond graphique grand et attrayant à afficher et une quantité limitée de contenu.
Il peut être très difficile de lire le contenu s’il est superposé à une image d’arrière-plan. L’idée de base est donc de créer une barre horizontale opaque (ou presque opaque) qui repose sur l’image et sert de conteneur aux liens, copie. , logos et autres contenus.
Plutôt que d'utiliser la barre comme une zone de contenu très large, essayez de la diviser en plusieurs sections. Cela peut être fait en faisant varier la couleur de fond, en ajoutant des lignes verticales subtiles en tant que diviseurs ou même en divisant la grande boîte en boîtes plus petites déconnectées, comme je l’ai fait ci-dessus.
Dans la nature
Cette disposition peut sembler incroyablement contraignante, mais nous voyons ci-dessous à quel point elle peut tenir. Ce site de photographie remplit la barre avec la navigation, un? À propos? bloc de texte, quelques photos récentes avec des descriptions et un grand logo! Pas mal pour un si petit espace, et tout cela est enlevé de manière très propre et sans encombrement.
Prenez un modèle
Un moyen rapide de commencer avec ce type de disposition consiste à utiliser un modèle HTML. Ce modèle de page unique est excellent pour les sites Web basés sur le portfolio ou la photographie. Les sections incluses dans le modèle incluent des informations sur nous, les services proposés, les derniers travaux, des témoignages, un formulaire de contact aJax, une page de portfolio unique, différents styles de page d'actualités, et bien plus encore.
Conclusion
Je voudrais réitérer quelques points clés ci-dessus pour conclure. Tout d’abord, même si la mise en page n’est certainement pas nécessairement une? Taille unique? Dans la pratique, il existe une science qui peut être appliquée rapidement et facilement dans un très grand nombre de circonstances.
Ensuite, les idées de présentation présentées ci-dessus ne doivent pas nécessairement aboutir à des sites Web de type cookie cutter identiques, mais vous fournir simplement un canevas de base sur lequel vous pourrez construire un design final particulièrement unique.
Enfin, la clé de la réussite de la mise en œuvre de ces idées est de garder à l’esprit qu’elles ne sont pas immuables. Chacun doit être modifié pour correspondre à votre projet spécifique et peut même être mélangé et associé pour créer de nouvelles idées!
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez des schémas ci-dessus. Y a-t-il des personnes non mentionnées ci-dessus que vous utilisez par défaut lorsque vous avez des problèmes? Laissez un lien vers un exemple.