4 choses que chaque concepteur devrait savoir sur les espaces
L'espace blanc (ou "espace négatif") est un espace vide entre et autour des objets d'une page. Les éléments d'espaces des interfaces utilisateur graphiques sont les suivants:
- Marges, rembourrages et gouttières
- Espace autour des images et des objets graphiques
- Espacement des lignes et espacement des lettres dans le contenu du texte
Bien que certaines personnes puissent considérer les espaces comme un gaspillage de valeur d'écran, c'est un élément essentiel du design. En fait, les espaces sont aussi importants que le contenu. Comme l'a dit Jan Tschichold:
Les espaces doivent être considérés comme un élément actif et non comme un arrière-plan passif.
Toutes les bonnes interfaces utilisateur intègrent des valeurs d'espacement appropriées dans tous les éléments de page, de haut en bas. L'espace d'une page peut être tout aussi important que l'espace occupé par les éléments d'interface utilisateur, car le texte, les boutons, les logos et autres objets ont besoin d'espace pour respirer.
Dans cet article, vous découvrirez comment utiliser des espaces dans vos conceptions pour lui donner une impression nette et épurée:
1. Améliorer la lisibilité du texte
Whitespace rend la lecture beaucoup plus facile en réduisant la quantité de texte que les visiteurs voient en une seule fois. L'absence d'espaces (page encombrée) ne permet pas aux utilisateurs de lire le contenu. D'un autre côté, il a été prouvé que les espaces blancs correctement utilisés augmentent la compréhension du texte jusqu'à 20%, comme indiqué par Dmitry Fadeyev .
Lors de l'optimisation de votre contenu textuel, deux points importants doivent être pris en compte: les marges de paragraphe et l' interligne (espace entre chaque ligne de votre texte). Ce dernier peut considérablement améliorer la lisibilité d'un corps de texte. Généralement, plus l’espacement est grand, meilleure sera la lecture de l’utilisateur (bien qu’un espacement trop important puisse rendre les lignes déconnectées).
2. Clarifier les relations
L'ensemble de la disposition provient de la somme de ses parties et les relations de contenu sont définies par les espaces blancs environnants. La loi de proximité stipule que les objets proches semblent similaires. L'espace blanc sert de repère visuel dans ce cas. Regardez l'image ci-dessous:
Les lois de la Gestalt dictent que les objets à proximité apparaîtront comme une "unité"; l'espace blanc agit comme un repère visuel.
Presque tous ceux qui voient cette image remarquent deux groupes de cercles plutôt que simplement 12 cercles. Les cercles sont tous identiques et la seule différence entre eux est la quantité d'espace blanc qui les sépare.
Il est possible de regrouper des éléments en réduisant l'espace entre eux et en augmentant l'espace entre eux et les autres éléments de la page.
Pour les interfaces utilisateur, cela signifie que les objets à proximité apparaîtront comme une seule "unité". Par exemple, dans le contexte des formulaires Web, il est conseillé de placer des étiquettes à proximité des champs appropriés pour créer un objet. Lorsque les étiquettes sont placées plus près des champs, la relation entre eux est très claire pour les utilisateurs.
L'information est communiquée beaucoup plus clairement lorsque les étiquettes sont placées plus près des champs auxquels elles se rapportent.
3. Attirer l'attention
Les concepteurs peuvent utiliser des espaces pour communiquer en un coup d’œil ce qui est le plus important. Il existe une relation entre distance et attention; une distance plus grande force l'attention. L'absence d'autres éléments ne fera que rendre les éléments existants plus visibles. Il est possible d'utiliser un espace pour votre avantage, pour dessiner des yeux vagabonds sur certains éléments de la page. Un remplissage supplémentaire autour d'un segment de contenu particulier attire l'attention de l'utilisateur sur cette zone simplement parce qu'il n'y a rien d'autre à l'écran pour attirer l'attention. Ainsi, plus l'espace autour d'un objet est grand, plus l'œil est attiré.
4. Créer une hiérarchie visuelle
Lorsque les espaces sont utilisés de manière appropriée, cela permet à une page de créer un flux et un équilibre généraux, ce qui contribue à communiquer l’intention de la conception. Les espaces peuvent supporter la hiérarchie globale. Cela produit une symétrie ou une asymétrie.
La symétrie crée la mémoire et l'harmonie:
Mailchimp, comme vous pouvez le voir, est un grand défenseur des espaces blancs dans leurs conceptions. Lorsque les visiteurs scannent la page d'accueil, le bouton "Inscription gratuite" attire leur attention presque immédiatement. En utilisant la symétrie, il est possible de créer une disposition équilibrée avec des parties droite et gauche également importantes.
Alors que l'asymétrie attire l'attention:
L’asymétrie est excellente pour attirer l’attention sur un secteur particulier de la page.
Lorsqu'un élément utilise un espace asymétrique, il se distingue des autres éléments environnants.
Conclusion
L'espace n'est pas un espace perdu, c'est un outil de conception puissant. Il peut être tout aussi important que l'espace occupé par les images, le texte ou d'autres objets d'interface utilisateur, car même un espace vide sert à quelque chose et prend en charge l'intégrité visuelle d'une mise en page.
Bien que cela semble un sujet simple, les espaces peuvent être difficiles à maîtriser car l'application d'espaces blancs est à la fois artistique et scientifique. Comprendre à quel point les espaces doivent être utilisés pour créer une bonne mise en page nécessite de la pratique.