Forces invisibles espacement et forme

Dans l'article précédent, nous avons appris comment le dimensionnement et la mise à l'échelle peuvent être utilisés pour rendre vos conceptions harmonieuses et claires. Dans notre dernier article sur les forces invisibles dans la conception, nous verrons comment l'utilisation subtile de l'espacement, souvent appelée «espace blanc» ou «espace négatif», peut être utilisée pour faire communiquer efficacement vos conceptions..

Votre ratio «données / encre»

Plus vous utilisez judicieusement les espaces, plus votre «ratio encre / données» est élevé. Ceci est un concept introduit par le gourou de la conception de l'information Edward Tufte. Cela dépend de la quantité d'informations véhiculées par chaque goutte d'encre ou, dans le cas de la conception de sites Web et mobiles, par chaque pixel..

Le graphique de gauche a un rapport données / encre beaucoup plus élevé que le graphique de droite. Le graphique doit-il vraiment être rempli d’encre? Non, ça communique très bien avec des points et des lignes.

Et si vous alliez un peu plus loin et supprimiez les lignes en ne laissant que les points?

Maintenant, la communication est tombée en morceaux. Oui, vous pouvez voir tous les points de données, mais vous avez maintenant perdu le «récit» sur l'évolution des données dans le temps. De plus, il est devenu difficile de faire la distinction avec un simple diagramme en nuage de points, dans lequel «le temps» n'est pas l'une des variables, et les données ne vont pas de manière linéaire..

Les articles les plus 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 la proximité de ces éléments..

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

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..

Donc, quand il y a des changements radicaux dans les données dans le graphique ci-dessus, l'esprit peut vouloir relier les points dans le mauvais ordre, juste parce qu'un point est plus proche d'un autre.

Utilisation des espaces blancs pour des mises en page propres

Ces principes vont bien au-delà des graphiques linéaires. Ils sont présents dans tout ce que vous concevez. Surtout lorsque vous concevez des écrans de petite taille, vous ne voulez pas perdre les pixels, vous voulez concevoir avec un rapport données / encre élevé.

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

Voici une mise en page de base, conçue sur une grille. Le côté gauche est votre navigation et la plus grande zone contient le contenu principal..

Cette disposition est correcte, mais notez que l'espace blanc entre la navigation et l'espace blanc entre les colonnes de texte de 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 délimitation plus nette entre la navigation et le contenu principal, et tout ce que nous devions faire était d'ajouter un petit espace blanc..

Utilisation des espaces blancs pour une typographie épurée

Dans l'article précédent, nous avons appris que le dimensionnement est l'un des nombreux facteurs pouvant être utilisés pour créer une hiérarchie typographique. Les espaces peuvent également vous aider à organiser votre typographie.

Par exemple, regardez cet en-tête, métadonnées et copie du corps.

Ils ont des relations de taille harmonieuses les unes avec les autres, grâce au fait que leurs tailles sont choisies parmi des échelles variées,!

Le problème est que les espaces négatifs entre ces éléments n'ont pas été pris en compte.

La ligne de métadonnées est déjà bien différenciée de l’en-tête: sa taille est différente, elle est en majuscule et même joliment espacée..

Une bonne astuce consiste à utiliser la hauteur du type de métadonnées pour déterminer l’espace disponible entre celui-ci et l’en-tête. Comme ça:

Généralement, vous utiliserez vos globes oculaires pour déterminer cet espacement. Il n'y a pas de moyen mathématique de vous dire exactement combien d'espacement il y aurait. C'est une fonction de la hauteur de ligne, de la quantité de marge ou de remplissage que vous utilisez et des caractéristiques de la police.

Maintenant, qu'en est-il de cette copie de corps?

Il est logique que les métadonnées soient très proches de l'en-tête, mais l'en-tête n'a pas besoin d'être aussi proche du corps de la copie. En fait, l'en-tête et les métadonnées peuvent être leur propre unité.

Vous pouvez utiliser la distance qui sépare le haut de l'en-tête et le bas des métadonnées comme guide et placer la moitié de cette distance entre les métadonnées et le corps du texte..

Conclusion

En réfléchissant à la manière dont vous façonnez votre mise en page et communiquez avec les espaces, vos conceptions seront plus nettes et plus claires, tout en étant plus utilisables et en convertissant mieux..

Cela met fin aux choses pour le moment. Si vous ne l’avez pas déjà fait, assurez-vous de consulter les premier et deuxième articles de la série.!