Système de grille pour un meilleur design d'interface utilisateur

Un système de grille est un outil de conception utilisé pour organiser le contenu sur une page web. Il s'agit d'une série de lignes verticales et horizontales qui créent une matrice de points d'intersection, qui peuvent être utilisés pour aligner et organiser les éléments de la page. Les systèmes de grille sont utilisés pour créer un aspect cohérent sur un site web et peuvent aider à rendre la mise en page plus attrayante visuellement et plus facile à naviguer.

Si vous êtes allé à New York et avez marché dans les rues, il est facile de comprendre comment aller d'un endroit à un autre grâce au système de grille sur lequel la ville est construite. Tout comme la prévisibilité d'une grille urbaine aide les habitants et les touristes à se déplacer facilement, les grilles de pages web fournissent une structure qui guide à la fois les utilisateurs et les concepteurs. Grâce à leur point de référence cohérent, les grilles améliorent la lisibilité et la scannabilité des pages et permettent aux gens d'arriver rapidement là où ils doivent aller.

Structures de grille communes dans les sites web et interfaces

Définition : Une grille est composée de colonnes, de gouttières et de marges qui fournissent une structure pour la mise en page des éléments sur une page.

Il existe trois types de grilles couramment utilisés dans les sites web et les interfaces : grille en colonnes, grille modulaire et grille hiérarchique.

Grille en colonnes : En divisant une page en colonnes verticales. Les éléments de l'interface utilisateur et le contenu sont ensuite alignés sur ces colonnes.

Grille modulaire : Divise davantage la grille en colonnes en y ajoutant des lignes. Cette intersection de colonnes et de lignes constitue des modules auxquels les éléments et le contenu sont alignés. Les grilles modulaires sont idéales pour les pages de commerce électronique et de listing, car les lignes sont répétables pour faciliter la navigation.

Grille hiérarchique : Le contenu est organisé par importance en utilisant des colonnes, des lignes et des modules. Les éléments et parties de contenu les plus importants occupent les plus grandes parties de la grille.

Décomposition de la grille

Quel que soit le type de grille que vous utilisez, la grille est composée de trois éléments : colonnes, gouttières et marges.

Colonnes : Les colonnes occupent la plupart de l'espace dans une grille. Les éléments et le contenu sont placés dans des colonnes. Pour s'adapter à n'importe quelle taille d'écran, les largeurs de colonnes sont généralement définies avec des pourcentages plutôt que des valeurs fixes et le nombre de colonnes varie. Par exemple, une grille sur un appareil mobile pourrait avoir 4 colonnes et une grille sur un ordinateur de bureau pourrait avoir 12 colonnes.

Gouttières : L'espace vide entre les colonnes qui sépare les éléments et le contenu de différentes colonnes. Les largeurs de gouttières sont des valeurs fixes mais peuvent changer en fonction de différents points de rupture. Par exemple, des gouttières plus larges sont appropriées pour les grands écrans, tandis que des gouttières plus petites sont appropriées pour les petits écrans comme les mobiles.

Trois éléments composent toute grille : (1) colonnes, (2) gouttières et (3) marges.

Exemples de grilles en utilisation

Exemple 1 : Grille hiérarchique

Notre premier exemple provient du New York Times. Cet écran utilise une grille hiérarchique pour créer une expérience de lecture semblable à un journal. À la taille d'écran de bureau, deux colonnes principales composent la grille hiérarchique, la colonne de gauche, suivie d'histoires secondaires et tertiaires, qui occupent la colonne plus petite et les modules sur la droite.