10 Exemples de mise en page du site Web Rock Solid

Advertisement

Layout peut être l'un des plus faciles et l'un des facettes les plus délicates de la conception web. Parfois, un concepteur peut bust out une mise en page étonnante en quelques minutes et parfois même concepteur peut lutter pour la meilleure partie de la journée avec la même tâche.

Chaque projet est unique et nécessite une solution unique, mais j'ai trouvé utile de garder quelques roches solides et incroyablement polyvalents alignements à l'esprit que je peux bust out quand je suis coincé. Les dix mises en page ci-dessous devrait être suffisant pour vous aider à traverser même les pires cas de bloc de concepteur quand vous ne pouvez pas trouver la meilleure façon d'organiser le contenu sur votre page.

Suiv.

La mise en page est à parts égales l'art et la science. Créer quelque chose qui est visuellement attrayant et unique prend un oeil d'artiste. Cependant, il existe plusieurs lignes directrices très faciles à suivre que vous pouvez utiliser pour créer des mises en page solides qui fonctionnent pour n'importe quel nombre de cas. Ces principes comprennent le choix et le collage à un alignement, la structuration de votre espace blanc correctement et la mise en évidence des éléments importants à travers la taille, le positionnement, etc

Les concepteurs soulignent souvent beaucoup trop sur le processus de mise en page. Nous avons tendance à aborder un projet tout en pensant qu'il doit être tout à fait unique à tous égards pour valoir notre temps et l'argent du client. Toutefois, si vous avez un bon regard sur le web, vous verrez que ce n'est pas nécessairement le cas. Grands sites à la recherche utilisent souvent des mises en page qui sont assez simples et pas le moins unique. Il est vrai que les pages que nous, les concepteurs, nous émerveillons le plus souvent, proviennent souvent des sites particuliers qui brisent le moule, mais votre client moyen veut juste quelque chose d'utilisable, propre et professionnel.

Dans cet article, nous allons jeter un oeil à dix dispositions très communes que vous pouvez trouver sur d'innombrables sites sur le web. Notez que la façon dont ces sites sont stylisés, c'est-à-dire les couleurs, les graphiques et les polices, est unique, mais la structure de base des sites eux-mêmes est basée sur des méthodes éprouvées et vraies pour la mise en page. Nous allons souligner cela en vous montrant une silhouette simple de la mise en page afin que vous puissiez projeter vos propres pensées et dessins sur elle, alors nous allons le suivre avec un ou deux exemples de sites réels qui utilisent la mise en page.

Si vous êtes concepteur de sites Web, mettez cette page en signet et revenez la prochaine fois que vous vous retrouverez coincé sur une page. Gardez à l'esprit que chacun des schémas suivants représente une suggestion de base pour vous de moule et de modifier. Je vous encourage à ne pas les utiliser comme il est, mais mettre votre propre spin sur eux 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 besoins. Si tel est le cas, vous serez surpris si vous vraiment réfléchir à la polyvalence de l'arrangement est vraiment.

La disposition de trois boîtes comporte une zone graphique principale suivie par deux boîtes plus petites en dessous. Chacun d'eux peut être rempli d'un graphique, d'un bloc de texte ou d'un mélange des deux. La boîte principale de cette mise en page est souvent un curseur jQuery, capable de présenter autant de contenu que vous le souhaitez!

Les formes en silhouettes le long du haut sont des zones qui peuvent être utilisés pour les logos, les noms de sociétés, la navigation, les barres de recherche et tout autre contenu informationnel et fonctionnel généralement sur un site Web.

10 Exemples de mise en page du site Web Rock Solid

Cette conception est idéale pour une page de portfolio ou n'importe quoi qui a besoin de montrer quelques graphiques d'échantillon. Chacune des images pourrait être un lien qui mène à une page de galerie plus grande et plus complexe. Plus tard dans l'article, nous allons voir comment mélanger cette idée encore plus loin.

Dans la nature

Ci-dessous nous voyons une belle mise en œuvre de la mise en page trois boîtes dans le portefeuille de Peter Verkuilen. Comme indiqué ci-dessus, le graphique principal tourne et affiche un certain nombre de projets récents de Peter. En cliquant sur l'une des cases, vous accédez à la page consacrée à ce projet, où vous pouvez trouver plus d'informations.

Simple, efficace et attrayant. Vous pouvez probablement retirer une page web complète, en direct avec cette mise en page en moins d'une heure!

10 Exemples de mise en page du site Web Rock Solid


