Quand vous entendez la grille, quelle est la première chose qui vous vient à l’esprit? Pour la plupart des concepteurs, il s'agit souvent d'un concept horizontal basé sur des colonnes réparties dans la zone de dessin. Cela est particulièrement vrai lorsque vous pensez à des projets de conception Web et numérique.
Mais qu'en est-il des grilles verticales? Il est tout aussi important de créer un flux de haut en bas de la page. Et il existe un certain nombre de façons de faire cela avec les systèmes de grille.
Pourquoi utiliser une grille verticale?
Si vous ne pensez pas déjà aux grilles verticales dans vos projets de conception, vous vous demandez peut-être pourquoi c'est important. Une grille verticale aide à obtenir un rythme et une harmonie verticaux sur la page.
La grille aidera à définir et à établir des règles pour la conception, qu'elle soit imprimée ou numérique. Cette structure facilite la conception du dessin et fournit des instructions pour l’espacement, le placement des éléments et la taille du texte et d’autres objets sur le canevas. Une grille verticale crée également un motif rythmique et un flux pour un site Web lorsque les utilisateurs défilent. (Cela peut être particulièrement important sur les plus petits appareils.)
L’effet général est une conception qui, si vous l’esquissez, ressemble à un flux de données filaire. Les éléments sont bien espacés, les transitions sont faciles à voir et à comprendre et chaque partie de la conception a un sens et fait partie intégrante du plan.
Il suffit de regarder le fil de fer ci-dessus. Vous pouvez dessiner des lignes en travers de l'esquisse afin que chaque élément s'aligne sur le même plan. Ce flux visuel correspond exactement à ce que vous souhaitez atteindre.
Grilles pour le texte
Une grille verticale est particulièrement importante pour le texte. Il peut être utilisé de différentes manières pour créer un flux dans la copie. Tout se résume à votre grille de base.
La grille de ligne de base est un ensemble imaginaire de lignes horizontales équidistantes - pensez au papier réglé que vous avez utilisé à l'école primaire - sur lesquelles le texte s'aligne. Le bas (ligne de base) des lettres repose sur ces lignes de manière à ce que les lignes de texte soient espacées de manière égale et que les colonnes de texte soient également alignées.
Voici quelques applications:
- Créez deux colonnes et conservez votre type sur la ligne de base.
- Utilisez les mathématiques pour aligner tous les types, quelle que soit leur taille, sur l'échelle de la ligne de base.
Mais comment fais-tu ça? Cela commence par un peu "typographie mathématique". (Le concept est à peu près le même pour les projets imprimés ou numériques.)
- Choisissez la police et la taille du corps du texte.
- Définissez les lignes de la grille ou la quantité d'espacement entre les lignes de texte.
- Utilisez cette même proportion pour un autre espacement dans la conception.
- Vous pouvez également utiliser des multiples de la grille de base pour les éléments. Donc, si votre corps de texte est de 16 points, un texte plus volumineux peut avoir une taille égale à deux fois la hauteur de la ligne.
Ce calcul de grille de base fait aussi autre chose. Cela vous aide à créer une hiérarchie de typographie car chaque nouveau niveau de texte est empilé proportionnellement aux autres niveaux de texte.
Grilles pour écrans ou panneaux
Les grilles verticales sont l’un des outils essentiels de la conception page par page, tels que les sites Web dotés de fonctions de défilement parallaxe. Chaque page doit avoir la même taille et la même impression pour que chaque nouvelle page ait l’impression de faire partie intégrante de la même histoire et de la même esthétique.
La plupart des concepteurs font cela avec de la couleur ou une touche d'animation pour créer des écrans. en place avec chaque rouleau. Lorsque les éléments sont alignés dans une orientation verticale parfaite, chaque écran est visible en une fois et n’est pas à moitié allumé, à moitié éteint. Cette grille verticale crée une harmonie appropriée et contribue à une lisibilité appropriée et à une expérience utilisateur plus souhaitable.
Le cadre de ce style de conception dépend d’un bon écoulement vertical. Les éléments doivent être positionnés de la même manière que l'utilisateur fait défiler. Le type doit correspondre à un format de colonne similaire. La taille et l'espacement des lettres et des éléments doivent être cohérents d'un écran à l'autre.
Ces petits signaux constituent le fil conducteur qui permet à l'utilisateur de rester concentré, de créer une compréhension visuelle et de faire circuler l'information d'un bloc à un autre.
Grilles pour cartes
Le design de type carte est l’un des éléments les plus populaires et les plus en vogue de l’année et fonctionne grâce à une grille verticale. La grille verticale vous aide à créer une carte offrant une sensation distincte, un espacement correct et un espace confortable pour plusieurs éléments dans un même conteneur.
Pensez à tous les endroits pour utiliser une grille verticale avec une carte:
- Espacement entre les cartes dans un dessin. (Une carte par écran sur les appareils mobiles).
- Espacement des bordures internes pour la carte entre des éléments tels que des images, du texte ou des boutons.
- Dimensionnement pour chaque élément.
- Hiérarchie et dimensionnement du texte.
Grilles pour le commerce électronique
Les grilles verticales (et horizontales) sont une option populaire pour les sites Web de commerce électronique en raison du flux organisationnel distinct. Les articles peuvent être placés côte à côte afin que les utilisateurs puissent comparer et faire des choix avant de faire un achat.
Regardez de près et vous constaterez probablement que le reste de la structure du site suivra également ce même rythme vertical. L'utilisation subtile de la grille est confortable et permettra aux clients de se sentir à l'aise, de faire confiance au design grâce à une belle organisation et, espérons-le, de faire un achat.
Grilles pour l'organisation globale
Parce que vous utilisez une grille, votre conception ne doit pas nécessairement avoir un aspect maçonné ou basé sur une grille. Utilisez la grille en plusieurs fois et en deux pour créer des combinaisons intéressantes d’éléments qui tombent en harmonie.
Et n'hésitez pas à casser la grille de temps en temps. Parfois, vous vous retrouvez dans une situation où le multiple de grille n'a tout simplement pas l'air correct, en particulier lorsqu'il s'agit de saisir des ascendeurs ou des descendeurs manquants. C'est bon de la tromper un peu alors. N'oubliez pas que même si vous utilisez une grille et qu'elle a l'air drôle, cela perturbera l'harmonie et le flux. Effectuez ces corrections et ajustements visuels au besoin.
Conclusion
Alors pourquoi le rythme vertical et une grille sont-ils si importants? Lorsqu'il s'agit de texte, cela évite à l'utilisateur de se fatiguer en lisant. Pour d'autres éléments, cela crée un sens distinct d'harmonie et de fluidité.
Les gens aiment l'organisation par nature et veulent que les dessins soient faciles à comprendre d'un coup d'œil. Un bon système de grille peut vous aider à y parvenir facilement. Une fois la grille établie, les emplacements, les tailles et les formes des éléments sont plus faciles à imaginer car vous pouvez les adapter au cadre que vous avez déjà esquissé.
Source de l'image: Baldiri.