Harmonie horizontale C'est l'une de ces choses que vous semblez ne remarquer que quand il manque. L'harmonie horizontale est la relation entre les éléments d'un dessin. C'est plus que des lignes et des règles; c'est également une grille invisible qui crée un sentiment d'appartenance pour les éléments de conception.
Comment créer une harmonie horizontale? Bien que certaines techniques soient plus faciles que d’autres, ce n’est pas un concept accablant. Cela prend juste un peu de planification. En réfléchissant à des éléments tels que la grille de base, l’espace entre les lignes de texte, le positionnement des éléments et l’esthétique générale, l’harmonie horizontale ne constitue qu’une partie du processus de conception.
Grilles de base
Les grilles de base, un outil de conception populaire dans les projets imprimés, sont moins souvent évoquées dans la conception Web. La raison est simple: de nombreux projets Web (et numériques) comportent une seule colonne de texte.
La grille de ligne de base est une ligne imaginaire sur laquelle repose le type. Chaque lettre du texte reposera sur cette grille, de sorte que plusieurs colonnes de types s'alignent. (Cela empêche les colonnes d'avoir un aspect déchiqueté.)
Les grilles de base peuvent fonctionner pour presque n'importe quel usage typographique et la plupart des logiciels de conception incluent des outils pour créer des spécifications de grille de base. Cela devient un peu plus compliqué en ligne, mais il existe également des lignes de base CSS, y compris un bel exemple de Smashing Magazine.
La grille de la ligne de base ne fonctionne que lorsqu'elle est appliquée à chaque colonne de la présentation, où le type commence et se termine au même endroit (généralement le haut et le bas d'une page). En outre, la grille de référence est généralement appliquée à la page entière d'un projet numérique et à la propagation (ou aux pages en regard) des projets d'impression.
Les grilles de base sont différentes des hauteurs de ligne ou des spécifications principales principalement parce qu'une grille de ligne de base indique l'emplacement des lettres. La grille peut forcer les lignes à se rapprocher ou à être espacées plus loin. (Dans Adobe InDesign, par exemple, une grille de ligne de base remplacera l'interligne, ce qui obligera le texte à s'afficher dans la grille appropriée.)
Ce qui est bien avec une grille de base, c'est la propreté du texte. Lorsque tout s'aligne de manière organisée, le résultat est un lettrage facile à lire et à regarder. Il n'y a pas de sentiments discordants. Il y a une raison pour laquelle les livres, les journaux et les magazines (qui reposent sur plusieurs colonnes de texte sur une page) le font depuis des années.
Allusion: Définir une grille de base
- InDesign: Dans le menu Edition, sélectionnez Préférences, puis Grilles. Vous pouvez définir une couleur pour la grille de la ligne de base, à partir de laquelle la grille commence (haut de la page ou la marge supérieure) et incrémente (hauteur de la grille). Aligner sur les guides s'appliquera à la grille de la ligne de base.
De premier plan
L'interligne, la quantité d'espace entre les lignes, est un autre outil important pour créer une harmonie sur la page ou sur l'écran. Le texte doit avoir un début cohérent.
Pensez-y de cette façon: si le paragraphe 1 est en caractères de 14 points avec interligne de 16 points et le paragraphe 2 en caractères de 14 points avec interligne de 12 points, les lecteurs seront en détresse. Ce changement est difficile à regarder et peut faire de la lecture un défi. Cela est vrai même avec une seule colonne de texte.
Surtout dans les projets imprimés, la combinaison de l’avance cohérente et d’une grille de base complémentaire est idéale. Cet appariement garantira que le type s'aligne de colonne en colonne et a une apparence cohérente de haut en bas.
Garder l'espacement cohérent
La quantité d'espace entre les éléments est tout aussi importante. Y a-t-il une ligne d'espace entre les paragraphes? Qu'en est-il entre l'en-tête et le texte principal? Ou une photo et le texte qui l'entoure?
Déterminez les règles d'espacement qui fonctionnent avec votre grille de ligne de base et vos principales spécifications afin de vous assurer que les espaces autour des éléments sont cohérents. Il sera plus facile de créer et de maintenir une cohérence avec ces espaces s'ils sont également configurés pour fonctionner avec vos spécifications de type.
Allez un peu plus loin et pensez également à l'espace vertical: largeur de gouttière, habillage du texte et marges. Ces espaces doivent également faire partie de votre schéma d'espacement cohérent.
Alignez-le
Le texte est de 14 points? Construire des éléments pour correspondre.
Une fois que vous avez une bonne idée du texte d'un projet, d'autres éléments entrent en jeu. Ces éléments doivent également s'aligner sur votre grille invisible. Le texte, les photos, les lignes, les boutons et tous les autres éléments de conception doivent tous fonctionner ensemble lorsque vous les regardez à travers la page ou l'écran.
Cela peut prendre un peu de planification. En ce qui concerne les images, tracez les emplacements et indiquez la position de chacun sur la grille horizontale. Le bas du cadre photo doit reposer sur la grille de la ligne de base avec le texte et s’arrêter en alignement avec le haut des lettres majuscules pour une harmonie parfaite.
Pensez de la même manière à de petits éléments, tels que des boutons ou des éléments de navigation. Pour les petites pièces, considérez les hauteurs verticales de ces éléments pour correspondre au début du texte ou à un multiple de celui-ci. (Rappelez-vous simplement de considérer tout espacement supplémentaire entre les lignes.)
Pensez en blocs
Si toute cette grille de base et votre tête vous font tourner la tête, il pourrait être plus facile de penser à une grille en blocs. Le papier graphique de la vieille école que vous avez utilisé à l’école primaire peut être le carnet de croquis parfait pour cette application. (La suite logicielle Adobe dispose également d'un mode de grille que vous pouvez appliquer à l'arrière-plan lorsque vous esquissez numériquement.) Planifiez votre projet de conception de sorte que chaque pièce corresponde à un nombre défini de blocs.
Par exemple, le texte a une hauteur de deux blocs. D'autres éléments seront égaux à des multiples de texte, faisant des images de huit blocs de hauteur et des boutons de quatre blocs de hauteur. L'espacement entre les éléments est également constitué de deux blocs, verticalement et horizontalement. (Obtenir l'image?)
Allusion: Définir une grille de document
- InDesign: Dans les menus InDesign Edition (sous Windows), sélectionnez Préférences, puis Grilles. Vous pouvez définir une couleur pour la grille, spécifier un espacement horizontal et vertical et des subdivisions. La grille peut être configurée pour apparaître derrière ou devant des objets dans la présentation.
- Photoshop: Dans le menu Photoshop Modifier (sous Windows), sélectionnez Préférences, puis Guides, Grille et tranches. Définissez les spécifications de chaque ligne de grille, y compris la couleur, l’espacement et les subdivisions.
Pensée horizontale pour projets verticaux
L’harmonie horizontale n’est pas seulement un élément à prendre en compte lorsqu’on travaille sur des projets qui s’étendent sur de longs espaces, elle peut également être importante dans les projets orientés verticalement.
Considérez l’importance de l’harmonie horizontale pour un site Web doté de fonctions de défilement de parallaxe. Chaque? Écran? doit travailler en harmonie horizontale en montant et descendant. Un site Web mobile, souvent vu dans une orientation verticale, doit évoluer dans un sens.
Il en va de même pour les petits projets d'impression. Regardez une étiquette sur un contenant de boisson. Le texte est probablement placé dans une grille qui entoure le conteneur.
Conclusion
L'harmonie horizontale est partout. La clé est que vous ne le voyez pas vraiment. Les projets se sentent bien quand ils sont là et un peu loins quand ce n'est pas le cas.
En tant que concepteur, il est important de penser aux grilles et à l'alignement tout au long du processus de conception. Le résultat final d’une conception est de créer quelque chose qui soit lisible, utilisable et efficace. L'harmonie horizontale peut vous aider à atteindre cet objectif.