Prenez un modèle

Une façon rapide de démarrer avec ce type de mise en page est avec un modèle HTML. Genius est un modèle d'affaires minimal et entièrement réactif pour les entreprises, les agences, les pigistes et les particuliers. Il est très facile à personnaliser et bien documenté, et il est simple de l'organiser dans n'importe quel type de grille que vous souhaitez!

10 Exemples de mise en page du site Web Rock Solid


3D Captures d'écran

Comme les développeurs continuent à créer une collection sans fin de webapps, la capture d'écran 3D vue ci-dessous, ou une variante de celui-ci, devient de plus en plus populaire. L'idée de base est de mettre en page votre page avec un titre et puis toss dans certains aperçus stylisés de votre application. Ceux-ci viennent souvent avec des reflets, des ombres lourdes, de grands graphiques d'arrière-plan, ou même des ornements complexes tels que des vignes rampant partout dans les captures d'écran, mais l'idée de base est toujours très simple.

10 Exemples de mise en page du site Web Rock Solid

Un autre endroit que je vois ce truc utilisé beaucoup est dans les thèmes pré-construits. Dans ces cas, un concepteur vend une disposition de stock et a vraiment besoin de ses graphiques placeholder à briller, et rien ne dit cool et moderne comme quelques effets 3D fantaisie!

Dans la nature

Pixelworkshop utilise cette technique, non pas comme un thème stock, mais pour mettre en valeur les thèmes stock! Ici, les captures d'écran 3D swap dans un diaporama et viennent dans un certain nombre d'arrangements différents. Arrêtez-vous et jetez un coup d'oeil pour voir toutes les différentes manières le concepteur présente les images.

10 Exemples de mise en page du site Web Rock Solid


Grille avancée

Plusieurs des mises en page que vous verrez dans cet article adhèrent à un alignement de grille assez strict. Cependant, pour la plupart, ils ne proposent pas simplement une page pleine de vignettes uniformes. Par exemple, la mise en page ci-dessous mélange la taille des images pour éviter la redondance.

Comme avec l'exemple de trois boîtes, il ya un graphique principal en haut de la page. Ceci est suivi d'une simple torsion sur l'idée d'une grille uniforme de vignettes. L'espace permettrait une palette de quatre carrés horizontalement, mais au lieu de cela, nous avons combiné les deux premiers domaines de sorte que la moitié gauche de la page diffère de la droite.

10 Exemples de mise en page du site Web Rock Solid

Comme nous l'avons mentionné avec la première mise en page, les blocs n'ont pas besoin d'être des images. Par exemple, vous pouvez l'imaginer sous forme de blocs de texte sur les images de gauche à droite.

Dans la nature

Dans l'exemple magnifique ci-dessous, cette disposition est utilisée pour un site Web de vêtements pour enfants. Notez que près du bas de l'alignement, ils ont changé les choses encore plus loin de sorte que le côté gauche dispose d'une image presque étrangement de taille suivie par un paragraphe, aucun d'entre eux parfaitement aligné avec le contenu sur le côté droit.

Encore une fois, une fois que vous avez votre disposition de base à l'esprit, vous pouvez faire des changements subtils comme celui-ci tout en maintenant l'intégrité de la structure sous-jacente. Un autre truc intéressant qu'ils ont utilisé était de diviser le graphique principal en deux domaines. C'est en fait tout un JPG, mais il a été divisé en deux images pour montrer encore plus de contenu.

10 Exemples de mise en page du site Web Rock Solid


Prenez un modèle

Une façon rapide de démarrer avec ce type de mise en page est avec un modèle HTML. GoodFood est un modèle qui correspond parfaitement à ce thème - l'exemple utilisé est pour un site Web de nourriture et de boisson, mais il serait idéal pour tout type de thème de site Web!

10 Exemples de mise en page du site Web Rock Solid


Graphique en vedette

Parfois, vous n'avez pas assez de contenu pour une page pleine d'images. Alors, que faites-vous si vous voulez présenter une icône, une photo ou peut-être même un symbole comme une esperluette? La mise en page ci-dessous est une solution super facile qui est très populaire et lit très bien en raison du manque de distractions.

10 Exemples de mise en page du site Web Rock Solid

Le résultat est une page qui est audacieux, mais minimal et propre. La déclaration qu'il rend est forte et impossible à manquer, il suffit de vous assurer que votre graphique est assez bon pour être mis en vedette si en vue!

Dans la nature

