En tant qu'internautes avides, nous aimons une belle grille. Une disposition en grille organise le contenu d'une manière que nos yeux et notre cerveau comprennent naturellement, ce qui nous permet de digérer rapidement et efficacement le texte et les médias - il n'est pas étonnant que la plupart des sites Web les utilisent.
Pour les concepteurs Cependant, les grilles peuvent présenter un défi: est-il toujours possible d'être unique et créatif tout en restant dans les limites littérales des colonnes et des lignes?Si vous voulez tenter votre chance et repousser les limites de la conception sur votre site, vous voudrez peut-être essayer une disposition en grille cassée à la place.
Les grilles cassées ne sont pas solution parfaite pour chaque site Web, mais ceux qui veulent injecter un peu plus de personnalité et d'originalité dans leurs pages peuvent le faire dans la mise en page elle-même. Dans ce guide, nous allons apprendre comment briser la disposition de grille standard en faveur de quelque chose de différent.
Mais d'abord, examinons ce qu'une disposition de grille standard peut accomplir dans la conception Web, afin que nous sachions ce que nous essayez en fait de casser ici.
Qu'est-ce qu'une mise en page en grille?
Dans la conception Web, une mise en page en grille est un moyen de structurer et d'organiser le contenu d'une page tel que du texte, des images, des boutons, et d'autres éléments. Une disposition en grille segmente la page Web en colonnes de largeur égale. Les éléments sont placés et alignés dans les limites de ces colonnes.
La disposition de la grille est plus un concept qu'une méthode définie. Pour implémenter une disposition de grille, les concepteurs suivent un système de grille particulier, un ensemble de règles spécifiques sur la façon dont une grille doit être formatée.
De nombreux systèmes de grille sont utilisés aujourd'hui, l'un des plus populaires étant le 12 -colonne variante de le 960 Grid System .
Ce système divise la largeur de la page en 12 colonnes, chacune de 60 pixels de large, séparées par des espaces de 20 pixels. Les concepteurs appellent de manière peu flatteuse les espaces entre les colonnes comme des «gouttières.
Les systèmes de grille comme 960 sont très, très courants sur le Web - ils informent la conception de la grande majorité des sites Web. Bien qu'il soit difficile d'obtenir un décompte exact, je parierais qu'au moins neuf de vos 10 sites les plus fréquentés suivent probablement une disposition de grille dans une certaine mesure. Pour un exemple clair de grille fonctionnelle, ne cherchez pas plus loin que notre page de blog :
Mais pourquoi les grilles sont-elles si populaires en premier lieu? Une mise en page en grille permet aux concepteurs et développeurs Web de:
- créer des pages plus rapidement et plus facilement, sans avoir à réinventer la roue à chaque fois.
- organiser les éléments de page de différents types et tailles.
- ajuster l'espacement et la taille des éléments pour s'emboîter parfaitement.
- organiser le contenu qui aide les utilisateurs à parcourir et parcourir la page sans effort.
- suivre une pratique établie par les utilisateurs viens à attendre pendant que frère wsing.
Tous ces facteurs font de la grille une approche éprouvée de la conception de pages Web. Il est suffisamment flexible pour s'adapter à tout type de contenu, tout en étant suffisamment rigide pour que les sites Web restent intuitifs et navigables.
Cependant, aucune règle ne stipule que votre site Web doit suivre une disposition en grille. Si vous n'avez pas peur de créer davantage et de rompre avec les conventions pour créer un site qui se démarque, envisagez de «casser la grille».
Qu'est-ce que une disposition de grille cassée?
Une disposition de grille cassée est une disposition de page Web qui défie certaines normes d'une disposition de grille traditionnelle. Cela pourrait signifier l'ajustement de la largeur de colonne et / ou de la taille de ligne, des éléments qui se chevauchent et de l'empilement, des animations ou d'autres techniques au-delà de ce qu'un système de grille dicte.
Les dispositions de grille brisées permettent aux concepteurs d'engager les utilisateurs avec des pages uniques mais visuellement attrayantes arrangements. Si vous souhaitez offrir une expérience mémorable et distinguer votre activité en ligne de vos concurrents, les grilles brisées sont une approche de conception pour y parvenir.
À l'instar de la disposition de grille standard, la disposition de grille brisée n'est pas un ensemble de règles - vous pouvez briser la grille de plusieurs manières. Dans la section suivante, nous discuterons des techniques les plus courantes et les plus efficaces pour créer des sites Web à grille interrompue.
Comment créer une conception Web à grille brisée
Briser la grille ne signifie généralement pas jeter tous les concepts liés à la grille par la fenêtre. Parfois, même des variations subtiles sur des techniques bien établies peuvent donner une allure visuelle supplémentaire.
Au début, la meilleure approche pour la conception de grille brisée consiste d'abord à créer une page dans un système de grille comme 960, puis à ajuster le style de la grille via CSS ou un outil d'interface graphique pour produire quelque chose d'original.
Vous préférerez peut-être dessiner des idées à l'avance, ou aller à l'aveugle et expérimenter - de toute façon, il est plus facile de travailler à partir d'un pré- construire une grille que styliser le placement des éléments à partir de zéro
Voici quelques modifications que vous pouvez apporter ke aux grilles traditionnelles pour élever votre site au-delà des lignes et des colonnes simples:
Alignement varié
Un moyen simple de créer une grille brisée la mise en page consiste à adopter l'asymétrie et à modifier l'alignement vertical des éléments de votre page. C'est aussi simple que de placer vos éléments dans une grille, puis de modifier la largeur des colonnes. Cette méthode de base va à l'encontre des attentes des utilisateurs selon lesquelles les images de texte doivent être alignées à gauche, à droite ou au centre.
Zara fait un bon travail de cette technique sur leur site, illustré ci-dessous. Remarquez comment chaque colonne varie en largeur, et le chevauchement occasionnel entre les éléments de colonne:
Superposition
" Superposition "est un terme sophistiqué pour créer une page les éléments se chevauchent. Lorsque des éléments distincts se croisent, l'utilisateur suppose inconsciemment qu'ils sont liés et les traite comme un élément visuel unique avec de la profondeur.
Les calques peuvent être difficiles à implémenter du premier coup sans paraître désordonnés - certains esquisser , ajuster et expérimenter seront utiles pour produire un aspect cohérent qui brise efficacement la grille.
La société de recrutement australienne Marble effectue une superposition simple mais efficace sur sa page d'accueil - l'en-tête principal "Tout sur les gens". se trouve devant un formulaire de recherche pour attirer l'attention successivement sur ces deux éléments.
Conteneurs
Au lieu que les éléments de votre page se chevauchent partiellement, vous pouvez essayer de placer le texte, les icônes et / ou boutons entièrement à l'intérieur d'une image ou d'un élément de bloc. Avec cette approche, l'élément de bloc sert à contenir ses éléments enfants et à les unir Les conteneurs sont un moyen naturel de diviser votre grille tout en gardant le contenu organisé.
Dans l'exemple ci-dessous, certains conteneurs renferment plusieurs éléments, notamment des images, du texte, des liens et des couleurs unies. Bien qu'il y ait des chevauchements et l'asymétrie, il est clair quels éléments sont liés.
Espace blanc
Whitespace est un héros caché de la conception Web. Sans une certaine marge de manœuvre entre les blocs de contenu, la page Web moyenne serait déroutante et accablante.
Dans vos expériences de grille, n'ayez pas peur de tourner sur le cadran sur les espaces et ne mettez en valeur qu'un ou deux éléments de contenu. Les marges exagérées attirent l'attention entièrement sur vos éléments en vedette, une alternative spacieuse à votre disposition de grille standard.
Le site Web du portfolio visuel ci-dessous présente son off- images centrées sur un fond blanc, avec des images plus dispersées entrant dans le cadre lorsque vous faites défiler. Cette approche minimaliste aide les utilisateurs à se concentrer nous sur les illustrations en vedette et évite la présentation fatiguée des lignes et des colonnes que nous voyons si souvent avec les affichages d'images en ligne.
Gouttières
Les systèmes de grille ont tendance pour créer leurs gouttières en ajoutant des marges à chaque colonne de la grille. Dans le système de grille 960, par exemple, chaque colonne a une marge de 10 pixels de chaque côté, ce qui crée des gouttières de 20 pixels de large entre les colonnes adjacentes.
Les gouttières sont essentielles pour la plupart des sites Web basés sur une grille pour ajoutez des espaces et limitez l'encombrement, mais vous pouvez essayer de jouer avec eux pour voir quels effets vous pouvez créer, ou même de les supprimer complètement.
Prenez ce site Web dérivé de la firme de design canadienne Blender Media - ses tuiles sont disposées dans une grille évidente, mais il n'y a pas de gouttière du tout. Un effet de texture en feutre permet de créer une esthétique de courtepointe. Si vous adoptez cette approche pour les grilles brisées, sélectionnez toujours des couleurs d'arrière-plan contrastées pour établir une bordure claire.
Illustration
Contrairement à ce que vos livres de coloriage d'enfance vous ont peut-être appris, il est normal de dessiner en dehors des lignes - j Assurez-vous que vos illustrations sont intentionnelles et de bon goût. Les dessins qui traversent les limites d'une grille et / ou chevauchent d'autres éléments peuvent apporter une variation bienvenue aux frontières nettes auxquelles vos visiteurs sont habitués.
Cette utilisation de l'illustration par une marque italienne de fruits de mer est un délice . Il présente des illustrations animées de la vie marine qui se déplacent en parallaxe et traversent les limites des colonnes. À mon avis, c'est à peu près aussi amusant qu'un site Web de poisson congelé peut être.
Sortir de la grille
Comme nous l'avons vu, les grilles brisées n'abandonnent généralement pas complètement le concept de grille. Au lieu de cela, ils offrent une version alternative du format grâce à des ajustements subtils. Pensez à chacune de ces méthodes lorsque vous imaginez la future mise en page de votre site et voyez si vous ou votre équipe de conception pouvez élaborer une mise en œuvre en CSS.
De plus, gardez à l'esprit que les grilles brisées adhèrent toujours à principes de conception Web malgré leurs libertés créatives. Quoi qu'il en soit, votre site doit être simple, réactif pour les mobiles, accessible, facilement navigable, cohérent dans les choix esthétiques. Vous n'avez pas besoin de renoncer à une expérience utilisateur agréable pour vous démarquer.
Aucun commentaire:
Enregistrer un commentaire