Si vous recherchez des grilles de conception de sites Web, vous êtes au bon endroit. Dans cet article, nous avons discuté de 5 grilles de conception de sites Web différentes.
Les grilles sont l'épine dorsale du design ; ils vous aident à établir l'ordre et à organiser le contenu de votre conception. Nous discuterons de ce qu'est une grille, pourquoi vous devriez en utiliser une dans la conception Web et comment en créer une dans cet article.
Vous ouvrez votre application de conception préférée et voilà, une toile vierge vous regarde. C'est parfois un peu intimidant.
Comment commencer ? Quelle position donnez-vous au titre? Où placez-vous vos œuvres d'art et vos photographies ? Une grille est tout ce qui est nécessaire pour commencer.
Une grille est une structure utilisée pour organiser le contenu d'un dessin ; il établit l'alignement et l'ordre.
Que vous conceviez une mise en page pour l'impression, telle qu'un magazine, ou que vous fusionniez des photos et du texte pour créer une page de destination, une grille vous aidera à faire des choix de conception et à offrir une expérience utilisateur positive.
Considérez comment cette conception de page de destination utilise une grille à 12 colonnes pour organiser ses composants. L'utilisation d'une grille supprime la possibilité de prendre des décisions au hasard.
Plutôt que de positionner des pièces au hasard, en utilisant correctement une grille, vous saurez précisément où placer des éléments comme un logo, des éléments de menu, un titre, le contenu du corps et des photographies. De plus, cela vous aidera à accélérer votre processus de conception.
Dans cet article, je vais vous dire tout ce que vous devez savoir sur l'utilisation d'une grille dans la conception Web. Alors, reste avec moi jusqu'à la fin.
Table des matières
- D'où viennent les grilles ?
- Pourquoi les grilles sont-elles importantes dans la conception Web ?
- 5 différents types de grilles
- 4 meilleures pratiques d'utilisation des grilles dans la conception Web
- Grid Anatomy – Ce que vous devez savoir ?
- Foire aux questions : grilles de conception de sites Web 2024
- 👉 Quelle est la meilleure grille pour le web design ?
- ✅ Qu'est-ce qu'un site Web en grille ?
- 👉 Comment fonctionnent les grilles de sites Web ?
- 👀 Comment une mise en page en grille améliore-t-elle la conception Web ?
- ✅ Pourquoi les designers utilisent-ils des grilles ?
- 👉 Combien de colonnes une grille doit-elle avoir en web design ?
- 💁 Pourquoi utilise-t-on une grille à 12 colonnes ?
- ✔️ Qu'est-ce que la grille à 12 colonnes ?
- 👉 Comment utilisez-vous les modèles de grille ?
- Conclusion : grilles de conception de sites Web 2024
D'où viennent les grilles ?
Avant d'aborder la façon dont les grilles affectent la conception Web aujourd'hui, examinons brièvement l'histoire des grilles et comment elles ont été utilisées. Les grilles sont nécessaires à l'organisation de la typographie.
Les grilles ont été initialement utilisées dans les mises en page de manuscrits pour commander le type. Considérez à quel point cette diffusion est ordonnée à partir d'une première page de texte.
Pour un regard plus approfondi sur l'histoire de l'imprimerie, consultez notre essai sur l'histoire de la conception graphique.
Avance rapide vers la révolution industrielle et l'avènement de la fabrication de masse, au cours de laquelle des journaux, des affiches, des publicités et d'autres articles imprimés ont été produits en grande quantité.
Les concepteurs aiment Jan Tschichold ainsi que Josef Muller-Brockmann a créé de nouveaux systèmes de grille au XXe siècle, qui ont évolué pour devenir ce que l'on appelle maintenant le style suisse ou le style typographique international.
Ils ont établi une structure modulaire avec suffisamment d'espace.
Pourquoi les grilles sont-elles importantes dans la conception Web ?
En termes d'application au processus de conception Web, le système de grille facilite l'alignement des composants de la page à l'aide de colonnes et de lignes successives.
Une fois cette base hiérarchique en place, nous pouvons organiser le texte, les graphiques et pratiquement tout autre élément de conception à l'intérieur de l'interface de manière cohérente et ordonnée.
Lors de la conception pour le web et le mobile, les pages ou interfaces que nous développons sont destinées à faciliter différents flux d'utilisateurs.
Les grilles facilitent le processus de conception de structures filaires, de modèles ou de mises en page standardisées pour des sites comparables, car les flux d'utilisateurs comprennent souvent plusieurs écrans ou fenêtres qui répètent des schémas de conception et des mises en page similaires.
Les grilles permettent la division horizontale et verticale des pages en lignes et en colonnes. Les systèmes de grille sont une technique systématique qui permet aux concepteurs d'organiser les éléments de manière ordonnée et de développer des composants pour plusieurs pages ou mises en page de manière modulaire.
De plus, les grilles établissent un ensemble normalisé d'unités de mesure fixes qui déterminent la taille, l'espacement et l'alignement de chaque élément de conception.
Les mises en page en grille sont nées dans la conception d'impression lorsqu'elles ont été utilisées conjointement avec la typographie pour organiser l'écriture manuscrite sur papier, en particulier dans les livres et les journaux.
Cela dit, de nombreux aspects du design contemporain reposent sur des mises en page basées sur une grille et se développent. Cela englobe la conception Web, la conception d'interface et, surtout, la conception réactive.
Avant d'explorer comment et pourquoi les mises en page basées sur une grille sont un outil si précieux pour notre processus de conception en tant que développeurs Web, examinons de plus près les composants physiques qui composent un système de grille.
5 différents types de grilles
Les grilles sont classées en cinq catégories distinctes. Bien que certains soient plus appropriés pour la conception Web que d'autres, vous avez presque certainement utilisé les cinq à un moment donné de votre carrière créative.
1. Grille Hiérarchique :
L'utilisation la plus courante de grilles hiérarchiques est dans la conception de sites Web. L'objectif de ces grilles est de hiérarchiser les éléments. Ils peuvent être plus adaptables, mais ils reposent toujours sur des colonnes, des lignes et des modules pour l'organisation.
Ils sont naturellement construits en disposant d'abord les éléments les plus significatifs sur la page puis en les entourant d'une grille.
Les sites Web d'actualités et de médias utilisent souvent ce style de grille pour aider à attirer l'attention sur certains articles et publications. Considérez comment le ' La page d'accueil utilise une grille hiérarchique.
2. Grille modulaire :
Les grilles modulaires sont similaires aux grilles de colonnes mais incluent des lignes. Alors que les journaux et les magazines utilisent souvent des grilles modulaires pour organiser le matériel, elles peuvent également être utilisées dans la conception de sites Web et d'applications, par exemple, dans une section de grille de produits.
Considérez comment Everlane organise sa collection de denim à l'aide d'une grille modulaire. Le YouTube La page d'accueil est un autre exemple de site qui utilise une grille modulaire.
Bien qu'ils incluent une barre latérale gauche pour les liens fréquents tels que les sections tendances et abonnements, tout le matériel vidéo est structuré dans une grille modulaire à quatre colonnes pour maximiser le nombre de vidéos qu'un spectateur peut parcourir tout en recherchant quelque chose à regarder.
3. Grille de colonnes :
Les grilles de colonnes facilitent l'organisation du texte, des images et des graphiques. Pour les sites Web, le nombre de colonnes qui couvrent la largeur d'une page de destination peut aller de deux à douze, voire seize.
Le texte et les graphiques peuvent être contenus dans une seule colonne ou s'étendre sur plusieurs colonnes. Les gouttières sont les espaces entre les colonnes ; ils doivent être de taille uniforme dans l'ensemble.
Les grilles de poteaux ne doivent pas nécessairement être symétriques. Par exemple, vous pouvez utiliser une grille de colonnes asymétrique dans laquelle certaines colonnes sont plus étroites que d'autres, ce qui peut être avantageux selon la hiérarchie de votre conception.
Les grilles de colonnes asymétriques sont souvent utilisées sur les sites Web de blogs, où le matériau principal est inclus dans le plus grand conteneur des deux tiers de la mise en page, tandis que le plus petit tiers peut afficher des informations sur le blog et son auteur.
Considérez comment la page d'accueil de ce blog utilise une grille de colonnes asymétrique.
4. Ceinture manuscrite :
Tous les livres, journaux et périodiques sont construits sur une grille manuscrite. Également appelée grille à colonne unique, il s'agit de l'un des modèles de grille les plus simples et convient parfaitement aux énormes blocs continus de texte et de graphiques.
Il s'agit essentiellement d'un immense espace rectangulaire à l'intérieur de la page qui sert de cadre de délimitation pour le texte.
5. Grille de base :
Une grille de base est un peu plus technique ; elle est établie par l'emplacement du texte. Essentiellement, il fait référence à l'interlignage ou à l'espace entre les lignes de base.
Cette grille aide à offrir une expérience de lecture positive au lecteur, en particulier lorsqu'il y a beaucoup de contenu à lire. Bien qu'il soit vital pour la conception d'impression, telle que la mise en page de livres, il est tout aussi essentiel pour la conception en ligne.
Tenez compte de l'effet de l'interligne sur la lisibilité d'une page de destination. Si le texte est trop condensé, l'utilisateur peut abandonner complètement le site. Maintenez un mélange approprié de texte et d'espace blanc.
4 meilleures pratiques d'utilisation des grilles dans la conception Web
Il y a plusieurs mots et idées à connaître et à comprendre dans le domaine de la conception Web, mais rien de plus que l'importance des grilles dans la conception Web.
Entre les différents composants qui composent une structure de grille, les nombreux types de grille disponibles et les les processus cognitifs impliqué dans la détermination du type de grille qui correspond le mieux à votre contenu et à votre conception, il y a beaucoup à prendre en compte.
1. Respectez la règle des tiers :
Un autre concept de conception de sites Web est le Règle des tiers, qui aide les concepteurs à créer des dispositions de grille et un placement d'image esthétiquement équilibrés.
Cette approche recouvre une grille qui divise la zone de conception horizontalement et verticalement en tiers. Cela divise toute image ou section/espace de page en neuf segments égaux définis par les intersections des lignes.
Selon la règle des tiers, placer des « objets d'intérêt » sur les « tiers » d'une image dirigera l'attention de l'utilisateur vers eux d'une manière plus puissante et plus attrayante sur le plan esthétique.
Dans la conception Web, les concepteurs utilisent souvent la règle des tiers pour les aider à faire certains des choix de grille et de mise en page les plus critiques.
2. Respectez le nombre d'or :
De nombreux concepteurs utilisent un concept connu sous le nom de nombre d'or pour optimiser l'échelle, l'équilibre et la disposition de leurs conceptions de grille. Le Nombre d'or est une proportion égale à 1.6180 dans sa forme la plus simple.
Le rectangle d'or est un rectangle dont la longueur est 1.6180 fois sa largeur basée sur le nombre d'or. Cela indique que si la largeur de l'élément est de 100 pixels, la longueur sera de 161.80 pixels.
Cela est vrai pour la largeur et la longueur des images, objets ou formes adjacents, ainsi que pour le développement d'une forme ou d'un élément unique.
En utilisant le nombre d'or, les concepteurs peuvent déterminer comment diviser l'espace horizontal disponible sur la page et combien d'espace autoriser pour et autour de chaque pièce, entre autres.
Un cas dans lequel cela peut se produire est lors du développement de la section héros d'un site Web. Si vous choisissez une mise en page pleine largeur et que vous la divisez verticalement en deux sections : l'image du héros et le texte du héros.
De plus, vous devrez décider de la taille de l'image, de la taille du texte, etc. dans cette procédure de micro-conception.
Cependant, vous devez d'abord décider d'un rapport de colonne, qui vous guidera pour déterminer la taille de votre image et de votre police de caractères, ainsi que les éléments que vous souhaitez accentuer plus ou moins, ou si vous souhaitez accorder une attention égale à chacun.
C'est à ce moment que la décision de diviser la partie héros en termes de composant qui doit être plus grand ou plus important entre en jeu. C'est là que le nombre d'or est utile.
Cette directive prend en compte une variété d'éléments, y compris la largeur de la page, la taille du contenu, ainsi que le nombre et la taille des modules dont le contenu aura besoin sur une grille.
En termes d'accessibilité, le nombre d'or attire l'attention de l'utilisateur sur certains points ou emplacements sur un écran, ce qui est exactement ce que les concepteurs visent à faire lorsqu'ils établissent et implémentent la hiérarchie des informations de leur contenu et de leur schéma de conception.
3. Faites de la place pour l'espace blanc :
En tant que concepteurs Web, nous comprenons à quel point l'espace blanc est critique en termes de lisibilité, de hiérarchie des informations, d'évolutivité et de marge de manœuvre générale autour et entre les composants de conception.
Étant donné le rôle vital de l'espace blanc dans la conception de la mise en page, il est naturel que les sites Web et les grilles de mise en page l'utilisent.
Les dispositions en grille sont essentiellement déterminées non seulement par la largeur et la hauteur de leurs colonnes et lignes, mais également par la largeur et la hauteur de l'espace blanc entre elles, appelé espacement.
Par exemple, une méthode de conception basée sur une grille que les concepteurs Web utilisent souvent est connue sous le nom de système de grille 8pt, une notion établie par les directives de conception matérielle de Google.
La méthode Material Design utilise une grille de 8 par 8 points. Chaque élément du site Web sera en pratique un multiple de/divisible par huit.
Ce qui est fascinant, c'est que cette règle s'applique non seulement aux éléments de la grille comme les photos, les boutons ou le texte, mais aussi aux unités d'espace blanc, qui doivent être des multiples de huit.
Par conséquent, tout en considérant comment espacer vos colonnes ou lignes, vous devez également quantifier et spécifier la quantité d'espace blanc, dans ce cas en multiples de huit.
Cela démontre à quel point l'espace blanc est critique dans la conception de la grille, au point que ses dimensions et ses exigences sont tout aussi critiques que les colonnes et les lignes.
La page d'accueil d'Elementor Experts illustre à quel point l'espace blanc peut être puissant, en particulier sur la page d'accueil d'un site Web.
Parce que le but ultime de la page d'accueil est d'inciter les téléspectateurs à agir et à en savoir plus sur la plate-forme Experts, l'espace blanc soutient ce processus en donnant la priorité aux informations.
Cela implique qu'étant donné que la proposition de valeur de la plate-forme est mise en évidence sur la page d'accueil et qu'elle a « le temps de briller », les visiteurs du site Web comprennent immédiatement la valeur accrue qu'ils vont découvrir.
4. Respectez la conception réactive :
La conception réactive fait référence à la capacité de la mise en page et du contenu d'une page ou d'un site à s'adapter à plusieurs appareils et tailles de navigateur. Cela implique que lorsque la taille de l'écran varie, le nombre de colonnes et, bien sûr, leur largeur, varieront également.
Cependant, il existe une distinction intrinsèque entre les grilles de conception standard et les grilles réactives.
Alors que les grilles de conception sont définies sur une grille de base, les grilles réactives sont flexibles, permettant aux colonnes de grille de se redimensionner et de se repositionner en fonction de la fenêtre d'affichage de l'utilisateur.
Avec une grille fixe, la réduction de la taille de l'écran vous amènera automatiquement au prochain point d'arrêt, et les marges latérales diminueront également automatiquement jusqu'à ce que le prochain point d'arrêt soit atteint.
Une grille réactive, ou grille fluide, est ce que vous voyez lorsque les éléments changent dynamiquement en réponse au rétrécissement du navigateur/écran. Les grilles réactives aligneront et organiseront logiquement votre matériel.
Cela implique que lorsque la fenêtre d'affichage diminue, les tuiles et le contenu de la grille rétréciront également proportionnellement.
Grid Anatomy – Ce que vous devez savoir ?
Toutes les grilles dans la conception de sites Web, quelle que soit leur taille ou leur complexité, ont certains composants qui les caractérisent comme des mises en page de grille :
1. Marges :
Les marges sont l'espace négatif entre le format et la bordure extérieure du contenu, parfois appelées « gouttières extérieures ». Sur mobile, les marges latérales mesurent généralement 20 à 30 pixels de large et varient considérablement entre ordinateur et mobile.
La marge peut être familière avec le jargon HTML et CSS, où elle est utilisée comme propriété pour générer de l'espace autour d'un élément de conception ou d'un conteneur. Gardez à l'esprit que la taille d'une marge n'affecte pas la taille du texte adjacent.
Il spécifie simplement la quantité d'espace autour de l'élément, ce qui, dans le contexte des grilles de mise en page, fait explicitement référence à l'espace entre le format et la bordure extérieure du contenu.
2. Gouttières :
Les gouttières sont les lignes qui divisent les colonnes et les lignes en unités individuelles. 20px est une taille de gouttière assez typique. Le but des gouttières est de fournir un espace négatif (de n'importe quelle taille) entre les colonnes et les rangées.
Dans le sens le plus simple, les gouttières sont la zone entre les colonnes et les lignes. Les gouttières sont particulièrement importantes dans les aménagements en maçonnerie, où la largeur des gouttières est l'un des éléments les plus critiques.
3. Modules :
Les modules sont les unités de remplissage d'espace formées par la jonction de lignes et de colonnes. Les modules, ou modules de contenu, comme on les appelle souvent, sont les blocs de construction d'une page, puisque chaque élément de conception (texte, graphiques et boutons, par exemple) s'intègre dans les modules produits par les motifs rectangulaires d'une grille.
4. Rangées :
Comme vous pouvez le supposer, les lignes sont les parties horizontales de la grille. Étonnamment, la conception Web néglige souvent l'importance des lignes dans une grille. Cependant, ce n'est pas une grande pratique.
5. Colonnes :
Les colonnes sont des éléments verticaux qui s'étendent sur toute la hauteur de la zone de contenu et sont considérées comme les « blocs de construction » de la grille. Ce qui distingue les colonnes, c'est que plus il y a de colonnes dans une grille, plus la grille devient flexible.
Nous aborderons cela plus en détail sous peu. Bien que la largeur des colonnes dépende toujours du concepteur, les pratiques courantes exigent que 12 colonnes soient utilisées sur le bureau, 8 sur une tablette et 4 sur mobile.
La majorité des grilles ont des largeurs de colonne de 60 à 80 pixels. La largeur des colonnes a un impact significatif sur la largeur de votre contenu réel.
Questions fréquemment posées: Grilles de conception de sites Web 2024
👉 Quelle est la meilleure grille pour le web design ?
Bootstrap est un framework frontal mobile simple, simple et puissant qui rend le développement Web plus rapide et plus simple. Pour nous, c'est le choix le plus populaire. Fréquemment, douze colonnes avec des retraits. Une méthode standardisée et simple.
✅ Qu'est-ce qu'un site Web en grille ?
La grille du site Web est une technique pour organiser et aligner le matériel sur une page. Il sert de squelette ou de cadre fondamental de votre interface utilisateur. Les grilles de sites Web aident les concepteurs à faire des choix de conception et à produire une expérience utilisateur positive.
👉 Comment fonctionnent les grilles de sites Web ?
Les systèmes de grille sont des cadres invisibles utilisés dans la conception Web qui regroupent tous les composants d'une page. La grille agit comme un cadre ou une armature autour de laquelle un concepteur peut organiser des composants visuels (images, glyphes, paragraphes, etc.) d'une manière logique et facilement assimilable.
👀 Comment une mise en page en grille améliore-t-elle la conception Web ?
Les grilles peuvent considérablement raccourcir et améliorer votre temps de conception en servant de guide pour savoir où placer, positionner et mettre à l'échelle les objets. Plutôt que de placer arbitrairement des pièces jusqu'à ce que vous obteniez une composition agréable, une grille devrait vous aider à trouver une solution naturelle.
✅ Pourquoi les designers utilisent-ils des grilles ?
Les grilles permettent aux concepteurs de collaborer plus facilement sur des idées en indiquant où les pièces doivent être placées. Les systèmes de grille aident à découpler le travail de conception d'interface en permettant à plusieurs concepteurs de travailler sur des composants distincts de la mise en page tout en restant certains que leur travail sera intégré en douceur et cohérent.
👉 Combien de colonnes une grille doit-elle avoir en web design ?
Bien qu'il n'y ait pas de besoin formel pour le nombre de colonnes, la majorité des architectures de grille de sites Web utilisent une grille à 12 colonnes. De plus, une grille de site Web contient un espace régulier entre les colonnes, appelé gouttières, et l'espacement à l'extérieur de la grille est appelé marges.
💁 Pourquoi utilise-t-on une grille à 12 colonnes ?
La majorité des versions de Bootstrap ne nécessitent que 12 colonnes pour prendre en charge les éléments suivants : La création de la mise en page est simplifiée. Mise en page adaptée aux mobiles. Blocs proportionnels pour maintenir la symétrie.
✔️ Qu'est-ce que la grille à 12 colonnes ?
Pour les sites Web, les concepteurs peuvent utiliser entre deux et douze, voire seize colonnes pour couvrir l'étendue d'une page de destination. Ils peuvent organiser le texte et les graphiques dans une seule colonne ou sur plusieurs colonnes.
👉 Comment utilisez-vous les modèles de grille ?
L'attribut grid-template-areas définit les zones de mise en page de la grille. Vous pouvez nommer les éléments de la grille en les référençant dans la propriété grid-template-areas via la propriété grid-area. Les apostrophes désignent chaque région. Pour faire référence à un objet grille qui n'a pas de nom, utilisez un point.
Liens rapides:
- Meilleurs constructeurs de sites Web hors ligne
- Coût de création d'un site Web
- Comment créer un site Web personnel
Conclusion : grilles de conception de sites Web 2024
Maintenant que vous comprenez pourquoi les grilles sont essentielles dans la conception Web et comment les utiliser sur votre site Web, il est temps de commencer à mesurer et à aligner.
Gardez à l'esprit que ce principe s'applique à chaque élément de conception : aligner les widgets et les composants horizontalement et verticalement, aligner les éléments de texte sur une ligne de base et centrer correctement chaque type de contenu sur le site Web.
Votre processus de conception et le produit final seront très appréciés, et nous sommes impatients de voir ce que vous avez en magasin.