Juste comment commune est cette mise en page? Beaucoup plus que vous ne le pensez! Avec un effort minimal j'ai été immédiatement capable de trouver deux sites qui utilisent une variante proche de cette technique. Notez que vous avez des options pour la façon dont vous souhaitez formater le texte et même où vous souhaitez placer la navigation. Le deuxième site réorganise un peu les éléments secondaires mais il est instantanément reconnaissable comme la même disposition de base.

10 Exemples de mise en page du site Web Rock Solid

10 Exemples de mise en page du site Web Rock Solid


Prenez un modèle

Une façon rapide de démarrer avec ce type de mise en page est avec un modèle HTML. Motive est un modèle de portfolio HTML minimaliste parfait pour les sites Web d'agence ou personnels. Ce modèle comprend une section complète du portefeuille avec la page de détail du filtre et du portefeuille. Également inclus dans le modèle sont une page et des sections de blog permettant au modèle d'être utilisé pour un blog au lieu d'un portefeuille. Beaucoup de personnalisation est inclus avec documentation complète pour aider.

10 Exemples de mise en page du site Web Rock Solid


Cinq boîtes

La mise en page de cinq boîtes est simplement une évolution de la disposition des trois boîtes. La même logique s'applique, elle vient d'être modifiée pour contenir encore plus de contenu. Il pourrait facilement être quatre boîtes ainsi, il ne dépend que de ce que vous voulez présenter. Il fait également ressembler à vous mettre un peu plus d'effort dans la conception!

De toute évidence, comme vous ajoutez à la mise en page, les éléments secondaires deviennent de plus en plus petits pour la plupart des utilisations, cinq boîtes va probablement approcher la limite.

10 Exemples de mise en page du site Web Rock Solid

Tout comme avec la mise en page trois boîtes, celui-ci est tellement polyvalent qu'il peut littéralement être utilisé sur n'importe quel type de site. Les idées pour la commutation vers le haut incluent l'ajout d'un grand graphique de fond, arrondissant les coins, ajoutant des ombres et / ou des reflets, ou même ajoutant un élément interactif aux petites vignettes. Vous pouvez facilement ajouter des boutons qui les font défiler horizontalement.

Dans la nature

Ici encore, nous avons deux exemples de cette disposition étant utilisé de façons légèrement différentes. La grande chose à noter ici, c'est que malgré les dispositions similaires, ces deux sites ne pouvaient presque pas apparaître plus différent les uns des autres si elles ont essayé. On utilise un style d'illustration tiré à la main, les autres photographies et les dégradés. Le premier utilise des couleurs muettes et des polices de script, les deuxièmes couleurs vives et des polices modernes.

Cela conduit à la maison l'argument que l'utilisation d'une des dispositions de cet article ne sera pas tuer votre créativité. Une fois que vous avez arrangé le contenu, il ya encore beaucoup à faire dans le domaine de l'esthétique. C'est ce qui va vraiment définir la personnalité du site et souvent faire ou casser une proposition de client.

10 Exemples de mise en page du site Web Rock Solid

10 Exemples de mise en page du site Web Rock Solid


Prenez un modèle

Une façon rapide de démarrer avec ce type de mise en page est avec un modèle HTML. Phoebe est un modèle de Blogger propre et minimal, rempli de nombreuses fonctionnalités comme un curseur de messages en vedette automatique et un espace promotionnel (les deux sont optionnels). 4 styles de page d'accueil à choisir (curseur + zone promo, curseur uniquement, zone promotionnelle ou mise en page classique).

10 Exemples de mise en page du site Web Rock Solid


Barre fixe

Jusqu'à présent, tous les sites que nous avons vu ont eu une navigation horizontale supérieure. L'autre option populaire est naturellement une navigation verticale, qui se prête à créer une colonne verticale forte sur le côté gauche de la page. Souvent, il s'agit d'un élément fixe qui reste là où il est tandis que le reste de la page défile. La raison en est que la navigation peut rester facilement accessible à partir de n'importe quel point du site.

10 Exemples de mise en page du site Web Rock Solid

Le reste du contenu peut emprunter à l'une des autres mises en page de cette liste. Notez que j'ai encore modifié la mise en page trois boîtes, cette fois dans un arrangement de quatre boîtes. Une fois que vous avez terminé de lire cet article, regardez toutes les mises en page à nouveau et réfléchissez à la façon dont vous pouvez mélanger et combiner 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 sont réellement très différents, même du point de vue de la mise en page. Toutefois, si vous regardez à nouveau, vous remarquerez qu'ils utilisent tous deux une barre latérale verticale gauche et la disposition de la boîte quatre. Le deuxième exemple a simplement déplacé les petites boîtes vers le haut de la page! Encore une autre idée intéressante que vous devriez garder à l'esprit lors de la création d'un site basé sur ces exemples.

