Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Forces invisibles : Espacement et forme

by
Length:ShortLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Size, Contrast, and Balance

French (Français) translation by Henri Lotin (you can also view the original English article)

Dans l’article précédent, nous avons appris comment le dimensionnement et la mise à l’échelle peuvent être utilisés pour rendre vos designs harmonieux et clairs. À cet égard, dans notre dernier article sur les forces invisibles dans le design, nous apprendrons comment l'usage subtil de l'espace – souvent appelé « espace vierge » ou « espace négatif » – peut être mis à profit pour que vos designs communiquent efficacement.

Votre ratio « données/encre »

Plus consciemment vous utilisez l'espace vierge, plus élevé sera votre ratio « données/encre ». Il s’agit d’un concept introduit par le gourou du design d'information Edward Tufte. C’est une fonction de la quantité d’informations véhiculée par chaque goutte d’encre – ou, dans le cas du mobile et du web design – de chaque pixel.

Le graphique de gauche a un rapport de données/encre beaucoup plus élevé que le graphique de droite. Le graphique doit-il vraiment être rempli « d'encre » ? Non, il communique parfaitement avec les points et les lignes.

Que se passe-t-il si vous allez une étape plus loin et supprimez les lignes, laissant seulement les points ?

Maintenant, la communication s'effondre. Oui, vous pouvez voir tous les points de données, mais maintenant vous avez perdu « l'histoire » sur la façon dont les données ont changées au fil du temps. De plus, il est devenu difficile à distinguer d’un simple diagramme à nuage de points, dans lequel « le temps » n’est pas l'une des variables, et les données ne vont pas de façon linéaire.

Les éléments proches sont perçus comme étant liés

Dans le premier article de cette série, nous avons appris comment l’alignement des éléments implique des relations entre ces éléments. Ce qui est également important, c’est à quel point proches sont ces éléments les uns des autres.

Ceci est juste une simple grille de carrés, comme des tuiles sur un plancher.

Mais si vous créez un espacement horizontal plus large entre les rangées verticales de carrés, vous avez maintenant une série de colonnes.

Ainsi, lorsqu’il y a des changements drastiques dans les données dans le graphique ci-dessus, l’esprit tente de relier les points dans le mauvais ordre, juste parce qu’un point est plus proche d’un autre.

Utilisez l’espace vierge pour des mise en pages propres

Ces principes s'étendent bien au-delà des graphiques linéaires. Ils sont présents dans tout ce que vous concevez. Surtout quand vous concevez pour petits écrans, vous ne voulez pas que des pixels se perdent – vous souhaitez concevoir avec un ratio élevé données/encre.

Les designers ont tendance à utiliser des grilles pour aider à organiser les informations dans une mise en pages. Grilles vous permettent d’aligner des éléments, tels que les lignes de texte, qui créent ensuite des régions d’information liées les unes aux autres.

Voici une mise en pages de base, conçue sur une grille. Le côté gauche c'est votre navigation, et la plus grande région détient le contenu principal.

Cette mise en pages est très bien, mais notez que l’espace vierge entre la navigation et l’espace vierge entre les colonnes de texte dans la zone de contenu principale sont les mêmes.

Il serait judicieux d’élargir légèrement la gouttière entre la navigation et la zone de contenu principale.

Maintenant, il y a une distinction plus nette entre la navigation et le contenu principal, et tous nous avons eu à faire était d’ajouter un peu d’espace vierge.

Utilisez l’espace vierge pour une typographie propre

Dans l’article précédent, nous avons appris comment le dimensionnement est l’un des nombreux facteurs qui peuvent être utilisés pour créer la hiérarchie typographique. L'espace vierge peut aider à organiser votre typographie, aussi.

Par exemple, regardez cet en-tête, meta-données et corps de texte.

Ils ont des relations de taille harmonieux entre eux, grâce au fait que leurs tailles sont choisies parmi une échelle variée, mais, ils ont l’air assez bâclés !

Le problème est que les espaces négatifs entre ces éléments n’ont pas été bien pensés.

La ligne de données meta est déjà bien différenciée de l’en-tête : elle est d'une taille différente, c’est en majuscules, et elle est même un peu bien espacée.

Un bon truc consiste à utiliser la hauteur de police des données méta pour déterminer combien d’espace il devrait y avoir entre elle et l’en-tête. Comme ceci :

En général, vous utiliserez vos globes oculaires pour comprendre cet espacement. Il n’y a aucune façon mathématique de vous dire exactement combien d'espacement il devrait y avoir. C'est une fonction de l'interlignage, la quantité de marge ou marge intérieure que vous utilisez et les caractéristiques d'une police particulière.

Maintenant, qu’en est-il du corps de texte ?

Il est logique que la ligne des données méta soit vraiment proche de l’en-tête, mais l’en-tête n’a pas besoin d’être à proximité du corps de texte. En fait, l’en-tête et les données méta peuvent être leur propre unité.

Vous pouvez utiliser la distance entre le haut de l’en-tête et le bas des données méta comme guide et placez la moitié de cette distance entre les métadonnées et le corps de texte.

Conclusion

En pensant à la manière dont vous façonnez votre mise en pages et communiquez avec un espace vierge, vos designs seront plus propres et plus clairs, tout en étant plus utilisables, tout en convertissant mieux.

Ceci encapsule les choses pour l’instant – si vous ne l’avez pas déjà fait, n’oubliez pas de jeter un œil au premier article et deuxième de la série !

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.