10 Exemples de mise en page du site Web Rock Solid

10 Exemples de mise en page du site Web Rock Solid


Prenez un modèle

Une façon rapide de démarrer avec ce type de mise en page est avec un modèle HTML. Pebbles est un modèle unique de blogger portefeuille, axé sur le minimalisme, l'élégance et la simplicité. Il est créé autour d'un concept modulaire et d'une grille étonnante de portefeuille de maçonnerie. Emballé avec beaucoup de caractéristiques étonnantes, ce modèle offre la meilleure solution pour n'importe quelle niche.

10 Exemples de mise en page du site Web Rock Solid


Titre et galerie

Tout le monde aime une bonne page de galerie. D'un point de vue de mise en page, ce qui pourrait être plus simple? Tout ce dont vous avez besoin est une grille d'images solide et uniforme et une certaine place pour un titre avec une sous-tête facultative. La clé ici est de rendre votre titre gros et audacieux. N'hésitez pas à utiliser cela comme un point de créativité et d'inclure un script ou un type de caractère fou.

10 Exemples de mise en page du site Web Rock Solid

Cet exemple utilise des rectangles squished pour mettre en miroir le site réel ci-dessous, mais cela peut et doit être modifié pour s'adapter à ce que vous affichez. Le point ici est de vous faire penser à l'extérieur de la boîte et pas par défaut à un carré, peut-être vous pouvez 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 des logos pour les clients avec lesquels il a travaillé. Notez qu'il ne suggère pas qu'il a créé les logos, mais est simplement montrer sa clientèle de manière très visuelle. Cela va montrer que même si vous n'êtes pas un concepteur, une galerie de miniatures pourrait être un excellent moyen de présenter une liste autrement simple et ennuyeuse d'articles.

10 Exemples de mise en page du site Web Rock Solid


Prenez un modèle

Une façon rapide de démarrer avec ce type de mise en page est avec un modèle HTML. Proton est un thème créatif de haute qualité avec un style unique et un code propre. Proton peut être utilisé à de nombreuses fins à partir de portefeuilles minimales, agences, pigistes et bien plus encore. Le modèle est créé et testé dans tous les périphériques et fonctionne parfaitement sans un seul problème.

10 Exemples de mise en page du site Web Rock Solid


Photo en vedette

La mise en page ci-dessous est extrêmement fréquente, en particulier parmi la communauté de la photographie. L'idée de base ici est d'avoir une grande image affichant soit votre conception ou la photographie (quoi que ce soit vraiment), accompagné d'une navigation verticale gauche.

10 Exemples de mise en page du site Web Rock Solid

La navigation peut être la plus forte dans un alignement à gauche, mais n'hésitez pas à expérimenter avec un centre ou alignement droit même pour compléter le bord droit de la photo.

Dans la nature

Le site ci-dessous fait vraiment le plus de cette mise en page en tournant l'une des images en vedette dans un curseur horizontal. Une image est présentée à la fois, mais vous pouvez voir la prochaine pointe sur le côté droit de la page. Lorsque vous passez la souris dessus, une flèche apparaît qui vous permet de glisser à travers les photos.

Comme alternative, pourquoi ne pas essayer de faire un site qui utilise cette même disposition, mais avec une galerie d'images coulissant verticalement? L'espace semble presque plus adapté à cela car vous n'aurez pas à inclure une zone de coupure maladroite pour protéger la navigation.

10 Exemples de mise en page du site Web Rock Solid


Grille d'alimentation

Le réseau électrique est la mise en page la plus complexe de cet article, mais c'est l'un des schémas les plus efficaces que j'ai vu pour les pages qui doivent contenir toutes sortes de contenu connexe. Des images et des lecteurs de musique au texte et aux vidéos, vous pouvez introduire n'importe quoi dans cette mise en page et elle reste forte.

10 Exemples de mise en page du site Web Rock Solid

La clé se trouve dans la moitié inférieure de l'aperçu ci-dessus. Notez qu'il ya réellement 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 à l'intérieur doit être formaté dans une grille forte mais variée, contrairement à la mise en page avancée près du début de cet article.

Dans la nature

Celui-ci peut être vraiment difficile à envelopper votre esprit autour jusqu'à ce que vous voyez quelques exemples vivants. Le premier est une vitrine de l'art et de la culture. Cette description seule nous dit que le contenu va être partout, et en effet, nous voyons que la page est remplie de flux Twitter, des photos, des listes, des images et plus encore.

Cependant, tout s'intègre étroitement à l'intérieur de la grille que le concepteur a établie. Cette disposition est facilement extensible de telle sorte que peu importe combien vous jeter à elle, l'apparence générale devrait rester assez logique et épurée, aussi longtemps que vous le format et organiser votre contenu correctement.

10 Exemples de mise en page du site Web Rock Solid

Cette disposition ci-dessus fortement m'a rappelé un tutoriel que j'ai écrit il ya un certain temps sur la conception d'un site Web pour un groupe de rock. Ici nous avons une page très différente, mais un arrangement presque identique de contenu, en particulier dans la moitié inférieure. Le vrai truc pour tirer cette disposition de droit est de commencer avec quelques boîtes vraiment grandes, qui sont ensuite divisés en de plus petites zones de contenu au besoin.

Si vous vous sentez encore perdu, consultez le tutoriel complet, qui vous guidera à travers chaque étape du processus.

10 Exemples de mise en page du site Web Rock Solid

Prenez un modèle

Une façon rapide de démarrer avec ce type de mise en page est avec un modèle HTML. PunicPress est un modèle HTML5 & CSS3 entièrement réactive qui est vraiment bien adapté pour la planification de démarrer un site de nouvelles en ligne ou un magazine.

10 Exemples de mise en page du site Web Rock Solid


Photo plein écran

La disposition finale sur la liste est une autre qui convient parfaitement aux photographes, mais fonctionnera sur n'importe quel site avec un grand graphique d'arrière-plan attrayant à afficher et une quantité limitée de contenu.

Il peut être vraiment difficile de lire le contenu lorsqu'il est posé sur une image de fond, donc l'idée de base ici est de créer une barre horizontale opaque (ou presque opaque) qui se trouve sur le dessus de l'image et sert de conteneur pour les liens, copie , Logos et autres contenus.

10 Exemples de mise en page du site Web Rock Solid

Plutôt que d'utiliser la barre comme une zone de contenu vraiment large, essayez de le diviser en quelques sections différentes. Cela peut être fait en faisant varier la couleur d'arrière-plan, en ajoutant quelques lignes verticales subtiles comme des diviseurs ou même effectivement briser la grande boîte en plus petites boîtes déconnectées comme je l'ai fait ci-dessus.

Dans la nature

Cette disposition pourrait se sentir incroyablement restrictive, mais en dessous, nous avons un aperçu de combien il peut contenir. Ce site de photographie remplit la barre de navigation, un bloc de texte "About", quelques photos récentes avec des descriptions et un grand logo! Pas mal pour un si petit espace, et il tire tout cela d'une manière très propre et non encombrée.

10 Exemples de mise en page du site Web Rock Solid


Prenez un modèle

Une façon rapide de démarrer avec ce type de mise en page est avec un modèle HTML. Ce modèle d'une page est excellent pour le portefeuille ou la photographie des sites Web basés. Les sections incluses dans le modèle incluent à propos de nous, les services offerts, les derniers travaux, les témoignages, un formulaire de contact aJax de travail, une page de portefeuille unique, différents styles de page d'actualité et bien plus encore.

10 Exemples de mise en page du site Web Rock Solid


Conclusion

Il y a eu quelques points clés que je voudrais répéter en terminant. Tout d'abord, même si la mise en page n'est pas nécessairement une pratique unique, il existe une science qui peut être appliquée rapidement et facilement dans un nombre incroyablement grand de circonstances.

Ensuite, les idées de mise en page présentées ci-dessus ne doivent pas se traduire par des sites Web de coupe-biscuits qui semblent tous les mêmes, mais au lieu de vous fournir simplement une toile de base sur lequel construire un design particulièrement unique fini.

Enfin, la clé de la réussite de la mise en œuvre de ces idées est de se rappeler qu'ils ne sont pas mis en pierre. Chacun doit être modifié pour s'adapter à votre projet spécifique et peut même être mélangé et assorti pour créer de nouvelles idées!

Laissez un commentaire ci-dessous et faites-nous savoir ce que vous pensez des mises en page ci-dessus. Y at-il aucun non mentionné ci-dessus que vous par défaut à quand vous avez des problèmes? Laissez un lien vers un exemple.